Benutzer-Werkzeuge
software:typo3:templates
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen gezeigt.
| Both sides previous revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
software:typo3:templates [2012/10/08 09:30] khopf [Beispiel TypoScript-Layout-Setup] |
software:typo3:templates [2013/01/06 00:03] (aktuell) khopf [Beispiel TypoScript-Layout-Setup] Inkonsistenz |
||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== Einbinden von Templates in Typo3 ====== | + | ====== Typo3: Einbinden von Templates ====== |
| + | //<- Zurück zu [[software:typo3]]// | ||
| + | |||
| + | Typo3 ist ein sehr mächtiges CMS-System, das für sehr unterschiedliche Einsatzbereiche verwendbar ist, weshalb die Konfiguration manchmal recht kompliziert werden kann. Folgende Schritte sind für das Installieren eines Templates notwendig: | ||
| - (X)HTML / CSS Template mit Dummytexten erstellen mit Beachtung von Suchmaschinenfreundlichkeit und Barrierefreiheit | - (X)HTML / CSS Template mit Dummytexten erstellen mit Beachtung von Suchmaschinenfreundlichkeit und Barrierefreiheit | ||
| - HTML-Layout mit Layoutmarkern versehen | - HTML-Layout mit Layoutmarkern versehen | ||
| Zeile 30: | Zeile 33: | ||
| * Die Marker können entweder direkt im Dokument stehen oder in einer Kommentarumgebung, was außen herum im Kommentar steht ist nicht relevant. So ist ''<!-- ###MARKER### -->'' gleichbedeutend mit ''<!-- Toller ###MARKER### beginnt -->'' | * Die Marker können entweder direkt im Dokument stehen oder in einer Kommentarumgebung, was außen herum im Kommentar steht ist nicht relevant. So ist ''<!-- ###MARKER### -->'' gleichbedeutend mit ''<!-- Toller ###MARKER### beginnt -->'' | ||
| ===== Beispiel TypoScript-Layout-Setup ===== | ===== Beispiel TypoScript-Layout-Setup ===== | ||
| + | Generelle Einstellungen: | ||
| + | |||
| <code typoscript> | <code typoscript> | ||
| + | # general configuration | ||
| + | ####################### | ||
| + | config { | ||
| + | # Ausgabe von XHTML aktivieren | ||
| + | xhtml_cleaning = all | ||
| + | |||
| + | # set doctype to XHTML 1.0 strict | ||
| + | doctype = xhtml_strict | ||
| + | |||
| + | # set site language | ||
| + | language = de | ||
| + | |||
| + | # enable admin panel | ||
| + | admPanel = 1 | ||
| + | |||
| + | # Spam Protection | ||
| + | spamProtectEmailAddresses = 2 | ||
| + | spamProtectEmailAddresses_atSubst = (at) | ||
| + | |||
| + | index_enable = 1 | ||
| + | } | ||
| + | |||
| + | # format popup for pictures | ||
| + | tt_content.textpic.20{ | ||
| + | 1.imageLinkWrap = 1 | ||
| + | 1.imageLinkWrap { | ||
| + | enable = 1 | ||
| + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | ||
| + | wrap = <A href="javascript:close();"> | </A> | ||
| + | JSwindow = 1 | ||
| + | JSwindow.newWindow = 1 | ||
| + | JSwindow.expand = 0,0 | ||
| + | } | ||
| + | } | ||
| + | |||
| + | tt_content.image.20 { | ||
| + | 1.imageLinkWrap = 1 | ||
| + | 1.imageLinkWrap { | ||
| + | enable = 1 | ||
| + | bodyTag = <BODY bgColor=white leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> | ||
| + | wrap = <A href="javascript:close();"> | </A> | ||
| + | JSwindow = 1 | ||
| + | JSwindow.newWindow = 1 | ||
| + | JSwindow.expand = 0,0 | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | Das eigentliche Template: | ||
| + | |||
| + | <code typoscript> | ||
| # create PAGE-Objekt | # create PAGE-Objekt | ||
| #################### | #################### | ||
| page = PAGE | page = PAGE | ||
| + | |||
| #CSS einbinden | #CSS einbinden | ||
| Zeile 52: | Zeile 109: | ||
| #create unordered list menu | #create unordered list menu | ||
| + | | ||
| temp.TopMenu = HMENU | temp.TopMenu = HMENU | ||
| temp.TopMenu { | temp.TopMenu { | ||
| - | entryLevel = 0 | + | # first level |
| - | # erstes level | + | |
| - | 1 = TMENU | + | |
| - | 1.wrap = <ul>|</ul> | + | |
| - | 1{ | + | |
| - | # no state: normale Formatierung | + | |
| - | NO{ | + | |
| - | wrapItemAndSub = <li> | </li> | + | |
| - | } | + | |
| - | # act state: gültig von der rootseite bis zur aktuellen Seite | + | |
| - | ACT = 1 | + | |
| - | ACT { | + | |
| - | wrapItemAndSub = <li class="act"> | </li> | + | |
| - | } | + | |
| - | # cur state: gültig für die aktuelle Seite | + | |
| - | CUR=1 | + | |
| - | CUR{ | + | |
| - | wrapItemAndSub = <li class="act"> | </li> | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | + | ||
| - | temp.LeftMenu = HMENU | + | |
| - | temp.LeftMenu { | + | |
| - | entryLevel = 1 | + | |
| - | # zweites level | + | |
| 1 = TMENU | 1 = TMENU | ||
| 1.wrap = <ul>|</ul> | 1.wrap = <ul>|</ul> | ||
| Zeile 94: | Zeile 127: | ||
| } | } | ||
| - | # drittes level | + | # second level |
| - | | + | |
| 2 = TMENU | 2 = TMENU | ||
| 2.wrap = <ul>|</ul> | 2.wrap = <ul>|</ul> | ||
| Zeile 137: | Zeile 169: | ||
| subparts.CONTENT < styles.content.get | subparts.CONTENT < styles.content.get | ||
| subparts.MENUE1 < temp.TopMenu | subparts.MENUE1 < temp.TopMenu | ||
| - | subparts.MENUE2 < temp.LeftMenu | ||
| subparts.COPYRIGHT < temp.copyright | subparts.COPYRIGHT < temp.copyright | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | ===== Erweiterungen für Basis-TypoScript ===== | ||
| + | * [[software:typo3:favicon]] | ||
| + | * [[software:typo3:menue]] | ||
| + | * [[software:typo3:tt_news]] | ||
| + | |||
| + | |||
| + | {{tag>typo3 template}} | ||
Bei Verwendung dieses Wikis erklären Sie sich mit dem Haftungsausschluss, Nutzungsbedingungen und der Datenschutzerklärung dieses Wikis einverstanden. Impressum.
software/typo3/templates.1349681409.txt.gz · Zuletzt geändert: 2012/10/11 10:23 (Externe Bearbeitung)
Seiten-Werkzeuge
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
