Bakehouse-Navigationen

    Navigationen sind ein wesentlicher Bestandteil vieler Online-Projekte. Im Bakehouse sind die wichtigsten Anwendungsfälle betreffend Navigationen mithilfe von ViewHelpern bereits abgedeckt.

    HTML
    <bh:tmpl.navigation typoscriptPath="lib.navigation" />

    Zum Navigations-ViewHelper

    Der ViewHelper wrappt die Navigation zwangsläufig in <div class="bh-navigation" />. Dies hat folgende Gründe:

    • Durch die Klasse bh-navigation wird sichergestellt, dass die Links innerhalb der Navigation auch im edit Editier-Modus klickbar sind, um dem/der Redakteur:in ein schnelles Seitenwechseln zu ermöglichen. 
    • Für zukünftige Bakehouse-Versionen ist geplant, dass sich Navigationen live ändern, sobald sie in der navigation Seitenstruktur editiert werden. Damit dieses Feature bei möglichst allen Projekten ausgerollt werden kann, sollte der ViewHelper bereits jetzt zur Anwendung kommen.

    Vorkonfigurierte Navigationspfade

    • lib.navigation: Ausgabe der ersten Hierarchie-Ebene unterhalb der Root-Seite
    • lib.fullnavigation: Ausgabe der ersten, zweiten und dritten Hierarchie-Ebene – eignet sich für Strukturbäume und Dropdown-Navigationen
    • lib.subnavigation: Ausgabe der zweiten und dritten Hierarchie-Ebene – eignet sich für die Ausgabe einer Subnavigation innerhalb eines Hauptmenü-Punkts.
    • lib.servicenavigation: Ausgabe einer dezidierten Strukturebene – im TypoScript wird der Ausgangspunkt mittels Seiten-ID angegeben: lib.servicenavigation.special.value = [Seiten-ID]

    Subtitle integrieren

    Subtitle-Feld aktivieren

    Es besteht die Möglichkeit, neben dem Seitennamen auch einen frei befüllbaren Subtitle in der Navigation auszugeben. Dafür muss zunächst das Feld zur Befüllung der Subtitle per TypoScript aktivieren werden. Dieses erscheint in den edit Seiteneigenschaften, die über die navigation Seitenstruktur erreichbar sind.

    Typoscript
    plugin.tx_bh.settings.page.options.enableSubtitle = 1

    Subtitle in der Navigation inkludieren

    Um den Subtitle in der Navigation auszugeben, ist ein Umbau des Navigations-TypoScripts notwendig.

    Im folgenden Beispiel wird der Subtitle in allen drei Ebenen lib.fullnavigation integriert. Soll der Subtitle beispielsweise auch in der Navigation für mobile Endgeräte ausgegeben werden, muss folglich auch das TypoScript der mobilen Navigation überarbeitet werden:

    Typoscript
    lib.naviSubtext = COA lib.naviSubtext { 1 = TEXT 1.wrap = <div class="hnavi_item_title">|</div> 1.field = title 2 = TEXT 2.wrap = <div class="hnavi_item_subtext">|</div> 2.field = subtitle } lib.fullnavigation { 1.NO { stdWrap.cObject < lib.naviSubtext } 1.ACT { stdWrap.cObject < lib.naviSubtext } 2.NO { stdWrap.cObject < lib.naviSubtext stdWrap.cObject { 1.wrap = <div class="hsnavi_item_title">|</div> 2.wrap = <div class="hsnavi_item_subtext">|</div> } } 2.ACT { stdWrap.cObject < lib.naviSubtext stdWrap.cObject { 1.wrap = <div class="hsnavi_item_title">|</div> 2.wrap = <div class="hsnavi_item_subtext">|</div> } } 3.NO { stdWrap.cObject < lib.naviSubtext stdWrap.cObject { 1.wrap = <div class="hssnavi_item_title">|</div> 2.wrap = <div class="hssnavi_item_subtext">|</div> } } 3.ACT { stdWrap.cObject < lib.naviSubtext stdWrap.cObject { 1.wrap = <div class="hssnavi_item_title">|</div> 2.wrap = <div class="hssnavi_item_subtext">|</div> } } }

    Assets integrieren

    Über die edit Seiteneigenschaften können einzelnen Unterseiten des Projekts auch Bilder oder Grafiken zugeordnet werden. Um diese Assets in der Navigation auszugeben, werden Anpassungen im TypoScript vorgenommen.

    Im folgenden Beispiel wird in der zweiten Hierarchie-Ebene der Navigation ein Bild-Asset (als Background-Image) und ein Subtitle integriert:

    Typoscript
    lib.subnavicontent = COA lib.subnavicontent { 1 = TEXT 1.value = <div class="hsnavi_item_image" style="background-image: url(' 2 = IMG_RESOURCE 2.file { import = uploads/tx_bh/ import.data = levelmedia: 1 import.field = uid import.postUserFunc = TYPO3\Bh\Utility\UserFunction->user_findFiles import.postUserFunc.listNum = 0 import.postUserFunc.tablename = pages } 3 = TEXT 3.value = ')"></div> 10 = TEXT 10.wrap = <div class="hsnavi_item_title">|</div> 10.field = title 15 = TEXT 15.wrap = <div class="hsnavi_item_subtext">|</div> 15.field = subtitle } lib.fullnavigation { 2.NO { stdWrap.cObject < lib.subnavicontent } 2.ACT { stdWrap.cObject < lib.subnavicontent } }

    Auf dieselbe Art und Weise wird auch der Service-Navigation Bild und Subtext hinzugefügt.

    Icons integrieren

    Über die edit Seiteneinstellung steht – bei aktiviertem Frontend-Iconset – dem Redakteur die Möglichkeit offen, ein Icon pro Unterseite auszuwählen. Dieses wird automatisch in der Navigation ausgegeben.