8.1 – Die vier Boxen dieser Website

Schlüssel	Stelle	Quelle	Was daran zu sehen ist
layoutBoxMark	Kopf, priority: 10	html	zwei Bilder für hell/dunkel, {{root}}, {{siteTitle}}
layoutBoxPageName	Kopf, priority: 30	html	{{frontmatter.section}} in einem Attribut
layoutBoxNote	links, priority: 40	file mit .md	Markdown, byLang, aufklappbar
—	Fußzeile, priority: 20	html	{{slug}} in einem CSS-Selektor

Die Wortmarke

options:
  html: <a class="site-mark" href="{{root}}/"><img
    class="img-light" src="{{root}}/static/icon.png" width="26"
    height="26" alt=""><img class="img-dark"
    src="{{root}}/static/icon-dark.png" width="26" height="26"
    alt=""><span class="site-mark-text">{{siteTitle}}</span></a>
  className: layout-box-mark
  placeholders: true
  frontmatterKey: layoutBoxMark

• Zwei Bilder, eines je Farbschema. img-light und img-dark sind Klassen des Plugins; es zeigt jeweils das passende und braucht dafür kein JavaScript (5.2).
• Es sind die Bilder, die Quartz ohnehin hat: icon.png ist das Favicon, icon-dark.png die Fassung für den Dunkelmodus. Wer das Bild austauscht, tauscht Favicon und Marke in einem — in QuartzControl unter Konfiguration → Projektbild.
• {{siteTitle}} setzt den Seitentitel aus der Konfiguration daneben, {{root}} macht Link und Bildadressen richtig, auch unter einem Unterpfad (4.2).
• alt="", weil der Titel daneben als Text steht; ein Screenreader läse den Namen sonst zweimal.

Der Kapitelname

options:
  html: '<span data-section="{{frontmatter.section}}"></span>'
  className: layout-box-page-name

Das span bleibt leer. Sichtbar wird der Wert erst durch CSS:

.layout-box-page-name span::before {
  content: "· " attr(data-section);
}

Warum der Umweg? Weil so das Trennzeichen und der Abstand ins CSS gehören, wo sie hingehören — und weil eine Seite ohne section dann nichts anzeigt statt eines einsamen Punkts.

Der Notizkasten

Der einzige mit file:, und der einzige mit byLang. Er zeigt drei Dinge auf einmal: einen Markdown-Schnipsel, zwei Sprachen und das Aufklappen.

options:
  file: sidebar-note.md
  title: Über dieses Handbuch
  collapsible: true
  frontmatterKey: layoutBoxNote
  byLang:
    en:
      file: sidebar-note.en.md
      title: About this handbook
layout:
  position: left
  priority: 40
  display: desktop-only

desktop-only, weil die linke Spalte auf dem Smartphone ohnehin verschwindet.

Die vierte Box hat eine eigene Seite: 8.2.