T3 Templates und TypoScript

Templates

  • Vorlagen/Baupläne zur Verarbeitung von Datenbankinhalten
  • Ohne diese weiß Typo3 Daten nicht darzustellen- Templates teilen TYPO3 mit, wie TYPO3 was zu machen hat.
  • Sowohl Templates als auch Content liegt in Datensätzen
  • Verknüpfung dieser Datensätze führt zur Darstellung
  • Trennung von Inhalt und Form ist gegeben
  • Arbeiten mit TypoScript, CSS, HTML uvm.
  • Erweiterbar (TemplaVoila und andere Module)

Die Templates sind Baupläne für die Webseite und dienen der Darstellung des Inhalts. So sorgen sie für die Trennung von Inhalt und Form. Sowohl die Inhalte wie auch die Information wo und wie diese angezeigt werden sollen, liegen als Einträge in einer Datenbank vor. Das Template ist nun der Bauplan, der besagt, welcher Inhalt wo und wie auf der Seite gezeigt werden soll. Dort steht also (vereinfacht dargestellt): Nimm den Inhalt von DB-Tabelle XY Zelle MN verknüpfe es mit der Formatierungsinformation aus Tabelle UVW Zelle OP und positioniere das Ganze laut Tabelle ST Zelle DE auf der Seite.
Im Gegensatz dazu sorgen Themes bei Drupal und Co „nur“ für die Art der Darstellung des Inhaltes. Während Templates für Typo3 absolut notwendig sind, um überhaupt irgendetwas auf einer Seite anzuzeigen, kann man bei Drupal auf Themes auch verzichten, denn dort befinden sich nur die Anweisungen wie etwas dargestellt werden soll.

TypoScript

Als erstes ist es wichtig zu verstehen, dass TypoScript keine Programmiersprache ist. TypoScript ist eine Konfigurationssprache – vergleichbar mit der Windows Registry.

Und: TypoScript ist sehr mächtig. Hat man es erstmal verstanden – was zugegeben nicht so einfach ist – so kann die Ausgabe für die Webseite extrem clever gestaltet werden.

Als offizielle Dokumentation führt nichts an der Sprachreferenz TSRef vorbei.
Weiterhin gibt es noch ein Tutorial “TypoScript by Example“, das an vielen Beispiele die Verwendung von TypoScript erklärt, eine Anfängereinführung gibt es hier.

1. Beispiel: Ein Auto erzeugen
In TypoScript bildet man so genannte Objekt-Bäume um zu definieren, wie z.B. ein Menü aussehen soll. Wir schauen und aber als erstes Beispiel ein TypoScript an, das ein Auto definiert…

1 lib.meinAuto = AUTO
2 lib.meinAuto.farbe = #FF0000
3 lib.meinAuto.10 = MOTOR
4 lib.meinAuto.10.typ = diesel

In Zeile 1 in diesem Beispiel erzeugen wir ein neue Objekt, das ich “lib.meinAuto” nenne. Der Name ist dabei frei wählbar! Diesem Objekt weise ich die Klasse “AUTO” zu. Woher weiß ich, dass ich diese Klasse benutzen kann? In der TSRef kann man das nachlesen. Wir kommen nochmal darauf zurück…
Nun kann ich für das Objekt “lib.meinAuto” Eigenschaften definieren. Welche möglich sind, steht wieder in der TSRef. In unserem Fall darf ich z.B. für ein Objekt der Klasse “AUTO” die Eigenschaft “farbe” definieren .
Dann nehme ich eine so genannte Objekterweiterung vor. Dazu nehmen ich mein bestehendes Objekt “lib.meinAuto” und ergänze dem Pfad um einen Zähler – in diesem Fall die 10. Ich kann dem neuen Objekt “lib.meinAuto.10? nun eine neue Klasse zuweisen. In diesem Fall die Klasse “MOTOR”.
In Zeile 4 benutze ich nun die Eigenschaft “typ” der Klasse “MOTOR” um zu definieren, dass mein Auto einen Dieselmotor haben soll.

TYPO3 erzeugt nun im Frontend ein Auto, das feuerrot ist und einen Diesel als Motor hat.

2. Beispiel: Hallo Welt
So, genug Autos gebaut. Nun wollen wir uns mal ansehen, wie man TypoScript in echt benutzt. Wir wollen eine weiße Seite bauen, auf der “Hallo Welt” steht.

1 meineSeite = PAGE
2 meineSeite.bodyTag = <body>
3 meineSeite.10 = TEXT
4 meineSeite.10.value = Hallo Welt

Eine Webseite benötigt einen HEAD-Bereich und einen BODY-Bereich. Dies müssen wir als erstes erzeugen. Wir schlagen also in der TSRef nach, wie man eine “leere” Seite erzeugt.
Wir sehen eine kleine Einleitung zu dem “PAGE”-Objekt und darunter eine Tabelle. Diese Tabelle ist wie folgt zu verstehen:

Property: Dieser Spalte kann man entnehmen, was ich alles an Eigenschaften für meinen Objektpfad definieren kann, wenn ich dem Objekt die Klasse “PAGE” zugeordnet habe. In unserm Fall benutzen wir in Zeile 2 die Eigenschaft “bodyTag” Data Type: Hier ist definiert, was ich nach dem Gleichheitszeichen eingeben darf.
Description: Eine kurze Beschreibung
Default: Was wird gesetzt, wenn ich nichts definiere

Sehen wir uns unser Beispiel 2 an:

In Zeile eins definiere ich ein Objekt “meineSeite” und weise ihm die Klasse “PAGE” zu. Damit erzeugt TYPO3 schonmal eine weiße Seite mit einem HEAD und einem BODY.

In Zeile zwei benutze ich die Eigenschaft “bodyTag” des der Klasse “PAGE“, um den Body-Tag zu definieren.

In der dritten Zeile mache ich eine Objekterweiterung “meineSeite.10?, um dieser die neue Klasse “TEXT” zuzuweisen. Diese sorgt dafür, dass ich einen Text ausgeben lassen kann.

In der vierten Zeile benutzen wir die Eigenschaft “value” der Klasse “TEXT“, um den Wert eingeben zu können, der ausgegeben werden soll.

Als Ergebnis erhalten wir eine weiße Seite auf der rechts oben “Hallo Welt” steht.

Übung zu TypoScript

Bitte beschreiben Sie den nachfolgenden Code zunächst mit den Begriffen Objekt, Objekteigenschaft, Objekterweiterung, Klasse und versuchen Sie das Resultat zu benennen. Hierbei ist es nicht wichtig jedes Detail nachzuvollziehen, sondern zu verstehen, was im Code beschrieben wird.

Beispiel zur Veranschaulichung:

meinAuto = AUTO

meinAuto.farbe = rot

meinAuto.10 = MOTOR

meinAuto.10.typ = diesel

meinAuto.20 = RAD

meinAuto.20.anzahl = 3

meinAuto.30 = SITZ

meinAuto.30.option = verstellbar

meinAuto.30.anzahl = 5

extrem einfaches Beispiel:

webseite = PAGE

webseite.10 = TEXT

webseite.10.value = Hallo Welt

Kleines TypoScript Beispiel:

meineSeite = PAGE

meineSeite.stylesheet = css/myStyle.css

meineSeite.bodyTag = <body>

meineSeite.topmenue = HMENU

meineSeite.topmenue.1 = {

# Konfiguration ….}

meineSeite.20 = TEXT

meineSeite.20.field = title

meineSeite.20.wrap = <strong>|</strong>

meineSeite.30 = IMAGE

meineSeite.30 = fileadmin/toplogo.gif