TYPO3 CMS 6.2 Grundkurs

Breadcrumb-Navigation einrichten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Orientierungshilfe "Breadcrumb-Menü" wird in TYPO3 mittels eines Rootline-Menüs definiert. Erfahren Sie hier, wie Sie dabei vorgehen müssen.

Transkript

Als Orientierungshilfe für den Benutzer wird gern auf die Breadcrumb-Navigation zurückgegriffen. Breadcrumb, also der Brotkrumen, ist auf das Märchen von Hänsel und Gretel zurückzuführen. Die zwei haben ja Brotkrümel verstreut, um den Weg wieder zurück nach Hause zu finden. Und so verhält es sich auch in der Breadcrumb-Navigation. Wir bilden damit die Seitenstruktur oder Hierarchie ab, genauer gesagt die Ebene, in der wir uns befinden. Wie können wir das nun konfigurieren? Dazu wechseln wir zurück ins Backend und legen uns im Setup auf der Root-Site ein neues Objekt an. Ich benenne das mit obj.breadcrumb und vergebe den Typ HMENU. Als Nächstes konfigurieren wir unser Menü, öffnen einen Codeblock, und geben zunächst mit special = rootline an, dass es sich hierbei um eine Breadcrumb-Navigation handelt. rootline ist der TYPO3-Name dafür. Wir umschließen unsere Navigation mit einem div, vergeben hier die ID breadcrumb, und konfigurieren als Nächstes das erste TMENU. Auch hier öffnen wir wieder einen Codeblock und legen die Einstellungen für den Normal-Zustand fest. Wir wollen nach jedem ATag ein Leerzeichen ausgeben. Dazu verwenden wir   und erzeugen dadurch in der Frontend-Ausgabe ein Leerzeichen. Mit erzeugen wir ein greater-than, ein Größer-als-Zeichen. Und im Anschluss fügen wir wieder ein Leerzeichen ein. Damit haben wir eine visuelle Trennung zwischen den Menüeinträgen. Als Nächstes definieren wir den Current-Zustand. Hier wollen wir keinen Eintrag beziehungsweise kein visuelles Trennzeichen am Ende haben. Der Current-Eintrag wird der letzte Menüpunkt in der Breadcrumb-Navigation. Und wir wollen auch nicht, dass der letzte Eintrag verlinkt ist. Wir befinden uns dann ja auf dieser Seite. Also setzen wir die Eigenschaft doNotLinkIt. Damit erhalten wir lediglich den Titel. Damit haben wir unser Breadcrumb-Menü fertig konfiguriert. Nun müssen wir es noch ins Template einbinden. Wir speichern nun die TypoScript- Konfiguration an dieser Stelle und holen uns unser Rahmen-Layout aus fileadmin, genauer gesagt unter sys Private und Layouts finden wir unsere Datei. Mit dem Notepad öffne ich diese zum Editieren. Und wir fügen folgenden ViewHelper oberhalb der Section content ein. Mit f:cObject können wir direkt auf TypoScript-Objekte zugreifen. Und mit dem Attribut typoscriptObjectPath geben wir den Namen an. Damit weiß der Interpreter, welches Objekt geladen werden soll. Wir speichern, wechseln zurück ins Backend, löschen den Frontend-Cache, damit dieser erneuert wird. Vorher noch: Wir befinden uns aktuell auf der Seite Detail 2. Wenn wir nun neu laden, sehen wir hier am oberen Rand des Inhalte-Bereichs die Brotkrumen- oder Breadcrumb-Navigation. Beginnend mit entsprechend der Kette von hier oben: Wobei der letzte Punkt nicht verlinkt ist und auch kein visuelles Trennzeichen am Ende steht. Home steht deswegen vorangestellt, weil Home die Überseite ist. Nur in unserer Menüführung sieht das Ganze optisch so aus, als würden wir uns in einer Ebene befinden. Fassen wir also zusammen: Mit dem Spezialmenü rootline können wir die Breadcrumb-Navigation ausgeben. Mit after können wir Werte anhägen. In dem Fall greifen wir auf ein Trennzeichen zurück, das Größer-als-Zeichen. Und mit doNotLinkIt können wir einzelne Menüeinträge nicht verlinken beziehungsweise nur den Text ausgeben.

TYPO3 CMS 6.2 Grundkurs

Erfahren Sie alles Wichtige für den Einstieg in das Content-Management-System TYPO3 CMS sowie zu Themen wie Mehrsprachigkeit und Multidomainfähigkeit bis hin zur News-Verwaltung.

Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!