feature(archiv): Umschalter Kategorie ↔ Jahr
Übersicht /archiv umschaltbar: nach Kategorie (Jahr hinter dem Beitrag, je Rubrik die letzten 10 + 'alle →') oder nach Jahr (Kategorie hinter dem Beitrag, alle). Clientseitig, merkt die Wahl in localStorage. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+68
-25
@@ -1,44 +1,86 @@
|
||||
{{ define "main" }}
|
||||
{{ if eq .Path "/archiv" }}
|
||||
{{/* Archiv root: Titel + Intro + Atlas (je Kategorie die letzten 10) */}}
|
||||
{{/* Archiv-Übersicht: Umschalter Kategorie ↔ Jahr */}}
|
||||
<div class="collection" style="--section-color: var(--palette-kusa)">
|
||||
<h1 class="collection-title">{{ .Title }}</h1>
|
||||
<div class="collection-inner">
|
||||
{{ .Content }}
|
||||
<section class="atlas">
|
||||
{{ range .Sections.ByWeight }}
|
||||
{{ $section := path.Base .RelPermalink }}
|
||||
<article class="atlas-section" data-section="{{ $section }}">
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
{{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
|
||||
|
||||
<div class="archiv-toggle" role="group" aria-label="Sortierung">
|
||||
<button type="button" data-mode="cat" class="is-active">nach Kategorie</button>
|
||||
<button type="button" data-mode="year">nach Jahr</button>
|
||||
</div>
|
||||
|
||||
{{/* Ansicht nach Kategorie — Jahr hinter dem Beitrag, je Rubrik die letzten 10 */}}
|
||||
<div class="archiv-view" data-view="cat">
|
||||
<section class="atlas">
|
||||
{{ range .Sections.ByWeight }}
|
||||
{{ $section := path.Base .RelPermalink }}
|
||||
<article class="atlas-section" data-section="{{ $section }}">
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
|
||||
{{ with .Params.description }}<p class="text-muted">{{ . }}</p>{{ end }}
|
||||
<ul class="atlas-list">
|
||||
{{ range first 10 .RegularPages.ByDate.Reverse }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
<span class="list-meta text-muted"> · {{ .Date.Format "2006" }}</span>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if gt (len .RegularPages) 10 }}
|
||||
<p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ with site.Taxonomies.tags }}
|
||||
<article class="atlas-tags">
|
||||
<h2>Tags</h2>
|
||||
<ul class="tag-cloud">
|
||||
{{ range $name, $taxonomy := . }}
|
||||
<li><a href="/tags/{{ $name | urlize }}/">{{ $name }} <span class="text-muted">({{ len $taxonomy }})</span></a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{/* Ansicht nach Jahr — Kategorie hinter dem Beitrag, alle Beiträge */}}
|
||||
<div class="archiv-view" data-view="year" hidden>
|
||||
{{ $all := where site.RegularPages "Section" "archiv" }}
|
||||
{{ range $all.GroupByDate "2006" }}
|
||||
<article class="atlas-section">
|
||||
<h2>{{ .Key }}</h2>
|
||||
<ul class="atlas-list">
|
||||
{{ range first 10 .RegularPages.ByDate.Reverse }}
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
|
||||
<span class="list-meta text-muted"> · {{ partial "date.html" .Date }}</span>
|
||||
{{ with .CurrentSection }}<span class="list-meta text-muted"> · {{ .LinkTitle }}</span>{{ end }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if gt (len .RegularPages) 10 }}
|
||||
<p class="more"><a href="{{ .RelPermalink }}">alle in {{ .Title }} →</a></p>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Tag-Cloud */}}
|
||||
{{ with site.Taxonomies.tags }}
|
||||
<article class="atlas-tags">
|
||||
<h2>Tags</h2>
|
||||
<ul class="tag-cloud">
|
||||
{{ range $name, $taxonomy := . }}
|
||||
<li><a href="/tags/{{ $name | urlize }}/">{{ $name }} <span class="text-muted">({{ len $taxonomy }})</span></a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
<script>
|
||||
(function () {
|
||||
var bar = document.querySelector('.archiv-toggle'); if (!bar) return;
|
||||
var views = document.querySelectorAll('.archiv-view');
|
||||
function set(mode) {
|
||||
bar.querySelectorAll('button').forEach(function (b) { b.classList.toggle('is-active', b.dataset.mode === mode); });
|
||||
views.forEach(function (v) { v.hidden = v.dataset.view !== mode; });
|
||||
try { localStorage.setItem('ob_archiv_mode', mode); } catch (e) {}
|
||||
}
|
||||
bar.addEventListener('click', function (e) { var b = e.target.closest('button'); if (b) set(b.dataset.mode); });
|
||||
var saved; try { saved = localStorage.getItem('ob_archiv_mode'); } catch (e) {}
|
||||
if (saved === 'year') set('year');
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ else if eq .Path "/archiv/software" }}
|
||||
{{/* Software: kuratierte Landing — Werkzeuge (mit externem Link) getrennt
|
||||
von Texten & Anleitungen. */}}
|
||||
@@ -88,8 +130,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ else }}
|
||||
{{/* Library subsection: chronologisch */}}
|
||||
{{/* Archiv-Unterseite (Rubrik): chronologisch */}}
|
||||
{{ $section := path.Base .RelPermalink }}
|
||||
<header class="section-header" data-section="{{ $section }}">
|
||||
<p class="section-rubric">Archiv</p>
|
||||
|
||||
Reference in New Issue
Block a user