TypoScript

Was ist TypoScript?

  • Konfigurationsprache von TYPO3
  • Dokumentiert in der TSRef
  • Organisiert in Templaterecords, die Im Backend bearbeitet werden können.
  • Wird innerhalb des Seitenbaumes vererbt. Sobald auf einer Seite ein TypoScript Template eingebunden ist, ist es auf den Unterseiten gültig außer es wird überschrieben.
  • Nutzbar in eigenen Erweiterungen

Was ist TypoScript NICHT:

  • TypoScript ist keine Skript- oder Programmiersprache

Ein einfaches TypoScript Template anlegen

TypoScript Templates werden verwaltet über das Backend Modul "Template". Um ein einfaches Template umzusetzen öffnen dieses Modul und suche die Webseite, für die das Template erstellt werden soll. Oftmals ist dies Startseite der Webseite. Ich verwendet hier eine eigene Unterseite, da meine Startseite schon ein Template hat.

Wenn die Seite ausgewählt wurde ist der Link "Create Template for a new site" sichtbar. Wähle diesen aus und du gelangst in die Konfigurationsansicht des neuen Templates.

TypoScript Template für eine neue Webseite anlegen.

In der Konfigurationansicht gibt es viele Felder. Wichtig ist für uns zunächst das Feld Setup. Schreibe in dieses Feld zunächst folgenden Inhalt:

page = PAGE
page.10 = TEXT
page.10.value = Hallo Welt
page.10.wrap = <p><strong> | </strong></p>

Ausserdem solltest du noch sicherstellen, dass im Formular die Optionen "Clear Constants / Setup" und die Option "Rootlevel" ausgewählt sind.

Clear Constants / Setup bedeutet, dass eventuell vererbtes TypoScript nicht mehr greif, also ungültig wird. Dadurch stellen wir sicher, dass es für unser Template keine "Seiteneffkte" durch andere Templates gibt.

Die Option "Rootlevel" sagt aus, dass diese Seite eine Startseite eines Unterbaumes ist.

 

TypoScript Setup in neuem Template
Clear Constants und Setup / Rootlevel

Öffnet man diese Webseite nun im Frontend ist folgendes zu sehen:

 

TypoScript Hello World im Frontend

Doch was passiert hier eigentlich genau?

Mit page = PAGE wird gesagt, dass die Variable page ein PAGE Objekt ist. Das PAGE Objekt wird dazu genutzt eine Seite auszugeben. 

Das PAGE Objekt kann weitere Objekte aufnehmen um diese dazustellen. page.10 = TEXT bedeutet zum Beispiel, dass das Unterobjekt 10 ein TEXT Objekt ist. Ein TEXT Objekt ist ein einfaches Content Objekt zum ausgeben von Text.


TypoScript Templates organisieren

Templatedatensätze können schnell lang und unübersichtlich werden. Ausserdem werden vielleicht nicht alle Komponenten eines Templatedatensatzes für die entsprechende Webseite gebraucht. Aus diesen Gründen, unteranderem, ist es möglich Templatedatensätzen zu kaskadieren.

Dadurch ist es möglich Teile von Templates in seperate Templatedatensätze auszulagern und dort den jeweilige Contants und Setupcode zu speichern.

Ein weiterer Vorteil dieser Strategie ist es, dass bestimmte Templatedatensätze in anderen Projekten wiederverwendet werden können.



Sysfolder für Templates anlegen

Um den Überblick zu behalten bietet es sich an, für die Templates ein eigenes oder sogar mehrer Sysfolders zu erstellen. Ein Sysfolder ist ein Ordner im Pagetree in dem TYPO3 Datensätze hinterlegt werden können.

Um ein Sysfolder anzulegen, ist ähnlich vorzugehen wie beim Anlegen eines normalen Seitenbehälters.

In der TYPO3 Backend Navigation auf der linken Seite ist der Menüpunkt "Web -> Seite" zu wählen.

Darauf hin erscheint im mittleren Bereich des Backend der Pagetree, dort ist zu dem Eintrag zu navigieren unterhalb dessen ein neuer Datensatz angelegt werden soll.

Durch den Klick auf das Symbol eines Pagetreeobjekts öffnet sich ein Kontextmenü. Über dieses Kontextmenü ist über den Menüpunkt "neu" ein neuer Datensatz anzulegen.

 

In diesem Bild ist dass anlegen eines neuen Datensatzes im TYPO3 Pagetree zu sehen.
Neuer Seitencontainer für ein Sysfolder
Seite zu Sysfolder machen


Auf der darauf folgenden Seite ist der Eintrag "Seite" zu wählen. Daraufhin erscheint der Dialog zum anlegen eines Seitenbehälters. Hier müssen wir jetzt statt "Standard", den Menüpunkt "SysOrdner" auswählen. Natürlich sollte auch ein ensprechender Name fesgelegt werden.

 

Nachdem der Eintrag gespeichert wurde, ist das Sysfolder in Form eines Ordners im Pagetree sichtbar.


Sysfolder im TYPO3 Seitenbaum (Pagetree)

Template im Sysfolder anlegen

Anlegen eines neuen Template Datensatzes in einem TYPO3 Sysfolder
Datensatz im Sysfolder anlegen

Im vorherigen Abschnitt haben wir unser Sysfolder für die Templates angelegt. In diesem Schritt können wir nun unseren ersten Templatedatensatz anlegen.

 

Dazu öffnen wir das Kontextmenü des Sysfolders, indem wir auf das Symbol im Pagtree klicken, und wählen den Menüpunkt "neu", genau wie bei anlegen des Sysfolders zuvor.

In diesem Dialog ist der Eintrag "Template" auszuwählen, damit ein neuer Templatedatensatz angelegt wird.


Ich habe hier um ein einfaches Beispiel zu bringen den Templatedatensatz "demo" gennant. In das Feld Setupcode habe ich folgendes eingetragen.

temp = TEXT
temp.value = HALLO LEUTE

Es ist darauf zu achten das bei Templates die später eingebaut werden sollen, dass der Haken bei "Rootlevel" nicht gesetzt ist. Bei dieser vorgehensweise ist dass aber standardmässig so.

TYPO3 Template in ein andere Template integrieren

Das erste Template zur Integration ist nun fertig. In diesem Beispiel, werde ich um es einfach zu halten den Inhalt von temp im Haupttemplate ganz unten auf der Seite ausgeben.

Dazu ist im ersten Schritt, das Template der Startseite zu öffnen. Dazu wählen wir den Menüpunkt "Web -> Template" in der Backendnavigation, wechseln zum entsprechenenden Templatedatensatz und öffnen ihn zum bearbeiten durch einen Klick auf "Click here to edit whole template record".  (Hinweis: das öffnen währe wie zuvor gesehen auch über die Listenansicht möglich).

Im Formular des Templatedatensatzes muss nun unter dem Menüpunkt "include basis template" unser Template "demo" im Sysfolder Templates hinzugefügt werden.

Auf diesem Screenshot ist zu sehen wie man ein anderes Template in einen Templatedatensatz integriert.
Das TypoScript Roottemplate anpassen
Basis Template im include Tab auswählen
"demo" Template als include Template auswählen

Eingebundene TYPO3 Templates nutzen

Der externe Templatedatensatz ist jetzt eingebunden und sollte benutzbar sein. Da in unserem externen Template nur ein Text Objekt existiert werde ich dessen Ausgabe einfach mal in page.20 übernehmen. Dazu ist der TypoScript Setupcode des Haupttemplate anzupassen also

 

page = PAGE
page.10 = TEXT
page.10.value = Hallo Welt
page.10.wrap = <p><strong> | </strong></p>
page.20 < temp

Dieses Beispiel war auch nur dazu gedacht die Funktionalität zu erklären. Ich denke dieses sollte klar sein. in temp könnt sich auch ein Menü oder änliches befinden. es sollte jedoch ein passenderer Name als temp genommen werden.

 

 

Das Ergebnis im TYPO3 Frontend

Wir sollten jetzt erwarten das im Frontend an page.20, in diesem Fall unter dem Content, der Inhalt von temp ausgegeben wird. Genauso ist es auch. Wie im Quelltext zu sehen ist steht dort nun "HALLO LEUTE" also der Inhalt von temp, den wir im Template demo definiert haben.

 

Ausgabe mit inkludiertem TypoScript Template im Frontend

Extension Templates

Mit den Extension Templates gibt es in TYPO3 die Möglichkeit ein Template in einer beliebigen Position im Pagetree zu Erweitern.

Das kann z.b. dazu genutzt werden in Bestimmten Bereichen der Seite TypoScript Code zu überschreiben so das ein Teil der Seite verändert wird.

Navigation