Dies ist ein Tutorial für ein einfaches TYPO3 Menü des Typs TMENU. Dies ist sehr gut geeignet für TYPO3 Anfänger. Keine Angst, es ist ganz einfach.
Dann will ich nicht lange quatschen und komme gleich zu ein paar wichtigen Befehlen mit denen du eine erste TYPO3 Navigation erstellen kannst. Um dein Menü umsetzen zu können, werden wir ein paar Zeilen in der eigenen System-Skriptsprache Typoscript schreiben.
Seiten im Backend anlegen
Als erstes musst du natürlich einige Seiten im TYPO3 Backend anlegen, damit du später das Resultat im Frontend siehst.
Typoscript Template anlegen
Nun kann es weitergehen, im Backend musst du nun noch ein Typoscript Template anlegen.
- In der Navigation „Template“ auswählen
- Dann die Startseite der Webseite hier „Home“ auswählen
- Zum Schluss noch auf den Button „Create template for a new site“ klicken
Typoscript im Template einfügen
Dieses Skript fügst du nun in das eben erstellte Template ein. Dazu klickst du einfach auf den Setup-Bearbeitungsfeld-Button. (1)
Nun musst du nur noch das komplette Skript kopieren und einfügen.
lib.navi = HMENU
lib.navi {
entryLevel = 1
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
ACT = 1
ACT{
wrapItemAndSub = <li class="aktiv">|</li>
}
}
2 < .1
}
Füllung des ###MENU### Markers
Damit TYPO3 weiß an welcher Stelle das Menü in euerem HTML Template eingebunden werden soll, müsst ihr in eure HTML Template Datei noch einen Marker erstellen, zum Beispiel so ###MENU###.
Im Typoscript muss noch folgendes ergänzt werden um den HTML-Template-Marker ###MENU### mit dem Inhalt von lib.navi zu befüllen.
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/test.tmpl
marks {
MENU < lib.navi
}
}
Video-Tutorial – TYPO3 Menü
Erklärung der einzelnen Menübefehle
HMENU
Der Befehl „HMENU“ sagt unserem TYPO3-System, dass nun ein Menü erstellt werden sollen. In diesem Bereich kannst du anschließend globale Einstellungen vornehmen.
entryLevel
Den Befehl „entryLevel“ musst du je nach deinem Seitenaufbau (Backend) anpassen. Dieser Befehl steht für das Einstiegslevel, ab dem das Menü gerendert werden soll.
TMENU
Der Befehl „TMENU“ definiert als nächstes genauer was für ein Typ das Menü sein sollen. TMENU steht für ein Textmenü – es gibt auch GMENU was zum Beispiel ein Menü wäre welches aus Bildern erstellt wird.
Du sollest meiner Meinung auf Menüs des Typs GMENU verzichten, da es in Zeiten von Webfonts einfach bessere Lösungen vorhanden sind. Früher hat man diesen Typ benutzt um bestimmte Hausschriften deiner Firma darstellen zu können.
wrap
Der Befehl wrap umschließt den Inhalt, den du um die Pipe (|) herumschreibst. Der Inhalt, der in den Bereich der Pipe kommt wird nun definiert.
NO
Der Befehl NO steht für den Menü Normalzustand. Diesen musst du mit NO = 1 auf aktiv stellen (Dies gilt auch für alle weiteren Menüzustände)
wrapItemAndSub
Hier wird jeder Link zur der Seite mit den Elementen um die Pipe umschlossen. So ähnlich wie beim wrap.
Beispiel:
Du schreibst im Typoscript:
wrapItemAndSub = <ul><li>|</li></ul>
Ergebnis wäre dann:
<ul> <li><a href="deinlink.html">test</a></li> </ul>
ACT
Der Befehl ACT steht für einen Aktivenzustand, sobald du dich auf einer Seite befindest, bekommst diese Seite in deinem Menü deinen zuvor definieren Zustand, in diesem Beispiel eine Klasse.
2 < .1
Mit dem Befehl 2 < .1 werden alle Konfigurationen, die du in der ersten Ebene geschrieben hast (1 = TMENU) auf die nächst tiefere Ebene vererbt. (2= TMENU)
Das bedeutet du könntest auch den kompletten Teil von (1=TMENU ) anstelle des 2 <.1 schreiben, du musst nur beachten, dass du dann mit (2=TMENU) beginnst, sonst überschreibst du alle deine Einstellungen.
Weiterführende Links
Die Typoscript Referenz listet dir alle weiteren Befehle auf, falls du bestimmte Einstellungen und Funktionen benötigst.
Hallo Felix,
alles in allem nicht schlecht. Für mich als Anfänger stellt sich hier aber die Frage, wie ich nun dein „navi“ in meinen Platzhalter ###NAVI### bekomme.
Klingt vielleicht blöd, aber ich bin völlig jungfräulich was Typo betrifft.
Ich versuche mich gerade an Typo 6.1.
Vielleicht könntest du mir das noch beantworten.
Vielen Dank.
Hey,
klar kann ich es versuchen.
Benutzt du Templavoila?
Falls nicht könnte dies die Lösung sein.
Du hast in deinem HTML-Template einen Marker erstellt z.B. ###NAVI###.
Dies kommt in dein Typoscript, das Menüskript von oben musst du auch noch mit einbinden.
Unter template.file wird dein HTML Template eingelesen
Und im Bereich Marks wird dein Marker mit dem Skript befüllt.
page.10 = TEMPLATE page.10 { template = FILE template.file = fileadmin/test.tmpl marks { NAVI < lib.navi } }Nicht getestet 😉
lg Felix