TYPO3 Navigationen mit Typoscript
• Second Menu das z.B. in der Sidebar plaziert werden kann und einen tieferen Einstiegspunkt hat.
• Infomenu, das Seiten aus einem Systemordner rendert (zum Beidpiel im Footer)
• Breadcrumb
• Language Menu, Sprachauswahl für mehrsprachige Seiten Für eine besser Übersicht legen wir im Verzeichnis my_extension/Configuration/Typoscript/ einen neuen Ordner "Menu" an und erstellen dort für jedes benötigte Menü eine Datei, zum Beispiel mainmenu.ts. Um die Einbindung ins Tempate zu prüfen, reicht dort folgender Eintrag:
lib.navigation.main = TEXTSpäter ersetzen wir die lib durch den eigentlichen Menüaufbau, im Augenblick wollen wir nur die Einbindung prüfen. Das einzelnen Menüdateien im Ordner "Menu" binden wir mit folgendem Code in unser Setup ein:
lib.navigation.main.value = Hauptmenü
<INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/mainmenu.ts">In unserem Partial Header.html können wir nun mit dem cObject ViewHelper das Menü ausgeben:
<INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/secondmenu.ts">
....
<f:cObject typoscriptObjectPath="lib.navigation.main" />Nach dem leeren aller Caches wird uns nun das Wort "Hauptmenü" im Frontend ausgegeben. Falls die Ausgabe leer bleibt, prüft bitte euere angegebenen Seitenpfade, Ordner- und Dateinamen. Als nächstes ersetzten wir die lib.navigation.xxx durch die eigentlichen Typoscript Menüs:
Hauptmenü
lib.navigation.main = HMENU 1 = TMENU 1 { wrap = <ul class="nav navbar-nav">|</ul> expAll = 1 NO { ATagTitle.field = subtitle // title ATagBeforeWrap = 1 linkWrap = | wrapItemAndSub = <li>|</li> } ACT < .NO ACT.wrapItemAndSub = <li class="active">|</li> CUR < .ACT IFSUB < .NO IFSUB { doNotLinkIt = 1 allWrap = <a href="#" class="dropdown-toggle" data-toggle="dropdown">|<b class="caret hidden-md hidden-lg"></b></a> wrapItemAndSub = <li class="dropdown">|</li> } ACTIFSUB < .IFSUB ACTIFSUB { wrapItemAndSub = <li class="active dropdown">|</li> } CURIFSUB < .ACTIFSUB } 2 < .1 2 { wrap = <ul class="dropdown-menu">|</ul> IFSUB > ACTIFSUB.wrap = <ul class="dropdown-menu open">|</ul> CURIFSUB > } }
Mit der Anweisung HMENU sagt ihr dem System das ihr ein cObject vom Typ Menü (hierarchicalmenu) anlegen wollt. 10.1 ist die erste Menüebene, deklariert als TMENU (textmenu). Mit wrap umschließt ihr das komplette Menü, expAll =1 bedeutet das die Unterseiten berücksichtigt werden.
Nun kommen die verschiedenen Menüzustände: NO: normal, ACT: active (hover), CUR: Seite wird grade angezeigt, IFSUB: Seite hat Unterseiten, ACTIVSUB: Unterseite des Menüpunktes wird grade angezeigt, CURIFSUB: Seite wird angezeigt und hat Unterseiten. Dazu kommen noch zig weitere Eigenschaften die gesetzt werden können, für unser Menü sollte das reichen. Mit 2 < .1 vererbt ihr die ganzen Eigenschaften auf die zweite Menüebene, alles was ihr ändern wollt wird dann inder 2 { ... } Klammer überschrieben. Wie in der Einleitung beschrieben müsst ihr diese Datei im Verzeichnis my_extension/Configuration/Typoscript/Menu/ speichern und in eurem Setup über <INCLUDE_TYPOSCRIPT: source="EXT:my_template/Configuration/Typoscript/Menu/dateiname.ts"> einbinden. Im Template reicht dann ein einfaches
<f:cObject typoscriptObjectPath="lib.navigation.main" />und euer Menü wird gerendert.
Typoscript Untermenü (second Menu)
lib.navigation.sub = HMENU lib.navigation.sub { entryLevel = 1 1 = TMENU 1 { wrap = <ul class="submenu">|</ul> NO { wrapItemAndSub = <li>|</li> } ACT < .NO ACT.wrapItemAndSub = <li class="active">|</li> CUR < .ACT } 2 < .1 }
Menü mit Seiten aus einem Systemordner (Info Menü)
lib.navigation.meta = HMENU lib.navigation.meta { special = directory special.value = 1234 1 = TMENU 1 { wrap = <ul class="submenu">|</ul> NO { wrapItemAndSub = <li>|</li> } ACT < .NO ACT.wrapItemAndSub = <li class="active">|</li> CUR < .ACT } }
Breadcrump Navigation
Um beim Seitenlevel 1 zu beginnen und die aktuelle Seite auszuschließen kann der Wert auf special.range = 1|-2 gesetzt werden.
lib.breadcrumb = HMENU lib.breadcrumb { special = rootline special.range = 0|-1 1 = TMENU 1 { wrap = <ol class="breadcrumb"> | </ol> NO.linkWrap = <li>| </li> CUR = 1 CUR.linkWrap = <li class="active">|</li> CUR.doNotLinkIt = 1 } }