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:28] 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> | ||
+ | |||
+ | # 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> | <code typoscript> | ||
# create PAGE-Objekt | # create PAGE-Objekt | ||
#################### | #################### | ||
page = PAGE | page = PAGE | ||
+ | |||
#CSS einbinden | #CSS einbinden | ||
Zeile 40: | Zeile 98: | ||
file2 = fileadmin/templates/[name]/stylefile2.css | file2 = fileadmin/templates/[name]/stylefile2.css | ||
} | } | ||
- | |||
- | #Icon einbinden | ||
- | page.headerData.1 = TEXT | ||
- | page.headerData.1.value = <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | ||
- | page.headerData.2 = TEXT | ||
- | page.headerData.2.value = <link rel="icon" type="image/x-icon" href="favicon.ico" /> | ||
#Meta-Tags einbinden | #Meta-Tags einbinden | ||
Zeile 57: | 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 99: | Zeile 127: | ||
} | } | ||
- | # drittes level | + | # second level |
- | | + | |
2 = TMENU | 2 = TMENU | ||
2.wrap = <ul>|</ul> | 2.wrap = <ul>|</ul> | ||
Zeile 142: | 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> | ||
+ | |||
+ | ===== 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.