TYPO3 Neos Grundkurs

Menüs

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieses Video vermittelt Ihnen die grundlegenden Schritte, um eine Menüführung zu generieren.

Transkript

Essentieller Bestandteil fast jeder Website ist die Menüführung. Und genau diese wollen wir nun mit TypoScript aufbauen. Sehen wir uns zunächst das Template an. Wir haben eine Menüführung mit zwei Ebenen. Die erste Ebene horizontal, also "Über mich", "Reisen", "Bereiste Länder" und unterhalb von "Reisen" zwei Unterseiten "Berichte" und "Impressionen". In Neos habe ich die Seite bereits angelegt, analog zu unserer Template-Vorlage. Die Seite "Reisen" ist vom Typ "Shortcut", alle anderen Seiten sind vom Typ "Page". Zunächst erweitern wir unser TypoScript um ein neues Objekt namens "Hauptmenü" Dieses soll vom Typ "Menü" sein. und wir legen zunächst den Template-Pfad fest. Hierzu steht uns die Variable "templatePath" zur Verfügung und wir geben hier nun einen Pfad zu einer neuen Datei an. Würden wir ja auch diese Definition in "Standard.template" ablegen, wird unsere Vorlage etwas unübersichtlich. Die Datei benenne ich wie das Objekt mit "Hauptmenü". Per Konvention müssen Dateinamen mit einem großen Buchstaben beginnen, Objektnamen im TypoScript mit einem kleinen Buchstaben. Als nächstes legen wir das sogenannte "entryLevel" fest, also das Einstiegslevel ab welcher Ebene wir die Seiten aus Neos abholen wollen. Wir wollen ab der ersten Ebene alle Seiten abholen und bis zu einer Tiefe von zwei Ebenen. Hierfür verwenden wir die Einstellung "maximumLevels". Ich gebe hier den Wert 2 an. Damit erhalten wir alle Seiten, die wir in Neos angelegt haben. Ein Wort noch zum Typ "Menü", der Prototyp von "Menü" erbt vom Prototypen "Template". Deswegen steht uns auch der Template Path hier zur Verfügung. Als nächstes müssen wir unser Hauptmenü an die Page übergeben, damit wir auch eine Ausgabe erhalten. ich ersetze hierfür die durch den Kickstarter generierte Zeile "menu" und kopiere an die Eigenschaft "hauptmenue" unser Objekt "hauptmenue". Ich speichere diese Datei und wir legen als nächstes die HTML-Datei an. Zunächst kopiere ich mir den Ordnernamen, lege unter "Templates" den neuen Ordner an und darin die "Hauptmenue.html". Wir löschen als erstes das Standard-Markup und ich habe hier ein bisschen was vorbereitet, damit wir uns die Tipparbeit sparen beziehungsweise Sie mir nicht beim Tippen zugucken müssen. In der ersten Zeile finden wir den "namespace". Die Angabe des Namespace mit dem Bezeichner "Neos" soll bedeuten, es werden sämtliche ViewHelper nun aus dem Typo3 Neos Paket geladen. Der Bezeichner "Neos" ist frei wählbar. Wir benötigen einen ganz speziellen ViewHelper aus diesem Paket, nämlich den Link-ViewHelper, mithilfe dessen wir Nodes auf der Website verlinken können, also genauer gesagt Zeit mit Knoten. Gehen wir den Aufbau einmal durch. Zunächst sehen wir hier das Tag für eine ungeordnete Liste gefolgt von dem for-ViewHelper aus Fluid, mithilfe dessen kann ich über ein Array Items iterieren. Items steht uns standardmäßig aus dem Prototyp des Menü-Objekts zur Verfügung und enthält alle Seiten inklusive Unterseiten bis zur angegebenen Tiefe. Mit jedem Schleifendurchlauf legen wir das einzelne Element unter einem Bezeichner "item" ab. Als nächstes prüfen wir, ob das Item Kindelemente hat. Dies überprüfen wir mit dem if-ViewHelper, und zwar übergeben wir im Attribut "condition" "item.suibitems". Wenn die Bedingung eintrifft, springen wir in den denn-Teil und geben zunächst einmal den Link aus. Und hier sehen wir den "neos:link.node"-ViewHelper. Vom aktuellen Item übergeben wir den Node and "node", damit wird uns der Link erzeugt. Und mit item.label erhalten wir Zugriff auf den Titel der Seite. Als nächstes legen wir innerhalb des "li" eine weitere ungeordnete Liste an und iterieren auch hier ebenfalls mit "for" über die Kindelemente des aktuellen Items. Auch darin verlinken wir dann die Kindelemente. Im "else"-Teil werden alle Elemente ausgegeben aus dem Items-Array, welche keine Kindelemente haben. Wir erinnern uns an die Prüfung hier in Zeile fünf. Nun müssen wir die Standard.html noch etwas erweitern. Wir müssen den "parts.hauptmenue" -Teil noch hier einfügen. Da wir unser Menü erst einmal schemenhaft anlegen, füge ich das ganze im Contentbereich ein, um zu überprüfen, ob unsere Ausgabe korrekt ist. Damit haben wir alle notwendigen Vorkehrungen getroffen und wenn wir nun die Seite neu laden, sehen wir unsere schemenhafte Menüführung. "Über mich", "Reisen", wenn wir uns mal einen dieser Links in einem neuen Tab öffnen, landen wir, wir sehen es am Titel-Tag, auch tatsächlich auf dieser Seite. Damit das ganze jetzt noch etwas hübsch aussieht, ersetzen wir in der "Hauptmenue.html" den Inhalt durch das vollständig gestylte Markup. Sie finden das HTML in den Projektdateien und wir platzieren das Menü noch an der richtigen Stelle. Ich schneide also den "parts.hauptmenue"-Teil aus der Vorlage aus und ersetze mein Template hier durch die Einbindung der Variablen. Wenn wir nun die Seite neu laden beziehungsweise es öffnen, sollte unsere Menüführung voll funktionsfähig sein. Klicke ich auf "Länder", lande ich entsprechend auf der Länderseite Wähle ich eine der Unterseiten, lande ich entsprechend auf den Unterseiten. Gehen wir also nochmal in Kurzform die einzelnen Schritte durch: Zunächst müssen wir ein Menüobjekt anlegen, wir müssen einen Template-Pfad angeben, aus dem das Menü-Markup geladen wird. Wir legen ein Einstiegslevel fest, in unserem Fall die erste Ebene, eine maximale Tiefe, hier zwei Ebenen. Wir müssen das Objekt an die Seite übergeben für die Front-End Ausgabe. In der angegebenen Datei notieren wir das Markup. In "items" erhalten wir Zugriff auf alle Menüelemente. Wir iterieren über dieses Array und bauen uns entsprechend die Menüführung auf. Nicht vergessen die Variable auch dann im Haupt-Template zu notieren in der "body section", da wir ja auch unser Hauptmenü unter "parts", "body" abgelegt haben.

TYPO3 Neos Grundkurs

Entdecken Sie die Konzepte und grundlegenden Technologien des modernen Content Management Systems und sehen Sie, wie Sie eigene Projekte starten.

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!