Erstellung von Templates in Typo3
Besonders Anfänger wundern sich, dass sie erfolgreich Typo3 installieren konnten, im Frontend jedoch nichts angezeigt wird außer eine leere, weiße Seite. Das liegt daran, dass das Ergebnis im Frontend durch Templates gesteuert wird. Selbst wenn im Backend bereits Seiten und Inhalt angelegt wurden, wenn kein Template angelegt wurde, kann auch nichts angezeigt werden. Eine wichtige Aufgabe besteht daher darin, zumindest ein Template für die Seiten zu erstellen.
Ein Templatesatz besteht im Grunde aus drei Dingen:
- Eine HTML-Seite, auch HTML-Template genannt, inklusive Subparts, bzw. Marker
- Eine CSS-Datei
- Typoscript-Template
Mit dem HTML-Template und der CSS-Datei wird das Design des Grundgerüsts für die Ausgabe im Frontend festgelegt. Außerdem wird im HTML-Template durch sogenannte Subparts bzw. Marker definiert, an welchen Stellen die Inhalte von Typo3 eingefügt werden sollen. Das HTML-Template und die CSS-Datei liegen in der Regel im Ordner fileadmin. Das Typoscript-Template wird direkt in Typo3 erstellt und mit dem HTML-Template und der CSS-Datei verknüpft.
Beispiel
Ein HTML-Template template.html wird erstellt und im Ordner fileadmin gespeichert. Das HTML-Template könnte mit DIV-Container und CSS-Klassen formatiert werden, aus Vereinfachungsgründen wird vorerst darauf verzichtet. Daher enthält das HTML-Template nur folgende Marker:
<!-- ###DOKUMENT### begin -->
###MEINCONTENT###
<!-- ###DOKUMENT### end -->
Als nächstes wird in Typo3 das Typoscript-Template erstellt. Üblicherweise wird zuerst auf der Root-Seite das Haupttemplate gelegt. Das Template vererbt sich automatisch auf die Unterseiten. Sollte eine Unterseite anders sein, wird für die Unterseite ein Erweiterungstemplate mit den Änderungen angelegt.
Zum Erstellen des Typoscript-Templates wählt man das Modul Template, die Seite für die ein Template erstellt werden soll und klickt auf die Schaltfläche Template für neue Website erstellen.
Ein Template mit 6 Zeilen Typoscript-Code wird erstellt. Der Code muss mit dem eigenen Code ersetzt werden. Hierfür klickt man auf den Hyperlink Vollständigen Template-Datensatz bearbeiten.
Im Register Allgemein wird im Eingabefeld unter Setup der Typoscript-Code eingegeben. Hierfür löscht man zuerst die 6 Zeilen Code, die standardmäßig bei der Anlage eines Templates hinzugefügt werden und schreibt stattdessen folgenden Code rein:
page = PAGE
page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/template.html
page.10.workOnSubpart = DOKUMENT
page.10.marks.MEINCONTENT < styles.content.get
Im Register Enthält muss noch das statische Template CSS Styled Content hinzugefügt werden. Zum Schluss wird das Typoscript-Template gespeichert. Danach kann man auf der Seite Inhalte einfügen und im Frontend kontrollieren, ob die Inhalte angezeigt werden. Falls die Inhalte angezeigt werden, wurde das Template erfolgreich hergestellt, mit dem HTML-Template template.html und dem Marker MEINCONTENT verknüpft. Das Typoscript-Template kann noch erweitert werden, z.B. könnte man das Aussehen mit einer CSS-Datei verändern. Auch muss das Navigationsmenü für die Seite erstellt werden.
Erläuterung des HTML-Templates
Ein HTML-Template ist eine Vorlage, über den zusammen mit der CSS-Datei das Aussehen des Frontends bestimmt wird. Im HTML-Template werden die Bereiche, die von Typo3 ersetzt werden sollen, mit Subparts oder Marker gekennzeichnet.
Marker
Marker sind einfache Wörter, die links und rechts mit jeweils 3 Rautezeichen umschlossen werden, z.B. ###MENU###, ###CONTENT###, ###INHALT### etc. Die Namen können selbst definiert werden. Marker werden meistens großgeschrieben, das ist jedoch nicht zwingend notwendig. Alle Inhalte, die im HTML-Template dynamisch durch Typo3 gefüllt werden sollen, werden mit Markern ersetzt, z.B. das Menü, die Seiteninhalte etc.
Subparts
Mit Subparts werden Grenzen markiert, innerhalb derer die Bereiche durch Typo3 ersetzt werden. Wenn man Marker mit einem öffnenden und schließenden HTML-Kommentar versieht, werden daraus Subparts, wobei ein Subpart aus einem beginnenden und beendenden Subpart besteht, z.B. <!-- ###DOKUMENT### begin --> und <!-- ###DOKUMENT### end -->. Zwischen Beginn und Ende können normale Marker gesetzt werden, es muss jedoch mindestens ein Zeichen gesetzt werden. Der Beginn wird häufig direkt nach dem BODY-Tag eingefügt, das Ende vor dem schließenden BODY-Tag.
Erläuterung des Typoscripts
page = PAGE
Um ein Seitenobjekt zu erzeugen, wird die Variable page erzeugt und mit dem Typoscript-Objekttyp PAGE belegt.
page.10 = TEMPLATE
Für die Speicherposition 10 der Variable page wird der Typoscript-Objekttyp TEMPLATE zugewiesen.
page.10.template = FILE
Dem Template wird ein Typoscript-Objekttyp FILE zugewiesen.
page.10.template.file = fileadmin/template.html
In dieser Zeile wird angegeben, wo sich die HTML-Templatedatei befindet.
page.10.workOnSubpart = DOKUMENT
Mit dieser Anweisung wird Typo3 nur die Bereiche rendern, die sich innerhalb des Subparts DOKUMENT befinden.
page.10.marks.MEINCONTENT < styles.content.get
Damit wird dem Marker MEINCONTENT der Seiteninhalt aus der Hauptspalte (Normal) zugewiesen, damit es im Frontend angezeigt wird. Man könnte auch die Inhalte aus der linken oder rechten Spalte ausgeben. Hierfür definiert man im HTML-Template die Marker, z.B. CONTENTLINKS und CONTENTRECHTS. Im Typoscript-Template würde man folgende Anweisungen verwenden:
page.10.marks.CONTENTLINKS < styles.content.getLeft
page.10.marks.CONTENTRECHTS < styles.content.getRight
Vereinfachung des Typoscript-Codes
Damit man z.B. nicht in jede Zeile die Variable page angeben muss, kann man den Code auch vereinfacht eingeben.
page = PAGE
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/template.html
workOnSubpart = DOKUMENT
marks.MEINCONTENT < styles.content.get
}
Hierfür benutzt man geschweifte Klammern. Der Inhalt innerhalb der geschweiften Klammern wird dem Objekt (page.10) zugeordnet. Das Template ist natürlich nicht komplett, diese Anleitung sollte jedoch ausreichen um zu verstehen, wie die Erstellung von Templates grundsätzlich funktioniert.