TypoScript: Eine Einführung – Teil 3

In dem ersten Artikel dieser Serie haben wir und mit dem prinzipiellen Aufbau von TypoScript beschäftig. In dem darauf folgenden zweiten Teil haben wir uns angeschaut, wie wie den Inhalt aus der Datenbank auslesen und darstellen können.

In dem Teil 3 geht es nun darum, Menüs mit TYPO3 zu erzeugen.

Erstellt ein Redakteur eine neue Seite in der Redaktionsoberfläche, so sorgt TYPO3 (genauer: TypoScript) dafür, das ein neuer Menüpunkt an der richtigen Stelle erzeugt wird.

Wenn wir ein Menü erzeugen wollen so benötigen wir als erstes ein Objekt dem wir die Klasse “HMENU” zuweisen.

1 lib.meinMenu = HMENU

Als nächstes bestimmen wir, wie Menüpunkte der ersten Ebene aussehen sollen. Dazu können wir die Eigenschaft “Zähler” (1 / 2 / 3 / …) der Klasse “HMENU” benutzen

1 lib.meinMenu = HMENU
2 lib.meinMenu.1 =

Die Zahl 1 in dem Objektpfad “lib.meinMenu.1” ist dabei nicht beliebig, sondern legt fest, dass hier ein Menü der 1. Ebene definiert wird!

Doch wie soll das Menü aussehen? TYPO3 kennt unterschiedliche Menütypen. Es gibt z.B. ein reines Textmenü oder ein grafisches Menü. Der Einfachheit halber wollen wir erstmal ein einfaches Textmenü erstellen. Dazu weisen wir unserem Objektpfad “lib.meinMenu.1″ die Klasse “TMENU” zu.

1 lib.meinMenu = HMENU
2 lib.meinMenu.1 = TMENU

TypoScript kann für unterschiedliche Menüstati unterschiedliche Konfigurationen vorsehen. Doch was sind Menüstati? Nun ja, da gibt es als erstes den so genannte normalen Status (“NO”). Ein Menüpunkt steht da und wartet darauf angeklickt zu werden. Dann gibt es weitere Stati, wie z.B. Aktiv (“ACT”). Dieser Menüpunkt ist gerade angeklickt worden. Wir wollen erstmal den Normal-Status definieren.

1 lib.meinMenu = HMENU
2 lib.meinMenu.1 = TMENU
3 lib.meinMenu.1.NO = 1

In Zeile drei wird also definiert, dass wir den Normal-Status aktivieren wollen.

Grundsätzlich sind wir damit mit dem Menü schon durch! Im nächsten Schritt können wir das Menü nun “stylebar” machen. Die meisten Menüs bestehen aus eine unnummerierten Liste mit den HTML-Tags <ul> und <li>. Wir müssen also dafür sorgen, dass um das ganze Menü ein <ul> geschrieben wird und das um jeden einzelnen Menüpunkt ein <li> geschrieben wird.

1 lib.meinMenu = HMENU
2 lib.meinMenu.wrap = <ul> | </ul>
3 lib.meinMenu.1 = TMENU
4 lib.meinMenu.1.NO = 1
5 lib.meinMenu.1.NO.wrapItemAndSub = <li> | </li>

Was passiert hier?

In Zeile 2 benutzen wir die Eigenschaft “wrap”. Wir schauen uns das Verfahren “wrap” in einem späteren Artikel noch genauer an. Hier nur so viel: “Wrap” bedeutet “umfassen” und genau das haben wir hier vor. Wir wollen das Menü (das Objekt “lib.meinMenu”) von einem <ul> umfassen lassen.

In Zeile 5 sorgen wir dafür, dass die einzelnen Menüpunkte (“lib.meinMenu.1.NO”) von einem <li> umfasst werden.

Für Beispiele, wie weitere Menüs aussehen können, möchte ich hier auf das Dokument “TypoScript by Example” hinweisen.

Damit ist der dritte Teil der Einführung beendet. Im nächsten Teil beschäftigen wir uns mit dem Thema “stdWrap”.

Popularity: 6%