Mit diesem Artikel möchte ich eine Einführung in TypoScript – der Konfigurations-Sprache von TYPO3 geben.

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

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.

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 (Zeile 2).
In der dritten Zeile 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 erzeugen: klick mich.

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.

So weit zu dem ersten Teil der Einführung in TypoScript. Im nächsten Artikel erkläre ich dann, wie man nicht einen einfachen statischen Text sondern den Inhalt der Datenbank ausgeben lassen kann.

Popularity: 14%