Navigationspfad anpassen

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partial breadcrumbs.html enthalten. Dieses Partial ermöglicht über sogenannte named Parameter einige Anpassungen der Darstellung.

Im aktuellen Beispiel soll der Navigationspfad (Breadcrumb) mit Hilfe der Paramter eine neue Beschreibung vor dem eigentlichen Navigationspfad und ein anderes Trennzeichen erhalten. Außerdem sollen die Links eine zum Layout passende Farbe erhalten.

1. Navigationspfad in der Seitenvorlage anpassen

Passen Sie in der Seitenvorlage default.html beim Partial breadcrumbs.html den Parameter breadcrumb mit dem Wert Aktuelle Seite: und den Parameter breadcrumb_separator mit dem Wert > an.

Markup

<div id="breadcrumb">
	<$= system.partial("breadcrumbs.html", "Aktuelle Seite:", ">") $>
</div>

2. CSS für den Navigationspfad anpassen

In der Datei styles.css ist bereits ein CSS-Stil für den Navigationspfad vorhanden. Diesen müssen Sie wie folgt erweitern, damit die Links in der passenden Farbe erscheinen.

CSS

#breadcrumb {
	margin-bottom: 40px;
}
#breadcrumb a {
	color: #45b202;
}

3. Aktuelle Darstellung des Layouts

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen am Layout sofort sichtbar.

Vor dem Navigationspfad sehen nun die Beschreibung Aktuelle Seite. Fügen Sie am besten einige Seiten mit Unterseiten ein, damit Sie die angepassten Trennzeichen des Breadcrumbs sehen können.