Menüs erstellen mit TypoScript

Präsentation zum Thema: "Menüs erstellen mit TypoScript"—  Präsentation transkript:

1 Menüs erstellen mit TypoScript
In TYPO3 werden Menüs mittels TypoScript in den Templates definiert. Die Erstellung der Menüs übernimmt dann TYPO3 automatisch. Es macht dabei keinen Unterschied, ob es sich um ein grafisches oder ein Textmenü handelt.

2 Beispiel eines TYPO3-Menüs

3 Menügenerierung Ausgangsbasis für die Menügenerierung ist der Seitenbaum, der die Struktur der Website widerspiegelt. TypoScript übernimmt aus dem Seitenbaum die Hierarchie und die Namen der Seiten und fügt sie an den richtigen Stellen in die generierten Menüs ein.

4 Gestalt der Menüs Funktionsweise und Aussehen der Menüs können dabei über vielfältige Einstellungsmöglichkeiten in TypoScript beeinflusst werden. Soll eine Seite nicht in den Menüs aufscheinen, dann muss dies entweder über den Seitentyp gekennzeichnet werden, oder das Menüskript wird entsprechend angepasst.

5 Die drei wichtigsten Menüarten in TYPO3 sind:
Textmenüs Grafische Menüs Layer-/Aufklapp-Menüs

6 HMENU Das grundlegende Objekt für Menüskripte ist HMENU.
Der Name steht für “Hierarchisches Menü”. Das Objekt bildet die Hierarchieebenen des Seitenbaumes ab und definiert deren Eigenschaften.

7 Beispiel HMENU marks.NAVIGATION = HMENU marks.NAVIGATION.1 = TMENU
marks.NAVIGATION.1.NO { allWrap = <tr><td>|</td></tr> beforeImg = fileadmin/img/pfeilchengrau.gif beforeROImg = fileadmin/img/pfeilchengruen.gif RO = 1 }

8 Die fünf wichtigsten Zustände von Menüeinträgen:
Der normale Zustand eines Menüeintrages wird mit NO abgekürzt. Der Rollover Zustand wird mit RO abgekürzt. Er beschreibt das Aussehen des Menüeintrages, wenn sich der Mauszeiger darüber befindet. ACT ist die Abkürzung für den aktuellen Verlauf. Das sind der Menüeintrag, der aktuell ausgewählt ist, und die in der Hierachie über ihm liegenden Einträge (»Pfad zu Home«).

9 Die fünf wichtigsten Zustände von Menüeinträgen: (2)
CUR bezeichnet den Zustand der aktuellen Seite, im Gegensatz zu ACT jedoch nur die Seite selbst. IFSUB definiert das Aussehen eines Menüeintrages, wenn dieser mindestens eine Unterseite hat. Wenn sich weitere Menüeinträge unterhalb eines Eintrages befinden, dann kann dadurch die Darstellung abweichend definiert werden.

10 Fortsetzung Beispiel marks.NAVIGATION.1.ACT = 1
allWrap = <tr><td>|</td></tr> beforeImg = fileadmin/img/pfeilchenrot.gif } marks.NAVIGATION.2 = TMENU marks.NAVIGATION.2.NO { beforeROImg = fileadmin/img/pfeilchengruen.gif RO = 1

11 Die Eigenschaften des HMENU-Objektes:
entryLevel Gibt den Einstiegslevel für ein Menüobjekt an. Es ist dies die Ebene im Seitenbaum, ab der dieses Menü die Einträge darstellt. Wird diese Eigenschaft nicht gesetzt, dann hat sie den Standardwert 0: Die Wurzel des Seitenbaumes ist demnach die Einstiegsebene. Wird der entryLevel auf 1 gesetzt, dann stellt das Menüobjekt die Seiten der zweiten Ebene dar.

12 Eigenschaft special Normalerweise bildet ein Menüobjekt die Hierarchie des Seitenbaumes ab. Soll der Menüinhalt davon abweichen, dann kann dies durch Definition der special-Eigenschaft geschehen. Damit werden Menüs zu speziellen Seiten erzeugt. special kann die Werte directory, list, updated, rootline und keywords annehmen.

13 directory, list Mit directory kann ein Menü aufgebaut werden, das nur aus bestimmten Seiten besteht. Der Wert list unterscheidet sich von directory dadurch, dass das Menü von der unter special.value angegebenen Liste von Seiten gebildet wird, die Unterseiten jedoch nicht einbezogen werden.

14 Beispiel marks.MENU_UNTEN = HMENU marks.MENU_UNTEN.special = directory
marks.MENU_UNTEN.special.value = 8 marks.MENU_UNTEN.1 = TMENU marks.MENU_UNTEN.1.NO { before =   after =   | |*|   | |*|   }

15 updated Mit updated können Menüs der zuletzt geänderten Seiten automatisch erzeugt werden.

16 Beispiel marks.NEU.10 = HMENU marks.NEU.10.special = updated
marks.NEU.10.special.value = 2, 3 marks.NEU.10.special { mode = tstamp maxAge = 3600*24*3 limit = 5 }

17 rootline Der Wert rootline ist dafür vorgesehen, klickbare Pfadanzeigen zu erzeugen. (siehe Beispiel Cyberhouse-Seite)

18 Beispiel marks.PFAD = HMENU marks.PFAD { special = rootline
special.range = 0 | -1 1 = TMENU 1.NO.allWrap = |   /   |*| |   /   |*| | }

19 keyword keyword kann verwendet werden, um Seiten ins Menü einzubinden, die bestimmte Schlüsselwörter enthalten. Diese werden über .setKeywords gesetzt und können entweder als Liste angegeben werden, oder es wird eine Seite definiert, in der die Schlüsselwörter enthalten sind.

20 minItems, maxItems Mit minItems kann die Mindestanzahl der Menüeinträge bestimmt werden. Sind nicht genügend Seiten vorhanden, dann werden »…«-Einträge mit Links auf die aktuelle Seite erzeugt. Mit maxItems kann die Maximalanzahl der Menüeinträge festgelegt werden. Sind mehr Seiten vorhanden, dann werden sie bei der Menüerzeugung ignoriert.

21 Beispiel marks.MENU = HMENU marks.MENU.minItems = 6
marks.MENU.maxItems = 6 marks.MENU.1 = TMENU marks.MENU.1.wrap = <td class="fliesstext"> | </td> marks.MENU.1.NO { before =   after =   | |*|   | |*|   }

22 Weitere Eigenschaften von HMENU
ExcludeUidList In dieser Eigenschaft kann eine Liste von Seiten über die Seiten-ID angegeben werden, die nicht im Menü erscheinen sollen. begin Diese Eigenschaft bestimmt den ersten Menüeintrag. Mit begin = 4 werden die ersten drei Menüeinträge nicht angezeigt.

23 Textmenüs In den Beispielen im vorangegangenen Beispielen wurde das Objekt TMENU bereits an einigen Stellen verwendet. Es definiert ein Textmenü, das standardmäßig die Seitentitel als Menüeinträge aufnimmt.

24 Einfaches Beispiel seite.10 = HMENU seite.10.1 = TMENU
seite.10.1.NO.allWrap = | <BR>

25 Weiteres Beispiel seite.10 = HMENU seite.10.1 = TMENU seite.10.1 {
expAll = 1 NO.allWrap = <div class=”text”> | </div> } seite.10.2 = TMENU seite.10.2.NO { allWrap = <div class=”textklein”> | </div>

26 Eigenschaften von Textmenüs
allWrap umschließt den gesamten Menüeintrag. before gibt an, was vor dem Menüeintrag angezeigt werden soll. beforeImg bezeichnet eine Grafikdatei, die vor dem Menüeintrag angezeigt wird. Es ist besser, diese Eigenschaft zu verwenden, als die Grafik über ein <img>-Tag in der before-Eigenschaft einzubinden, da dann die automatischen Rollover-Funktionen verwendet werden können.

27 Eigenschaften von Textmenüs (2)
beforeROImg benennt die bei Rollover angezeigte Grafik. Dies funktioniert nur wenn, die RO-Eigenschaft auf 1 gesetzt wird. beforeWrap umschließt den before-Code. linkWrap umschließt das <A>-Tag der Menüeinträge. Mit AtagParams können zusätzliche Parameter zum Link-Tag angegeben werden. after ist analog zu before.

28 Beispiel mit mehreren Eigenschaften
seite.10 = HMENU seite.10.1 = TMENU seite.10.1 { NO.allWrap = <p> | </p> NO.beforeImg = fileadmin/img/pfeilchen.gif NO.AtagParams = style=none NO.after =   }

29 Abschlussbeispiel (1) marks.MENUE = HMENU marks.MENUE.1 = TMENU
NO { allWrap = <tr height="20"><td class="navi">|</td></tr> ATagParams=class="navi" } ACT = 1 ACT { allWrap = <tr height="20"><td class="navi_active">|</td></tr> ATagParams=class="navi_active"

30 Abschlussbeispiel (2) marks.MENUE.2 = TMENU marks.MENUE.2 { NO {
allWrap = <tr height="20"><td class="navi">|</td></tr> ATagParams=class="navi" beforeImg = fileadmin/img/pfeilchentrans.gif beforeROImg = fileadmin/img/pfeilchen.gif RO = 1 } ACT = 1 ACT { allWrap = <tr height="20"><td class="navi_active">|</td></tr> ATagParams=class="navi_active" beforeImg = fileadmin/img/pfeilchen.gif