TYPO3: Menüs Mit Typoscript

11.195 Aufrufe

Veröffentlicht am

Menüs mit TypoScript erstellen auf TYPO3-Webseiten. Grundlagen.

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
11.195
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
556
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

TYPO3: Menüs Mit Typoscript

  1. 1. Menüs mit TypoScript
  2. 2. Anforderungen <ul><li>Dynamische Änderungen </li></ul><ul><ul><li>Geänderte Seitentitel automatisch im Menü </li></ul></ul><ul><ul><li>Gelöschte und versteckte Seiten automatisch ausgeblendet </li></ul></ul><ul><ul><li>Seiten abhängig von der Berechtigung des Users </li></ul></ul><ul><li>Sauberer HTML-Code </li></ul><ul><ul><li>Darstellung i.d.R. als ungeordnete Liste </li></ul></ul><ul><ul><li>Beliebiger HTML-Code möglich </li></ul></ul><ul><ul><li>Darstellung beliebig vieler Elemente </li></ul></ul><ul><ul><li>Flexibilität </li></ul></ul>
  3. 3. Einfaches Menue <ul><li># Menü wird definiert </li></ul><ul><li># HMENU => hierarchisches Menü, es kann mehrere Ebenen geben </li></ul><ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li># Erste Ebene soll ein Textmenü sein </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li># Der normale Zustand soll angezeigt werden </li></ul><ul><li>NO = 1 </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  4. 4. Menue als ungeordnete Liste <ul><li># Menü wird definiert </li></ul><ul><li># HMENU => hierarchisches Menü, es kann mehrere Ebenen geben </li></ul><ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li># Erste Ebene soll ein Textmenü sein </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li># Der normale Zustand soll angezeigt werden </li></ul><ul><li>NO = 1 </li></ul><ul><li># als Listenelement wrappen </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li>} </li></ul><ul><li># Ganz außenrum ein <ul> </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  5. 5. Menue als ungeordnete Liste <ul><li>Ergebnis: </li></ul>
  6. 6. Den aktiven Menuepunkt hervorheben <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li># Der aktive Menübutton soll eine id &quot;act&quot; bekommen </li></ul><ul><li># Aktiven Zustand einschalten </li></ul><ul><li>ACT = 1 </li></ul><ul><li># Der aktive Zustand erhält einen anderen Wrap </li></ul><ul><li>ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  7. 7. Den aktiven Menuepunkt hervorheben <ul><li>Ergebnis: </li></ul>
  8. 8. Vereinfachung des Codes <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li># Für ACT die gleichen Einstellungen verwenden wie </li></ul><ul><li># für NO </li></ul><ul><li>ACT < .NO </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  9. 9. Title im A-Tag setzen <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li># Title für den A-Tag setzen </li></ul><ul><li>NO.ATagTitle.field = abstract // nav_title // title </li></ul><ul><li># Für ACT die gleichen Einstellungen verwenden wie für NO </li></ul><ul><li># überschreiben von wrapItemAndSub </li></ul><ul><li>ACT < .NO </li></ul><ul><li>ACT.wrapItemAndSub = <li id=&quot;act&quot;>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  10. 10. Title im A-Tag setzen <ul><li>Ergebnis: </li></ul>
  11. 11. Verschiedene Zustaende von Menuepunkten <ul><li>NO Standardzustand </li></ul><ul><li>CUR dieser Menüpunkt wird gerade angezeigt </li></ul><ul><li>ACT dieser Menüpunkt liegt innerhalb der aktuellen Rootline </li></ul><ul><li>IFSUB / ACTIFSUB / CURIFSUB dieser Menüpunkt hat Unterpunkte </li></ul><ul><li>Weitere Zustände sind in der TSRef zu finden: </li></ul><ul><li>http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2531260 </li></ul>
  12. 12. Option-Split <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li># Bestimmte Elemente anders formatieren </li></ul><ul><li># Bereiche sind durch |*| getrennt </li></ul><ul><li># Beginn, Mitte, Ende </li></ul><ul><li>NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> |*| <li>|</li> |*| <li class=&quot;last&quot;>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  13. 13. Option-Split <ul><li>Ergebnis: </li></ul>
  14. 14. Option-Split II <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li># Bestimmte Elemente anders formatieren </li></ul><ul><li># Bereiche sind durch || einzeln voneinander getrennt </li></ul><ul><li>NO.wrapItemAndSub = <li class=&quot;first&quot;>|</li> || </li></ul><ul><li><li class=&quot;second&quot;>|</li> || </li></ul><ul><li><li class=&quot;third&quot;>|</li> || </li></ul><ul><li><li class=&quot;fourth&quot;>|</li> || </li></ul><ul><li><li class=&quot;fifth&quot;>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  15. 15. Option-Split II <ul><li>Ergebnis: </li></ul>
  16. 16. Eine zweite Menuebene <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li>} </li></ul><ul><li># Zweite Menüebene mit allen Eigenschaften wie die erste </li></ul><ul><li>2 < .1 </li></ul><ul><li># Braucht nochmal ein ul als Wrap, sobald Unterpunkte </li></ul><ul><li># vorhanden sind </li></ul><ul><li>2.stdWrap.wrap = <ul>|</ul> </li></ul><ul><li>2.stdWrap.required = 1 </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  17. 17. Eine zweite Menuebene <ul><li>Ergebnis: </li></ul>
  18. 18. Weitere Informationen <ul><li>TMENU </li></ul><ul><li>Eigenschaften für ganze Menüebenen </li></ul><ul><li>http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828 </li></ul><ul><li>TMENUITEM </li></ul><ul><li>Eigenschaften für einzelne Menüpunkte </li></ul><ul><li>http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.3.0/view/1/9/#id2533828 </li></ul>
  19. 19. Besonderheiten: Definierter Startpunkt <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li># Menü ab einem bestimmten Startpunkt </li></ul><ul><li># z.B. bei Footer- oder Service-Navigationen häufig eingesetzt </li></ul><ul><li>special = directory </li></ul><ul><li>special.value = {$topnavStartingPoint} </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  20. 20. Besonderheiten: Erst ab X. Ebene anzeigen <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li># Das Menü wird erst ab der ersten Ebene angezeigt </li></ul><ul><li>entryLevel = 1 </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO.wrapItemAndSub = <li>|</li> </li></ul><ul><li>} </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>} </li></ul>
  21. 21. Besonderheiten: Breadcrumb <ul><li>temp.topnav = HMENU </li></ul><ul><li>temp.topnav { </li></ul><ul><li># typ &quot;rootline&quot; zeigt den Pfad von der aktuellen Seite bis </li></ul><ul><li># zur Root-Seite an </li></ul><ul><li>special = rootline </li></ul><ul><li># 1. bis 8. Ebene </li></ul><ul><li>special.range = 1 | 8 </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>NO = 1 </li></ul><ul><li># Durch Pfeile (&raquo;) voneinander getrennt </li></ul><ul><li># Mit Option Split erreichen wir, dass nach dem letzten </li></ul><ul><li># Menüpunkt kein Pfeil mehr kommt </li></ul><ul><li>NO.wrapItemAndSub = |&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*| </li></ul><ul><li>|&nbsp;&nbsp;&raquo;&nbsp;&nbsp; |*| | </li></ul><ul><li>} </li></ul><ul><li>wrap = <div id=&quot;breadcrumb&quot;>|</div> </li></ul><ul><li>} </li></ul>
  22. 22. Besonderheiten: Breadcrumb <ul><li>Ergebnis: </li></ul>
  23. 23. Graphische Menues: Das Ziel <ul><li>Unser Ziel: </li></ul><ul><li>HTML: </li></ul><ul><li><ul> </li></ul><ul><li><li> </li></ul><ul><li><a style=&quot;width: 123px; background-image: url(…);&quot;> </li></ul><ul><li>Menüpunkt1 </li></ul><ul><li></a> </li></ul><ul><li></li> </li></ul><ul><li></ul> </li></ul><ul><li>CSS: </li></ul><ul><li>ul li a { </li></ul><ul><li>display: block; </li></ul><ul><li>text-indent: -999em; </li></ul><ul><li>} </li></ul>
  24. 24. Graphische Menues: Das Grundgeruest <ul><li>temp.navigation = HMENU </li></ul><ul><li>temp.navigation { </li></ul><ul><li>1 = TMENU </li></ul><ul><li>1 { </li></ul><ul><li>wrap = <ul>|</ul> </li></ul><ul><li>NO = 1 </li></ul><ul><li>NO { </li></ul><ul><li> wrapItemAndSub = <li>|</li> </li></ul><ul><li> ATagParams.cObject = IMG_RESOURCE </li></ul><ul><li>ATagParams.cObject { </li></ul><ul><li># Hierhin das Kernstück: Das Zusammenbauen </li></ul><ul><li># der Grafik, siehe Folge-Seite </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>stdWrap.wrap = <div id=&quot;navigation&quot;>|</div> </li></ul><ul><li>} </li></ul>
  25. 25. Graphische Menues: Das Kernstueck <ul><li>file = GIFBUILDER </li></ul><ul><li>file { </li></ul><ul><li>format = png </li></ul><ul><li>XY = [20.w]+20,50 </li></ul><ul><li>20 = TEXT </li></ul><ul><li>20 { </li></ul><ul><li>text.field = title </li></ul><ul><li>fontSize = 20 </li></ul><ul><li>fontFile = fileadmin/templates/fonts/arioso.ttf </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li># in {TSFE:lastImgResourceInfo|0}px sind alle Daten des zuletzt </li></ul><ul><li># erstellten Bildes verfügbar, also auch die Breite </li></ul><ul><li>stdWrap.dataWrap ( </li></ul><ul><li>style=&quot;display: block; text-indent: -999em; width: {TSFE:lastImgResourceInfo|0}px ; background-image: url('/|');&quot; </li></ul><ul><li>) </li></ul>
  26. 26. Graphische Menues: Details <ul><li>Details hierzu in Kasper's Podcast: </li></ul><ul><li>Tips'n'Tricks: ttmenu vom 9. Sep 2008 </li></ul><ul><li>http://typo3.org/podcasts/kasper/ </li></ul><ul><li>?tx_podkast_pi1[pointer]=3&cHash=42a1755d2d </li></ul>
  27. 27. In2 code. Vielen Dank www.in2code.de Stefan Busemann Tina Gasteiger Alex Kellner

×