8.1 – Die Navigationen dieser Website

Zwei Navigationen sind auf dieser Seite zu sehen: das Menü in der linken Spalte, in dem das Kapitel der aktuellen Seite aufgeklappt ist, und „Zurück / Weiter“ unter dem Text. Auf dem Smartphone wird das Menü zur Schublade hinter einem Burger-Button. In der Konfiguration sind es zwei Einträge, und beide gelten für beide Sprachen.

id	Variante	Stelle	Sprache
menue	accordion	linke Spalte, auf dem Smartphone Schublade	die der Seite
seiten-pager	pager	unter dem Text	die der Seite

Es ist dieselbe Navigation wie in den anderen Handbüchern dieser Reihe und in der Vorlage, mit der sie gebaut sind. Rechts steht Quartz’ eigenes Inhaltsverzeichnis der Seite.

Wie die Sprachen hier liegen

Die deutschen Seiten stehen in der Wurzel, die englischen unter en/; quartz-multilanguage erkennt das Englische am Ordner und gibt allen übrigen Seiten die Standardsprache Deutsch. Die Navigation baut daraus einen Baum je Sprache: Der deutsche enthält nur die deutschen Seiten, der englische nur die englischen, und zwar ohne den Ordner en — en/1-getting-started steht darin als 1-getting-started. Wie das für alle Aufbauten geht, steht in 8.3.

Das Menü

  - source: "@quartz-community/explorer"
    enabled: false
  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: accordion
      showHome: true
      folderClick: toggle
      indexEntry: first
      exclusive: true
      mobile: offcanvas
      id: menue
      className: nav-menue
      breakpoints:
        mobile: 900px
        desktop: 1200px
    layout:
      position: left
      priority: 30

• Statt des Explorers. Quartz’ Explorer ist abgeschaltet; das Menü steht an seiner Stelle.
• Ein Eintrag für beide Sprachen. Ohne title gibt es keinen eigenen Text, und mit der Vorgabe language: auto zeigt das Menü auf deutschen Seiten die neun deutschen Kapitel, auf englischen die neun englischen.
• accordion mit allen Seiten. Das Kapitel der aktuellen Seite ist offen, die Seite markiert (5.1).
• exclusive hält nur ein Kapitel offen; neun offene Kapitel wären 45 Zeilen.
• folderClick: toggle: Ein Klick irgendwo auf die Kapitelzeile klappt auf und zu.
• indexEntry: first stellt deshalb „Übersicht“ als erste Zeile in jedes Kapitel — sonst wäre die Kapitelseite aus dem Menü nicht erreichbar (3.2).
• showHome setzt „Start“ davor, auf englischen Seiten „Home“ — jeweils die Startseite der eigenen Sprache.
• mobile: offcanvas legt das Menü auf dem Smartphone hinter einen Burger-Button (6.1).
• className: nav-menue ist der Name, unter dem die Vorlage das Menü gestaltet: Schublade, Burger an der Stelle, an der sonst der Button des Explorers säße, Farben und Abstände aus ihren Variablen. Eine eigene Datei dafür braucht diese Website nicht.

Der Pager

  - source: github:boxi-os/quartz-navigations
    enabled: true
    options:
      variant: pager
      id: seiten-pager
      className: nav-pager
      breakpoints:
        mobile: 900px
        desktop: 1200px
    layout:
      position: afterBody
      priority: 80

Ein Eintrag für beide Sprachen. Mit der Vorgabe language: auto blättert der Pager im Baum der Sprache, in der die Seite geschrieben ist: Nach der letzten deutschen Seite kommt nichts mehr, und nicht die englische Startseite.

Die Wörter kommen von selbst richtig. „Zurück“ und „Weiter“ auf deutschen Seiten, „Previous“ und „Next“ auf englischen, ebenso der Name für Screenreader (7.3). Es braucht weder labels: false noch ein ariaLabel.

Was beide Einträge teilen

• breakpoints in beiden Einträgen, weil der Layout-Frame dieser Website bei 900 Pixeln umbricht und nicht bei den 800 aus variables.scss (6.2). desktop wird angenommen, zurzeit aber von keiner Regel des Plugins benutzt.
• Dieselben baumbestimmenden Optionen. Der Bau rechnet deshalb zwei Bäume, einen je Sprache, und nicht vier (1.3).

Was hier nicht eingeschaltet ist

stripNumericPrefix. Die Titel dieser Website beginnen mit ihrer Nummer — „8.1 – Die Navigationen …“ —, und die Option nähme davon „8.“ weg (2.1). Sortiert wird trotzdem richtig: nach den Nummern der Datei- und Ordnernamen, 01-…, 02-….