Kernprinzip: HTML enthält immer alle Einträge (vollständige Sitemap).
CSS-Klassen steuern die Sichtbarkeit im Classic-Layout, das NONE-Layout
(kein CSS) zeigt damit automatisch die komplette Sitemap.
Änderungen:
- Neues `_partials/menu/blog.html`: kanonisches Menü-Partial für alle
Blog-bezogenen Seiten; ersetzt die duplizierten inline menu-Blöcke in
den 4 Blog-Templates (blog/section, archive/section, archive/year,
archive/page)
- Blog-Artikel im HTML mit Klasse `nav-leaf` → im Classic ausgeblendet,
im NONE-Layout sichtbar
- Jahres-Items: immer sichtbar außer auf /blog/ (dort `off`)
- Kategorien/Tags: `off` außer auf /blog/; einzelne Kategorien/Tag-Namen
als `nav-leaf`-Items (ohne Artikel darunter)
- `tree.html`: `<strong>` innerhalb aktiver Pfad-Links für
Breadcrumb-Markierung im NONE-Layout
- `screen/menu.scss`: `nav-leaf { display: none }` und
`a.selected > strong { font-weight: normal }` (Classic bleibt visuell
unverändert)
- CLAUDE.md: Architektur des Menü-Systems dokumentiert (CSS-Marker-
Prinzip, Breadcrumb-Markierung, Blog-Menü-Logik)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Das Menü (`nav#nav`) ist bewusst am HTML-Ende platziert und funktioniert gleichzeitig als SEO-Sitemap. Details zum Konzept: siehe CLAUDE.md im Content-Repo.
-**Aktueller Stand der Menü-Templates:**
+### Grundprinzip: HTML immer vollständig, CSS steuert Sichtbarkeit
+
+Das HTML enthält **immer alle Einträge** (vollständige Sitemap). Die Sichtbarkeit im Classic-Layout wird ausschließlich über CSS-Klassen gesteuert:
+
+| CSS-Klasse | Bedeutung | Classic | NONE |
+|---|---|---|---|
+| `off` | Item liegt außerhalb des aktiven Navigationspfads | `display: none` | sichtbar |
+| `nav-leaf` | Blatt-Item, das im Menü nicht angezeigt werden soll (z.B. Blog-Artikel, einzelne Kategorien/Tags in der Blog-Navigation) | `display: none` | sichtbar |
+| `active` | Sub-Liste ist aufgeklappt (auf dem aktiven Pfad) | sichtbarer Margin-Top | keine CSS-Wirkung |
+| `selected` | Link gehört zum aktiven Breadcrumb-Pfad | andere Farbe + Präfix | keine CSS-Wirkung |
+
+### Breadcrumb-Markierung im NONE-Layout
+
+Items auf dem aktiven Breadcrumb-Pfad (current + ancestors) bekommen `<strong>` innerhalb des `<a>`-Elements:
+```html
+<a href="..." class="s selected"><strong>Titel</strong></a>
+```
+
+Im Classic-Layout wird das Bold durch die CSS-Regel
+`#submenu li.s > a.s.selected > strong { font-weight: normal; }`
+neutralisiert, sodass das Classic-Layout visuell unverändert bleibt.
+Im NONE-Layout (kein CSS) rendert der Browser `<strong>` als fett → sichtbare Pfad-Hervorhebung.
+
+### Aktueller Stand der Menü-Templates
+
- `_partials/menu/default.html`: Generisches Menü für nicht-Blog-Seiten (nutzt `tree.html`)
-- `_partials/menu/tree.html`: Rekursives Partial für den Seitenbaum (mit Projects-Sichtbarkeitslogik)
-- Für Blog/Categories/Tags ist der Menü-Block direkt in den jeweiligen Layout-Dateien inline — das ist bewusstes technisches Debt, das konsolidiert werden soll.
+- `_partials/menu/tree.html`: Rekursives Partial für den Seitenbaum (mit Projects-Sichtbarkeitslogik); setzt `<strong>` für aktive Pfad-Items
+- `_partials/menu/blog.html`: Vollständiges Menü für alle Blog-bezogenen Seiten (`/blog/`, `/blog/archive/`, Jahr- und Artikel-Seiten); ersetzt die früheren Inline-`menu`-Blöcke in den 4 Blog-Templates
+- Für Categories/Tags ist der Menü-Block noch direkt in den jeweiligen Layout-Dateien inline — technisches Debt, das konsolidiert werden soll.
+
+### Blog-Menü-Logik (`blog.html`)
+
+- **Jahres-Items**: Nie `off` (immer sichtbar in Classic), außer auf der `/blog/`-Übersichtsseite
+- **Artikel-Items**: Immer `nav-leaf` (in Classic ausgeblendet, in NONE sichtbar)
+- **Kategorien/Tags**: `off` auf allen Blog-Seiten außer `/blog/` selbst; im NONE-Layout trotzdem sichtbar, inklusive der einzelnen Kategorie-/Tag-Namen als `nav-leaf`-Items (ohne die jeweiligen Artikel darunter)
-**Offene Aufgabe:** Den `menu`-Block aus den Einzeltemplates in ein einziges parametrisiertes Partial auslagern.
+**Offene Aufgabe:** Den `menu`-Block aus den Categories/Tags-Templates in das `blog.html`-Partial oder ein weiteres Partial konsolidieren.
## Shortcodes
{
content: 'V ';
}
+#submenu li.s.nav-leaf
+{
+ display: none;
+}
+#submenu li.s > a.s.selected > strong
+{
+ font-weight: normal;
+}
-{{- $page := .page }}
+{{- $page := .page -}}
+{{- $blog := site.GetPage "/blog" -}}
+{{- $archive := site.GetPage "/blog/archive" -}}
+{{- $onBlog := eq $page $blog -}}
+{{- $archiveSelected := or (eq $page $archive) ($page.IsDescendant $archive) -}}
+{{- $blogSelected := or $onBlog $archiveSelected -}}
<nav id="nav">
<hr class="n"/>
<a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
{{- with site.GetPage "section" . }}
{{- if eq .Path "/blog" }}
<li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s">
- {{- range .Pages -}}
- <li class="s">
- <a href="{{ .RelPermalink }}" class="s{{ if or (eq . $page) (eq .LinkTitle ($page.Date | time.Format "2006")) }}
-) }} selected{{ end }}">{{ .LinkTitle }}</a>
+ <a href="{{ $blog.RelPermalink }}" class="s{{ if $blogSelected }} selected{{ end }}">{{ if $blogSelected }}<strong>{{ $blog.LinkTitle }}</strong>{{ else }}{{ $blog.LinkTitle }}{{ end }}</a>
+ <ul class="s{{ if $blogSelected }} active{{ end }}">
+ <li class="s sub">
+ <a href="{{ $archive.RelPermalink }}" class="s{{ if $archiveSelected }} selected{{ end }}">{{ if $archiveSelected }}<strong>{{ $archive.LinkTitle }}</strong>{{ else }}{{ $archive.LinkTitle }}{{ end }}</a>
+ <ul class="s{{ if $archiveSelected }} active{{ end }}">
+ {{- range $archive.Pages -}}
+ {{- $isActiveYear := or (eq . $page) ($page.IsDescendant .) -}}
+ <li class="s sub{{ if $onBlog }} off{{ end }}">
+ <a href="{{ .RelPermalink }}" class="s{{ if $isActiveYear }} selected{{ end }}">{{ if $isActiveYear }}<strong>{{ .LinkTitle }}</strong>{{ else }}{{ .LinkTitle }}{{ end }}</a>
+ <ul class="s{{ if $isActiveYear }} active{{ end }}">
+ {{- range .Pages -}}
+ {{- $isCurrent := eq . $page -}}
+ <li class="s nav-leaf">
+ <a href="{{ .RelPermalink }}" class="s{{ if $isCurrent }} selected{{ end }}">{{ if $isCurrent }}<strong>{{ .LinkTitle }}</strong>{{ else }}{{ .LinkTitle }}{{ end }}</a>
+ </li>
+ {{- end -}}
+ </ul>
+ </li>
+ {{- end -}}
+ </ul>
+ </li>
+ {{- with site.GetPage "/categories" -}}
+ <li class="s{{ if not $onBlog }} off{{ end }}">
+ <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
+ <ul class="s">
+ {{- range .Pages -}}
+ <li class="s nav-leaf">
+ <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
+ </li>
+ {{- end -}}
+ </ul>
+ </li>
+ {{- end -}}
+ {{- with site.GetPage "/tags" -}}
+ <li class="s{{ if not $onBlog }} off{{ end }}">
+ <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
+ <ul class="s">
+ {{- range .Pages -}}
+ <li class="s nav-leaf">
+ <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
+ </li>
+ {{- end -}}
+ </ul>
</li>
- {{ end }}
+ {{- end -}}
</ul>
</li>
{{- else }}
- <li class="s{{ if or .Pages .Sections}} sub{{ end }} off">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
+ <li class="s{{ if or .Pages .Sections }} sub{{ end }} off">
+ <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
<ul class="s">
- {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
+ {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
</ul>
</li>
- {{- end }}{{/* if */}}
- {{- end }}{{/* with */}}
- {{- end }}{{/* range */}}
+ {{- end }}
+ {{- end }}
+ {{- end }}
</ul>
<hr class="n"/>
</nav>
{{- if or $isNotAProject $isVisible $isSelectedProjectPage}}
<li class="s{{ if or .Pages .Sections}} sub{{ end }}{{ if not (or $isCurrent $isAncestor (and $isSibling (not $page.IsNode)) $isChild) }} off{{ end }}">
<a href="{{ .RelPermalink }}"
- class="s {{ if (or $isCurrent $isAncestor) }} selected{{ end }}"
- >{{ .LinkTitle }}</a>
+ class="s{{ if (or $isCurrent $isAncestor) }} selected{{ end }}"
+ >{{ if (or $isCurrent $isAncestor) }}<strong>{{ .LinkTitle }}</strong>{{ else }}{{ .LinkTitle }}{{ end }}</a>
{{ if or .Pages .Sections }}
<ul class="s{{ if (or $isCurrent $isAncestor) }} active{{ end }}">
{{- if .Pages }}
{{ end }}
{{ end }}
{{- define "menu" }}
-{{- $page := $ }}
-<nav id="nav">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- {{- range $page.Site.MainSections }}
- {{- $section := site.GetPage "section" . }}
- <li class="m {{ . }}">
- <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
- </li>
- {{- end }}
- </ul>
- <h2 class="nav submenu">
- <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
- </h2>
- <ul id="submenu" class="s active">
- {{- range $page.Site.MainSections }}
- {{- with site.GetPage "section" . }}
- {{- if eq .Path "/blog" }}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s">
- <a href="{{ .RelPermalink }}" class="s{{ if or (eq . $page) (eq .LinkTitle ($page.Date | time.Format "2006")) }} selected{{ end }}">{{ .LinkTitle }}</a>
- </li>
- {{ end }}
- </ul>
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/categories" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/tags" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- {{ end }}
- </ul>
- </li>
- {{- else }}
- <li class="s{{ if or .Pages .Sections}} sub{{ end }} off">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- <ul class="s">
- {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
- </ul>
- </li>
- {{- end }}{{/* if */}}
- {{- end }}{{/* with */}}
- {{- end }}{{/* range */}}
- </ul>
- <hr class="n"/>
-</nav>
+{{- partial "menu/blog.html" (dict "page" $) }}
{{- end }}{{/* end menu */}}
{{ define "marginalcontent" }}
{{ partial "terms.html" . }}
{{- end }}{{/* end main */}}
{{- define "menu" }}
-{{- $page := $ }}
-<nav id="nav">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- {{- range $page.Site.MainSections }}
- {{- $section := site.GetPage "section" . }}
- <li class="m {{ . }}">
- <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
- </li>
- {{- end }}
- </ul>
- <h2 class="nav submenu">
- <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
- </h2>
- <ul id="submenu" class="s active">
- {{- range $page.Site.MainSections }}
- {{- with site.GetPage "section" . }}
- {{- if eq .Path "/blog" }}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- </li>
- {{ end }}
- </ul>
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/categories" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/tags" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- {{ end }}
- </ul>
- </li>
- {{- else }}
- <li class="s{{ if or .Pages .Sections}} sub{{ end }} off">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- <ul class="s">
- {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
- </ul>
- </li>
- {{- end }}{{/* if */}}
- {{- end }}{{/* with */}}
- {{- end }}{{/* range */}}
- </ul>
- <hr class="n"/>
-</nav>
+{{- partial "menu/blog.html" (dict "page" $) }}
{{- end }}{{/* end menu */}}
{{- end }}{{/* end main */}}
{{- define "menu" }}
-{{- $page := $ }}
-<nav id="nav">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- {{- range $page.Site.MainSections }}
- {{- $section := site.GetPage "section" . }}
- <li class="m {{ . }}">
- <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
- </li>
- {{- end }}
- </ul>
- <h2 class="nav submenu">
- <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
- </h2>
- <ul id="submenu" class="s active">
- {{- range $page.Site.MainSections }}
- {{- with site.GetPage "section" . }}
- {{- if eq .Path "/blog" }}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s">
- <a href="{{ .RelPermalink }}" class="s{{ if or (eq . $page) (eq .LinkTitle ($page.Date | time.Format "2006")) }} selected{{ end }}">{{ .LinkTitle }}</a>
- </li>
- {{ end }}
- </ul>
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/categories" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- <li class="s off">
- {{- with $.Site.GetPage "/tags" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- {{ end }}
- </ul>
- </li>
- {{- else }}
- <li class="s{{ if or .Pages .Sections}} sub{{ end }} off">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- <ul class="s">
- {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
- </ul>
- </li>
- {{- end }}{{/* if */}}
- {{- end }}{{/* with */}}
- {{- end }}{{/* range */}}
- </ul>
- <hr class="n"/>
-</nav>
+{{- partial "menu/blog.html" (dict "page" $) }}
{{- end }}{{/* end menu */}}
-{{ define "menu" }}
-{{- $page := $ }}
-<nav id="nav">
- <hr class="n"/>
- <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
- <h1 class="nav">Navigation</h1>
- <h2 class="nav menu">Section-Menu</h2>
- <ul id="menu" class="cf">
- {{- range $page.Site.MainSections }}
- {{- $section := site.GetPage "section" . }}
- <li class="m {{ . }}">
- <a href="{{ $section.RelPermalink }}" class="{{ cond (eq $page.Section .) "m selected" "m" }}">{{ $section.LinkTitle }}</a>
- </li>
- {{- end }}
- </ul>
- <h2 class="nav submenu">
- <a class="s selected" href="{{ site.Home.RelPermalink }}">Home</a>
- </h2>
- <ul id="submenu" class="s active">
- {{- range $page.Site.MainSections }}
- {{- with site.GetPage "section" . }}
- {{- if eq .Path "/blog" }}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s selected">{{ .LinkTitle }}</a>
- <ul class="s active">
- {{- range .Pages -}}
- <li class="s sub">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- </li>
- <li class="s">
- {{- with $.Site.GetPage "/categories" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- <li class="s">
- {{- with $.Site.GetPage "/tags" -}}
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- {{- end -}}
- </li>
- {{ end }}
- </ul>
- </li>
- {{- else }}
- <li class="s{{ if or .Pages .Sections}} sub{{ end }} off">
- <a href="{{ .RelPermalink }}" class="s">{{ .LinkTitle }}</a>
- <ul class="s">
- {{- partial "menu/tree.html" (dict "pages" .Pages "page" $page) }}
- </ul>
- </li>
- {{- end }}{{/* if */}}
- {{- end }}{{/* with */}}
- {{- end }}{{/* range */}}
- </ul>
- <hr class="n"/>
-</nav>
-{{ end }}
+{{- define "menu" }}
+{{- partial "menu/blog.html" (dict "page" $) }}
+{{- end }}
{{- define "article" }}
<header><h1>Recently Published Articles</h1></header>
projects / website / commitdiff