Ein Typo3-Template kann auf mehreren Wegen erzeugt werden. Da ich mit Typo3 noch keine Erfahrungen gesammelt habe, hatte ich mich für den einfachsten Weg entschieden und die Templates über das entsprechende Modul zu definieren. Hierzu wird das Template in HTML und TypoScript definiert. Eine Programmierung ist nicht notwendig.
Um eine Seite zu anzuzeigen kann Typo3 einer HTML-Datei zum rendern verwenden. Da ich bereits HTML Vorlagen erzeugt habe, ist diese Funktion das Werkzeug erster Wahl. Eine HTML-Datei kann mit Typo3 spezifischen Platzhaltern versehen werden, so dass diese durch den eigentlichen Inhalt ersetzt werden können.
Die Typo3-Platzhalter beginnen und enden jeweils mit drei Rauten (### … ###). Zwischen den Rauten wird (ohne Leerzeichen) ein Bezeichner geschrieben, der dann in Typo3 verwendet werden kann, um den Platzhalter mit dem Inhalt zu ersetzen.
Außerdem ist es noch möglich, innerhalb der HTML-Datei Bereiche zu definieren. Diese werden als HTML-Kommentare angegeben (<!-- … -->). Innerhalb des Kommentars wird der Name des Bereichs angegeben. Dieser Name wird von 3-Rauten umschlossen. Anschließend an den Namen muss durch ein Leerzeichen getrennt das Wort “begin” für den Anfang oder “end” fürs Ende stehen.
Beispiel:
<!-- ###DOCUMENT_HEADER### begin -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link href="css/rstyles.css"
rel="stylesheet" type="text/css"/>
<!-- ###DOCUMENT_HEADER### end -->
Im Beispiel oben wird ein Bereich mit dem Namen DOCUMENT_HEADER definiert. Alles was sich zwischen den beiden Kommentaren befindet, kann über den Namen im TypoScript angesprochen werden. Innerhalb des Blocks können Platzhalter definiert werden, die dann in TypoScript durch Inhalt ersetzt werden können.
Mit diesem Wissen konnte ich die Vorlagen soweit anpassen, dass diese für Templates verwendet werden konnten.
Die einspaltige Vorlagendatei (onecol.html) habe ich wie folgt angepasst:
<!DOCTYPE html>
<html>
<head>
<title>woitaschik.com | ###titleMarker###</title>
<meta charset="UTF-8">
<!-- ###DOCUMENT_HEADER### begin -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/rstyles.css" rel="stylesheet" type="text/css"/>
<!-- ###DOCUMENT_HEADER### end -->
</head>
<body>
<!-- ###DOCUMENT_BODY### begin -->
<div class="outerFrame">
<div class="topArea">###MAIN_NAVIGATION###</div>
<div class="themeArea ###THEME_CLASS###">
<h1>###DOCUMENT_TITLE###</h1>
</div>
<div class="contentArea">###CONTENT###</div>
<div class="footerArea"><sub>###COPYRIGHT_INFO###</sub>
###STATIC_NAVIGATION###</div>
</div>
<!-- ###DOCUMENT_BODY### end -->
</body>
</html>
Im Grunde besteht die Vorlage aus 2 Bereichen sowie einer Menge von Platzhaltern. Die zweispaltige Vorlage habe ich identisch zu der einspaltigen erzeugt, diese hat aber einen zusätzlichen Platzhalter, der für die Sub-Navigation Verwendung findet.
Nachfolgend der Body der zweispaltigen Vorlagendatei (twocol.html). Dieser unterscheidet sich nur im Content-Bereich.
<div class="contentArea noPadding">
<div class="leftArea">###SUB_NAVIGATION### </div>
<div class="rightArea">###CONTENT###</div>
</div>
Das war’s! Die Vorlagen waren vorbereitet und ich konnte mit der Arbeit in Typo3 loslegen.
Die beiden so präparierten HTML Dateien habe ich in dem Verzeichnis fileadmin/templates/main gespeichert. Beim Googeln wurde mir oft dieser Ablageort empfohlen. Die CSS und Bilddateien habe ich in das Root-Verzeichnis des Servers abgelegt.