TYPO3 Template erstellen

In diesem Artikel gebe ich dir einen Überblick über die wichtigsten Schritte, die du beim Erstellen eines TYPO3-Templates beachten solltest. Dazu gehören unter anderem Kickstart einer Extension, etwas TypoScript und Fluid.

Außerdem gibt es Tipps und Tricks, mit denen du dein Template noch überzeugender gestalten kannst!

Schritt-für-Schritt-Anleitung

Der folgende Abschnitt beschreibt die Grundlagen für das Erstellen eines TYPO3 Templates. Ein TYPO3 Template besteht aus einer TYPO3 Erweiterung. Diese TYPO3 Erweiterung erstellt und konfiguriert das Standard PAGE - Objekt.

In diesem PAGE - Objekt werden alle Verzeichnisse der Templatedateien hinterlegt und auch den Namen der Templatedatei selber.

Kickstart einer TYPO3 Extension

Der Ausgangspunkt eines TYPO3 Templates ist eine TYPO3 Erweiterung. Diese kapselt alle notwendigen Dateien. Das sind alle Templatedateien und alle Resourcen wie CSS, JavaScript und Schriften.

Um eine TYPO3 Extension zu erstellen, installiert man am besten den Extension-Builder.

Zum Extension-Builder habe ich bereits mehrere Blogartikel und YouTube Videos erstellt. Schaue dir zum Beispiel folgenden Blogartikel und YouTube Video an, wenn du mit dem Extension-Builder noch nicht vertraut bist:

• Deine erste TYPO3 Extension programmieren
• TYPO3 11 Grundkurs: Folge 9 - Extensionbasis schnell und einfach erstellen

Nach dem Kickstart und Zuweisung der StaticTS in deinem TypoScript Template im Backend, müssen wir als Nächstes das PAGE - Objekt erstellen.

Die Konfiguration platzieren wir in die Datei: setup.typoscript innerhalb von Configuration/TypoScript. Falls dieser Ordner und Datei nicht existiert, dann erstellen wir diese. 
Innerhalb von unserer TYPO3 Erweiterung müsste die Verzeichnisstruktur also wie folgt aussehen:

Configuration/TypoScript/constants.typoscript
Configuration/TypoScript/setup.typoscript

Konfiguration PAGE - Objekt

Das TypoScript Objekt: PAGE ist ein zentrales Objekt in TYPO3 und essenziell für die Erstellung von TYPO3 Templates.

Das PAGE - Objekt ist die Konfiguration für die Frontendausgabe. Die Frontendausgabe muss nicht ein HTML Dokument sein. Man kann auch XML, JSON oder ein anderes Format zurückgeben lassen.

In TYPO3 kann es somit auch mehrere PAGE - Objekte für verschiedene Formate oder Aufgabengebiete geben. Damit TYPO3 die PAGE - Objekte voneinander unterscheiden kann, gibt es die Eigenschaft: typeNum.

Das Standard PAGE -  Objekt hat den typeNum Wert Null, also

page = PAGE
page.typeNum = 0

Wenn der Besucher nun eine TYPO3 Seite im Browser aufruft, sucht TYPO3 ein PAGE - Objekt, welches für den typeNum - Wert Null konfiguriert ist und nutzt es.

Die Templateverzeichnisse hinterlegen

Die Templatedateien werden in einer TYPO3 Erweiterung im folgenden Ausgangsordner abgelegt:

Resources/Private/

Die View besteht im TYPO3 CMS aus folgenden Komponenten, die wichtig für diese Ordnerstruktur sind:

• Templates
• Layouts
• Partials

Die Konvention ist es, gleichnamige Ordner in dem Ausgangsordner zu erstellen:

Resources/Private/Templates
Resources/Private/Layouts
Resources/Private/Partials

Dieser Ordner werden jedoch nicht automatisch vom TYPO3 CMS erkannt, sondern müssen im TypoScript unterhalb eines PAGE - Objektes angegeben werden. 

Ich empfehle dir Templatedateien, die relevant für das Seitentemplate nochmal in eigene Unterordner abzulegen:

Resources/Private/Templates/Page
Resources/Private/Layouts/Page
Resources/Private/Partials/Page

Damit wir diese Ordner dem PAGE - Objekt zuweisen können, müssen wir ein weiteres Objekt erstellen. Dazu müssen wir uns im PAGE - Objekt die Ausgabenummern anschauen.

Ausgabenummern

Der Begriff Ausgabenummer ist von mir erfunden, weil es dafür keine offizielle Bezeichnung gibt. Ich finde, der Begriff beschreibt sehr gut, was diese Eigenschaft macht.

Man kann hier unter der Angabe von Ziffern TypoScript Objekte definieren, die Werte enthalten können, das sind sogenannte cObjects.

TYPO3 hat eine eigene Template-Engine namens Fluid. Wir nutzen diese Template-Engine mit dem Objekt: FLUIDTEMPLATE.

Dazu erstellen wir ein neues FLUIDTEMPLATE unter einer Ausgabenummer. Die Konvention besagt, dass wir das unter der Nummer 10 vornehmen:

page {
  10 = FLUIDTEMPLATE
  10 {
    
  }
}

In diesem Objekt können wir dann unsere Verzeichnisse registrieren:

10 {
  layoutRootPath = EXT:meine_extension/Resources/Private/Layouts/Page/
  partialRootPath = EXT:meine_extension/Resources/Private/Partials/Page/
  templateRootPath = EXT:meine_extension/Resources/Private/Templates/Page/
}

Jetzt kann TYPO3 alle unsere Templatedateien finden. Zum Schluss müssen wir nun dem FLUIDTEMPLATE - Objekt mitteilen, wie unsere Templatedatei heißt:

10 {
  templateName = Default
}

Sobald wir nun das Frontend aufrufen, dann sucht TYPO3 in unserer Extension nach folgender Datei:

typo3conf/ext/meine_extension/Resources/Private/Templates/Page/Default.html

Diese Datei gibt es noch nicht und können wir nun erstellen und mit Fluid beginnen unser Template zu erstellen.

Doch bevor du damit beginnst, musst du noch wissen, wie man Seiteninhalte in dieses Template einbinden kann.

Falls du noch Fragen zu der Konfiguration mit dem PAGE - Objekt hast oder mehr Hilfestellungen benötigst, dann schaue dir mein Blogartikel: Basiskonfiguration einer TYPO3 Seite an.

Einbindung Seiteninhalte in das Template

In TYPO3 kann der Redakteur ganz bequem Inhaltselemente der unterschiedlichsten Typen erstellen. Diese Inhalte sind immer einer Seite und einer Inhaltsspalte zugewiesen.

Das ermöglicht es dir, als Frontendentwickler die Inhalte auf den verschiedensten Positionen im Template zu integrieren.

Damit du die Inhalte auslesen und rendern kannst, benötigst du in TYPO3 ein komplexes TypoScript Objekt und einen Fluid ViewHelper.

Das Beste ist, du musst noch nicht mal das TypoScript Objekt schreiben. Das gibt es schon in der offiziellen TYPO3 Dokumentation und sieht so aus:

lib.dynamicContent = COA
lib.dynamicContent {
   10 = LOAD_REGISTER
   10.colPos.cObject = TEXT
   10.colPos.cObject {
      field = colPos
      ifEmpty.cObject = TEXT
      ifEmpty.cObject {
         value.current = 1
         ifEmpty = 0
      }
   }

   20 = CONTENT
   20 {
      table = tt_content
      select {
         orderBy = sorting
         where = {#colPos}={register:colPos}
         where.insertData = 1
      }
   }

   90 = RESTORE_REGISTER
}

Dieses Objekt kannst du so wie es ist in deiner TypoScript Datei: Configuration/TypoScript/setup.typoscript platzieren.

Mit diesem Objekt kannst du alle Inhaltselemente der aktuellen TYPO3 Seite auf der angegebenen Inhaltsspalte auslesen und automatisch rendern lassen.

Dazu musst du nur folgenden Fluid ViewHelper in deiner Templatedatei platzieren:

<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />

Im Attribut data kannst du mit colPos die Nummer der Inhaltsspalte angeben. Dann werden automatisch alle Inhaltselemente in der richtigen Reihenfolge im Frontend gerendert. 

Das geht, da wir Fluid als Template-Engine nutzen und wenn du bei StaticTS in deinem TypoScript Template: fluid_styled_content vor deiner erstellten Erweiterung einbindest. Näheres kannst du den oben verlinkten Blogartikel und YouTube Video erfahren.

Der Rest ist dann nur das Umsetzen deines Templates mittels HTML. 

Seitentemplate mit Fluid erstellen

Das Seitentemplate kannst du mit TYPO3 beliebig gestalten. Es gibt in TYPO3 absolut keine gestalterische Grenze.

Durch die intelligente Aufteilung in 

• Templates
• Layouts
• Partials
• Sections

hast du wirklich sehr gute Möglichkeiten, dein Seitentemplate maximal übersichtlich aufzubauen und skalierbar zu machen.
Falls du mehr über Fluid erfahren möchtest, dann kann ich dir diesen Blogartikel empfehlen.

In diesem Blogartikel gibt es auch eine ausgewählte Liste an ViewHelper, die man in der Regel in einem Seitentemplate braucht.

Wenn du wissen möchtest, wie man eine Breadcrumb, Haupt- oder Untermenü einbinden kann. Dann lese dir mein Tutorial zu diesem Thema durch.

CSS und JavaScript Dateien einbinden

Jedes Template hat natürlich CSS und JavaScript Dateien. Deshalb möchte ich dir zum Abschluss zeigen, wie man Resourcen in TYPO3 einbinden kann.

Für die Einbindung der Resourcen ist ebenfalls das PAGE - Objekt verantwortlich. Hier gibt es folgende wichtige Eigenschaften:

• includeCSS
• includeCSSLibs
• includeJSFooter
• includeJSFooterlibs

CSS Dateien einbinden

Die Einbindung der CSS Dateien erfolgt durch includeCSS. Diese Eigenschaft ist ein Array bestehend aus Elementen vom Typ: resource.

Die Verwendung ist ganz einfach, man kann wie bei einem assoziativen Array Schlüssel definieren und diesem den Pfad zu Datei mitgeben. 

Wir legen die CSS Dateien in unserer Extension unter folgendem Verzeichnis ab:

Resources/Public/Css

Eine Einbindung sieht dann wie folgt aus:

page.includeCSS.theme = EXT:meine_extension/Resources/Public/Css/theme.css

Auf dieser Weise und unter Angabe von anderen Schlüsseln kannst du beliebig viele CSS Dateien einbinden.

Falls du eine CSS Datei, einer Bibliothek oder Frontend Framework wie Bootstrap einbinden möchtest. Dann nutze nicht includeCSS, sondern includeCSSLibs.

Die Eigenschaft: includeCSSLibs funktioniert genau gleich wie includeCSS. Der Unterschied liegt darin, dass die CSS Dateien unterhalb von includeCSSLibs for den CSS Dateien unterhalb von includeCSS in das HTML Dokument eingebunden werden.

JavaScript Dateien einbinden

Die Einbindung von JavaScript Dateien geht synonym zu den CSS Dateien. Jedoch nutzt man hier die Eigenschaften: includeJSFooter und includeJSFooterlibs.

Und nein, es ist kein Tippfehler meinerseits. Es heisst wirklich includeJSFooterlibs.
Frag mich bitte nicht, wieso es bei CSS includeCSSLibs heisst und bei JavaScript includeJSFooterlibs.

In der Regel sollen JavaScript Dateien am Ende des HTML Dokumentes eingebunden werden. Dass heisst vor dem schließenden Body-Tag. 

Es kann jedoch notwendig sein, dass man bestimmte JavaScript Dateien im HTML <head> einbinden möchte.
Dafür gibt es die Eigenschaften:

• includeJS
• includeJSLibs (ja, Libs ist groß ;))

Die Handhabe ist identisch zu den oberen Beispielen.

Tipps und Tricks

In diesem Abschnitt möchte ich dir noch ein paar Tipps an die Hand geben, dir deine Arbeit bei der Templateerstellung erleichtern werden.

Inhalte auslagern

In einem Seitentemplate gibt es immer wieder Bereiche, die sich wiederholen. Da sind beispielsweise der Header, Footer oder Seitenleisten.

Diese Teile lassen sich mittels Partials in separate Dateien auslagern. Das Problem dabei ist, dass jede Änderung nur durch den Programmierer getätigt werden kann.

Deshalb empfehle ich dir bestimmte Inhalte so auszulagern, dass auch Redakteure diese ändern können. Ein Beispiel ist der Footer. 

Footer sind heutzutage eigene Inhaltsbereiche mit vielen wichtigen Informationen und Querverweisen. Ich finde, es ist durchaus sinnvoll, diese Inhalte den Redakteur vornehmen zu lassen.

Um Inhalte auszulagern, benötigst du etwas TypoScript und einen Fluid ViewHelper. In diesem Tutorial zeige ich dir den TypoScript Teil.

Um dann diese TypoScript Objekte zu rendern, kannst du einfach den bereits kennengelernten cObject - ViewHelper nutzen.

Fazit

Du siehst, dass TYPO3 ein komplexes und sehr flexibles Content-Management-System ist. Dennoch kannst du in TYPO3 in wenigen Schritten beginnen, auch anspruchsvolle Templates umzusetzen.

Dabei kannst du durch intelligentes Auslagern von Inhalte, deinen Redakteuren alle Möglichkeiten geben, wirklich jeden Inhalt zu ändern.

Falls du lernen möchtest, wie man TYPO3 Templates erstellt. Dann kann ich dir mein Onlinekurs: Lerne ein TYPO3 V9 Template zu programmieren empfehlen. Wenn du darüber hinaus noch ein Kurs zu TypoScript suchst, dann besuche meinen Onlinekurs: TypoScript für TYPO3 11 der Komplettkurs.

Falls du mit TYPO3 noch gar nicht vertraut bist, dann empfehle ich dir die TYPO3 11 Masterclass.