TYPO3 (Teil 33): TypoScript-Templates

Den Begriff Templates kennt ihr möglicherweise auch aus anderen Content-Management-Systemen wie beispielsweise Joomla! oder Contao. Bei TYPO3 stellt sich das Template-Prinzip allerdings etwas anders dar und geht hier auch einen Schritt weiter. Bei einem TypoScript-Template handelt es sich um eine wiederverwendbare Vorlage, in der mittels TypoScript festgelegt wird, wie die Webseite im Endeffekt aussehen soll.

Wir empfehlen:
TYPO3 CMS-Training

Zunächst ein Blick darauf, welche Aufgaben ein Template erfüllt:

• Einbinden von Designvorlagen
• Generierung von Menüs
• Definition der Seiteneigenschaften
• Dynamische Generierung von Bildern
• Integration von Erweiterungen

Durch ein Template teilt man TYPO3 also mit, welche Inhalte auf der Webseite wie angezeigt werden sollen. Dabei legt man ein Template auf einer Seite an. Dieses Template gilt dann auch für alle untergeordneten Seiten. Hier kommt das Prinzip der Template-Vererbung ins Spiel. Dadurch erspart man sich eine Menge Zeit. (Bei Bedarf lassen sich aber auch auf untergeordneten Seiten andere Template-Definitionen anwenden, was aber ein anderes Thema ist).

Ein Template anlegen

Prinzipiell gibt es unterschiedliche Herangehensweisen, wie man ein neues Template anlegt. Ich konzentriere mich an dieser Stelle auf die gebräuchlichste Variante.

 

Ruft Web>Template auf und klickt im Seitenbaum auf die Root-Seite.

Sollte es noch kein Template geben, klickt man auf Template für neue Website erstellen. Existiert bereits ein Template, klickt ihr auf Vollständigen Datensatz bearbeiten. Das sich daraufhin öffnende Dialogfenster stellt sich bei beiden Varianten identisch dar.

In diesem Fenster sind die einzelnen Template-Bestandteile zu sehen. Ganz oben gibt es das Auswahlfeld Info>Bearbeiten. Dieser Eintrag ist meistens eingestellt, wenn man es mit Templates zu tun hat. Denn darüber könnt ihr u.a. direkt mit TypoScript arbeiten. Ist Info>Bearbeiten ausgewählt, gibt es im unteren Fensterbereich zahlreiche Felder, die eine genauere Betrachtung verdienen. Los geht es mit dem Feld Template-Titel.

Der eingetragene Titel wird lediglich intern verwendet. Auswirkungen auf die Darstellung der Seite im Frontend hat er nicht. Prinzipiell ist man bei der Namenswahl frei. Allerdings sollte der Titel vor allem dann logisch gewählt werden, wenn man mehrere Templates in seinem Projekt verwenden will.

 

Weiter geht es mit dem Feld Website-Titel.

Hier kann man das Präfix für einen Seitentitel notieren. Zugewiesen wird dieser Titel dem title-Element der Webseite. Das geschieht dann immer nach folgendem Schema:

<title>{Website-Titel}: {Seitenname}</title>

Gibt man also einen Titel an, wird dieser immer vor dem Titel der aufgerufenen Seite angezeigt.

Im Feld Konstanten lassen sich – wen verwundert es – Konstanten definieren. Bei TYPO3 trifft es der Begriff Konstanten allerdings nicht ganz. Tatsächlich handelt es sich bei Konstanten in TYPO3 eigentlich um Variablen, da sich die Konstantenwerte jederzeit überschreiben/verändern lassen.

Entscheidende Bedeutung für die Arbeit mit dem Template kommt dem Feld Setup zu. Denn in diesem Feld wird die eigentliche TypoScript-Syntax notiert.

Über Inaktiv lässt sich das Template deaktivieren. Das Template wird dann im Frontend tatsächlich nicht mehr angezeigt. Vorteil dieser Variante: Das Template kann jederzeit wieder aktiviert werden.

In das Beschreibung-Feld könnt ihr einen beliebigen Text eintragen. Dieser könnte das Template genauer beschreiben. Verwendet wird der Inhalt dieses Feldes allerdings tatsächlich nur für interne Zwecke.

Es gibt noch zahlreiche andere Optionen, von denen nachfolgend jedoch nur die wichtigsten vorgestellt werden.

Weitere Optionen stehen im Register Optionen zur Verfügung.

Der Punkt Löschen spielt bei der Template-Vererbung eine entscheidende Rolle. Durch Setzen der Checkboxen unterbindet man die Kaskadierung von Konstanten oder dem TypoScript-Code.

Über die Wurzelebene wird die Wurzel des Seitenbaums definiert. Auch bei der Wurzelebene spielt die Vererbung eine wichtige Rolle: Das Root-Template dient allen TypoScript-Anweisungen als Ausgangspunkt und bleibt es so lange, bis ein anderes Template als Rootlevel definiert wird.

 

Wechselt nun ins Register Enthält.

Um ein statisches Template einzubinden, müsst ihr es nur im rechten Listenfeld anklicken. Es können auch mehrere Templates eingebunden werden. Die Reihenfolge, in der die Templates später abgearbeitet werden sollen, lässt sich über die Pfeiltasten festlegen. Standardmäßig ist TYPO3 so konfiguriert, dass zuerst Standard- und dann Basis-Templates bearbeitet werden. Ist die Checkbox Statische Templates nach Basis-Template einschließen aktiviert, kehrt sich die Reihenfolge um.

Innerhalb der statischen Templates befindet sich vordefinierter TypoScript-Code oder auch Variablen. Bindet man diese dann über ein statisches Template ein, kann man diese ganz einfach nutzen.

 

Interessant ist auch der Bereich Basis-Template einschließen. Bei den Basis-Templates handelt es sich um Bibliotheken, dank derer man sich TypoScript-Code organisieren kann. Um ein Basis-Template einzufügen, wählt man das Verzeichnis-Symbol. Wollt ihr ein völlig neues Basis-Template erstellen, klickt ihr auf das Plus. Will man sich einen Überblick über die Reihenfolge der Templates verschaffen, eignet sich die Template-Analyse, die in diesem Tutorial noch vorgestellt wird.

Wie bereits beschrieben, gibt es noch andere Optionen. Allerdings genügen die hier vorgestellten Optionen bereits, um "vernünftig" mit Templates arbeiten zu können.

Wenn man Web>Template aufruft, gibt es im oberen Fensterbereich das bereits vorgestellte Auswahlfeld. Den Eintrag Info>Bearbeiten habt ihr bereits kennengelernt. Allerdings sind in diesem Feld noch andere Einträge verfügbar. Und die verdienen durchaus eine genauere Betrachtung.

Konstanten-Editor

Zur Unterstützung bei der Arbeit mit Konstanten bietet TYPO3 den Konstanten-Editor, mit dem man Konstanten anpassen kann. Sinn macht der Editor allerdings nur, wenn innerhalb der Konstanten-Definition zusätzliche Angaben über die Konstanten angegeben werden. Vor allem bei der Anpassung von Standard-Templates leistet der Editor gute Dienste. So lassen sich über ihn z.B. ganz einfach Text- und Hintergrundfarbe der Webseite ändern.

 

Der TypoScript-Objekt-Browser

Mit dem TypoScript-Objekt-Browser kann man ganz bequem durch das Template navigieren.

Verwendet wird der TypoScript-Objekt-Browser vor allem im Zusammenhang mit der Fehlersuche. Denn hat sich im TypoScript-Code ein schwer auffindbarerer Fehler eingeschlichen, kann man diesem im Objekt-Browser gut ausfindig machen. Dieser zeigt nämlich tatsächlich entsprechende Fehlermeldungen an. So wird man beispielsweise auf nicht geschlossene Klammern usw. hingewiesen.

 

Template-Analyse

Über die Template-Analyse kann man sich einen Überblick über das Template verschaffen. Sinnvoll ist das natürlich vor allem im Zusammenhang mit komplexen Templates.

So kann man beispielsweise anhand der Template-Analyse die Reihenfolge der inkludierten Templates erkennen. Aber wie schon beschrieben, wird dieses Analyse-Tool eigentlich nur dann interessant, wenn man mit sehr komplexen Template-Strukturen arbeitet.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training