8.2 – Die unsichtbare Box

Die vierte Box dieser Website ist keine Box im üblichen Sinn. Sie steht in der Fußzeile, ist selbst nicht zu sehen, und gibt nur dies aus:

options:
  html: <style>.explorer .folder-container[data-folderpath="{{slug}}"]{…}</style>
  className: layout-box-current-folder
layout:
  position: footer
  priority: 20

Sie hebt im Explorer den Ordner hervor, in dem die gerade offene Seite liegt.

Warum das nicht anders geht

Der Explorer schreibt den Pfad jedes Ordners als Attribut ins HTML. Welcher davon der aktuelle ist, weiß nur die Seite selbst — und das ist genau der Wert, den {{slug}} liefert.

CSS allein kann das nicht: Ein Stylesheet ist für alle Seiten dasselbe und kennt die aktuelle Seite nicht. Ein Skript könnte es, wäre aber JavaScript für eine Hintergrundfarbe.

Der Platzhalter steht hier in einem Selektor, nicht in einem Textknoten. Das ist der ungewöhnliche Teil, und er funktioniert, weil die Ersetzung nichts über die Bedeutung ihrer Umgebung annimmt.

Warum in der Fußzeile

Weil es gleichgültig ist, wo ein <style> steht — und die Fußzeile die Stelle ist, an der eine unsichtbare Box niemandem im Weg ist. In einer Seitenspalte hinterließe sie im ungünstigen Fall einen Abstand.

Wann das der falsche Weg wäre

Für Gestaltung, die auf allen Seiten gleich ist, gehört CSS in custom.scss. Der Umweg über eine Box lohnt nur, wenn ein Wert der aktuellen Seite in die Regel muss. Wer anfängt, ganze Stylesheets so auszuliefern, hat sein CSS in die Konfiguration verlegt — schlecht zu lesen, schlecht zu ändern, und auf jeder Seite neu im HTML.

Kein frontmatterKey

Sie hat keinen, und das mit Absicht: Es gibt keinen Fall, in dem eine einzelne Seite die Ordner-Hervorhebung abschalten wollte. Ein Schlüssel, den niemand braucht, ist nur eine weitere Zeile, die jemand später verstehen muss.