Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 CMS 6.2 Grundkurs

Erstes Menü anlegen (HMENU)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie, wie sich mit ein paar kleinen Schritten eine erste, einfache Menüführung erstellen lässt.

Transkript

Damit wir über unsere Website navigieren können, benötigen wir eine Menüführung. Auch hierfür gibt es in TypoScript ein Objekt, das sogenannte HMENU. Wir werden uns ansehen, wie wir mit dem HMENU zum einen die Home-Site und zum anderen Unterseiten von der Home-Site gesammelt in einem COA als Menüführung ausgeben können. Beginnen wir mit dem Anlegen von Seiten, damit wir unser Menü überhaupt befüllen können. Dazu verwenden wir das Modul Funktionen, wählen die Seite Home, und bei Assistenten wählen die Option Mehrere Seiten erzeugen. Hier tragen wir ein paar exemplarische Seiten ein. Eine Seite Über uns. Eine Seite Referenzen. Eine Seite Projekte. Und eine Seite Kontakt. Die Bezeichnungen können Sie auch gern abändern, sie sollen nur exemplarisch dienen. Wir klicken auf Seiten anlegen und die Seiten erscheinen unterhalb der Seite Home. Ich wechsle zurück in das Template-Modul und bearbeite den Setup-Bereich. Zunächst erstellen wir ein neues Objekt für unsere Menüführung. Das benenne ich wie folgt: obj.menu = HMENU. Das HMENU, das hierarchische Menü, gibt uns die Art und Weise des Menüs vor. Wir lassen es auf Standard. Das heißt, das Menü steigt in der Ebene unterhalb der Home-Site ein. Was das bedeutet werden wir gleich sehen, wenn wir etwas config eingeschleust haben. Zunächst benötigen wir einen wrap, wir wollen eine unordered list verwenden für unsere Menüführung. Mit wrap umschließen wir die Menüpunkte mit dem ul-Tag. Als Nächstes definieren wir die erste Ebene der Menüführung, und zwar als TMENU. Wenn Sie ein wenig googeln, werden Sie hier noch eine weitere Variante finden, das GMENU, das Graphical Menu. In der Praxis hat sich aber wohl das TMENU durchgesetzt. Das GMENU so gut wie nie verwendet. Hier definieren wir die Zustände der Menüführung. Es gibt den Normal-Zustand. Es gibt den Active-Zustand. Und den Current-Zustand. Der Normal-Zustand herrscht immer dann vor, wenn die Seite gerade nicht angeklickt wurde oder Sie sich nicht auf einer Unterseite befinden. Der Active-Zustand herrscht dann vor, wenn Sie sich auf einer Unterseite befinden. Der Current-Zustand herrscht dann vor, wenn Sie eine Seite angeklickt haben. Was das genau bedeutet, sehen wir uns auch gleich an. Wir fügen auch hier etwas config ein, damit wir die Zustände im Frontend auseinanderhalten können. Wir wollen um die ATags, die uns generiert werden, eine li legen. Für den Normal-Zustand vergeben wir keine Klasse. Für den Active-Zustand vergeben wir die Klasse active. Das Pipe-Symbol, das der Platzhalter ist, an dem dann das ATag eingefügt wird. Und für CUR machen wir genau das Gleiche. Nur dass wir hier dann die Klasse current vergeben und nicht die Klasse active. Zu guter Letzt weisen wir das Objekt noch der Page zu. Dies machen wir an der Stelle 5. Mit dem Kopieren-Operator rufen wir obj.menu auf. Speichern das Template. Löschen vorsichtshalber mal den Cache. Und rufen uns die Seite im Frontend auf. Wir erhalten nun die Unterseiten der Seite Home, wie versprochen. Und wenn wir uns mit Firebug mal den Text näher anschauen, sehen wir, dass sich alle Menüpunkt aktuell im Normal-Zustand befinden. Klar, wir befinden uns auf der Seite Home, zu erkennen in der Adressleiste an der id=1. Klicke ich nun beispielsweise auf Referenzen, befinden wir uns auf der Seite Referenzen. Wir können es auch oben am Seitentitel erkennen. Und das li dieses Menüpunkts hat nun den Eintrag current. Da wir aktuell noch keine Untermenüpunkte haben, können wir den Zustand active nicht aufrufen. Jetzt fehlt uns noch die Seite Home in unserer Menüführung. Wir haben aktuell nicht die Chance, auf die Seite Home zu kommen. Dafür müssen wir unser obj.menu etwas anpassen. Wir bauen nun unser Menü etwas um. Ohne gesonderte Angabe wird immer die Ebene unterhalb der Root-Site ausgegeben. Wollen wir die Seite Home ausgeben, besteht die Möglichkeit, mit special = list das Menü zu einem Spezialmenü zu definieren. Mit special.value können wir eine Liste an IDs übergeben. Trage ich hier die 1 ein, steht das für die Seite Home. Wenn wir nun speichern, die Seite im Frontend neu laden, sehen wir in der Menüführung nur noch die Seite Home. Jetzt fehlen uns die anderen Menüpunkte. Es bietet sich an der Stelle an, aus unserem obj.menu ein Content Object Array zu machen und zwei HMENUs dort anzulegen. Das erste HMENU gibt uns die Seite Home aus, das zweite HMENU die Unterseiten der Seite Home. Das machen wir nun auch. Ich ändere also hier den Typ auf COA, füge ein Unterelement 10 ein. In dieses Unterelement 10 werden wir gleich die Einstellungen einfügen. 10 müssen wir vorher noch eben zum HMENU definieren. Nehmen alle Einstellungen, fügen die hier ein. Die Einrückungen sauber setzen, damit wir auch sofort erkennen können, in welcher Ebene der Konfiguration wir uns befinden. Und jetzt brauchen wir noch ein zweites Menü an der Stelle 20. Auch das ist ein HMENU. Und hier machen wir es uns einfach: Wir brauchen auch dort wieder die erste Menüebene in dem HMENU, also ein TMENU. Aber wir übernehmen alle Einstellungen aus dem Element 10 bis auf special = list, special.value. Also kopieren wir mit dem Kopieren-Operator das Objekt 10.1 an die Stelle 20.1. Ist ein bisschen tricky, aber ich erläutere es nochmal. Also mit 20.1 sprechen wir die erste Menüebene an, das TMENU. Mit dem Kopieren-Operator gefolgt von .10.1 rufen wir im selben Objekt die Stelle 10 auf, .1. Kontrollieren wir die Angaben nochmal. Und wenn wir nun speichern, sollten wir im Frontend die komplette Menüführung sehen. Und tatsächlich, wir haben die Seite Home, Über uns, Referenzen, Projekte, Kontakt. Wir haben also nun unsere erste Menüführung erstellt. Fassen wir nochmal zusammen: Wir haben ein COA angelegt, um zwei Menüs dort abzulegen. Das erste Menü gibt uns nur die Seite Home aus, da die sich in einer anderen Ebene befindet, wir aber optisch die Menüpunkte alle in einer Ebene darstellen wollen. Im Objekt 20 haben wir ein weiteres HMENU, für das wir nur die Konfigurationen von special ausgelassen haben und direkt das TMENU an das TMENU von 20 kopiert haben. Nicht vergessen, das Objekt in der Page einzufügen. Und damit können Sie beliebig viele Seiten, die Sie im Seitenbaum anlegen, in Ihrer Menüführung unterbringen.

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!