From: Kai Moritz Date: Fri, 5 Jun 2026 14:07:56 +0000 (+0000) Subject: Vollständige Sitemap-Navigation: nav-leaf, strong-Breadcrumb, blog.html-Partial X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=099a40040f60b7a293de210b1f86bd24f7ef2c79;p=website Vollständige Sitemap-Navigation: nav-leaf, strong-Breadcrumb, blog.html-Partial 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`: `` 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 --- diff --git a/CLAUDE.md b/CLAUDE.md index 0e3e8655..113fbd9f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -105,12 +105,43 @@ Binary von sass-lang.com. Hugo erkennt Dart Sass automatisch, wenn im PATH. 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 `` innerhalb des ``-Elements: +```html +Titel +``` + +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 `` 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 `` 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 diff --git a/assets/scss/screen/menu.scss b/assets/scss/screen/menu.scss index 0d8d8e59..bfafe871 100644 --- a/assets/scss/screen/menu.scss +++ b/assets/scss/screen/menu.scss @@ -91,3 +91,11 @@ { content: 'V '; } +#submenu li.s.nav-leaf +{ + display: none; +} +#submenu li.s > a.s.selected > strong +{ + font-weight: normal; +} diff --git a/layouts/_partials/menu/blog.html b/layouts/_partials/menu/blog.html index ff6fdc2b..b0fd22d6 100644 --- a/layouts/_partials/menu/blog.html +++ b/layouts/_partials/menu/blog.html @@ -1,4 +1,9 @@ -{{- $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 -}} diff --git a/layouts/_partials/menu/tree.html b/layouts/_partials/menu/tree.html index fc7b65d0..64b7871a 100644 --- a/layouts/_partials/menu/tree.html +++ b/layouts/_partials/menu/tree.html @@ -12,8 +12,8 @@ {{- if or $isNotAProject $isVisible $isSelectedProjectPage}}
  • {{ .LinkTitle }} + class="s{{ if (or $isCurrent $isAncestor) }} selected{{ end }}" + >{{ if (or $isCurrent $isAncestor) }}{{ .LinkTitle }}{{ else }}{{ .LinkTitle }}{{ end }} {{ if or .Pages .Sections }}
      {{- if .Pages }} diff --git a/layouts/blog/archive/page.html b/layouts/blog/archive/page.html index bf88f382..3991f319 100644 --- a/layouts/blog/archive/page.html +++ b/layouts/blog/archive/page.html @@ -15,67 +15,7 @@ {{ end }} {{ end }} {{- define "menu" }} -{{- $page := $ }} - +{{- partial "menu/blog.html" (dict "page" $) }} {{- end }}{{/* end menu */}} {{ define "marginalcontent" }} {{ partial "terms.html" . }} diff --git a/layouts/blog/archive/section.html b/layouts/blog/archive/section.html index 938d5f02..b5eb80b2 100644 --- a/layouts/blog/archive/section.html +++ b/layouts/blog/archive/section.html @@ -36,65 +36,5 @@ {{- end }}{{/* end main */}} {{- define "menu" }} -{{- $page := $ }} - +{{- partial "menu/blog.html" (dict "page" $) }} {{- end }}{{/* end menu */}} diff --git a/layouts/blog/archive/year.html b/layouts/blog/archive/year.html index 6c8900c6..e1c3b0ea 100644 --- a/layouts/blog/archive/year.html +++ b/layouts/blog/archive/year.html @@ -47,65 +47,5 @@ {{- end }}{{/* end main */}} {{- define "menu" }} -{{- $page := $ }} - +{{- partial "menu/blog.html" (dict "page" $) }} {{- end }}{{/* end menu */}} diff --git a/layouts/blog/section.html b/layouts/blog/section.html index ff9c3cb6..8ab9c649 100644 --- a/layouts/blog/section.html +++ b/layouts/blog/section.html @@ -1,59 +1,6 @@ -{{ define "menu" }} -{{- $page := $ }} - -{{ end }} +{{- define "menu" }} +{{- partial "menu/blog.html" (dict "page" $) }} +{{- end }} {{- define "article" }}

      Recently Published Articles