Monatliches Archiv: Dezember 2012

Typo3 Template erstellen

In diesem Artikel möchte ich euch zeigen, wie man sich ein Typo3 Template erstellen kann. Ich möchte dabei auch auf jegliche Plugins und Erweiterungen bewusst verzichten. Da ich immer wieder gehört habe, dass viele Ihre Typo3-Templates mit TemplaVoila ausstatten, möchte ich zeigen, dass es auch viel einfacher ohne geht.
Ich gehe hier beim Typo3 Template erstellen einfach von folgender HTML-Struktur aus:

1
2
3
4
5
6
7
8
9
10
<body>
<div>
   <div id="navigation">
       Bereich für die Navigation
   </div>
   <div id="inhalt">
      Bereich für den Inhalt
   </div>
</div>
</body>

Damit wir aber nun unsere TypoScript Objekte auch den Markern im Typo3 Template zuordnen können, müssen wir auch im HTML-Code diese Marker einfügen. Dies würde wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<!-- ###DOCUMENT_BODY### begin-->
<div>
   <div id="navigation">
      <!-- ###navigation### begin-->
      <!-- ###navigation### end-->
   </div>
   <div id="inhalt">
      <!-- ###inhalt### begin-->
      <!-- ###inhalt### end-->
   </div>
</div>
<!-- ###DOCUMENT_BODY### end-->
</body>

Nun haben wir zwar die Marker im HTML eingefügt, wissen aber immer noch nicht, wie wir das Typo3 Template erstellen können. Dazu müssen wir den HTML-Code in eine Datei speichern. Damit ich alle Dateien zum Typo3 Template erstellen an einem Ort habe, lege ich mir folgende Struktur in dem Ordner fileadmin an.

/fileadmin/template/main/start.html
/fileadmin/template/main/default.html
/fileadmin/template/main/img/
/fileadmin/template/main/css/

Um das Typo3 Template erstellen zu können, müssen wir unseren HTML-Code nun in die Datei default.html legen. In der Datei start.html können wir später, sofern wir das wünschen, ein eigenes Typo3 Template erstellen für die Startseite.

Nun müssen wir nur noch die Inhalte vom Typo3 in das Template kommen. Dazu erstellen wir am besten im Typo3 mindestens eine Seite und dazu noch ein wenig Inhalt. Nun müssen wir noch ein Typoscript Template hinzufügen. In dieses sogenannte Root Template müssen wir nun folgenden TypoScript Code einfügen.

1
2
3
4
5
6
7
8
9
10
temp.navi = HMENU
# In temp.navi die Definition für die Navigation einfügen
page = PAGE
page.10= TEMPLATE
page.10 {
template = FILE
template.file = fileadmin/templates/main/default.html
subparts.navigation &lt; temp.navi
subparts.inhalt &lt; styles.content.get
}

Dieser Code variiert natürlich je nach Inhalt, der auf der Seite dargestellt werden soll.

Ich bin immer ein Fan von eigenen Templates und nicht von irgendwelchen gekauften. Daher auch dieser Artikel. Er soll eine Art Hilfestellung beim Typo3 Template erstellen sein.

Wie Ihr jetzt ein Typo3 Template erstellen könnt wisst Ihr ja nun, aber vielleicht habt Ihr ja auch ganz eigene Wünsche für meinen nächsten Post. Hinterlasst mir einfach ein Kommentar unten.