1.1| TypoScript Basics – Typo3 Template mit FLUID programmieren

In diesem Tutorial werden wir Schritt für Schritt ein eigenes Typo3 Template in der neuen Technologie FLUID programmieren.
Zuerst: Was ist FLUID überhaupt? FLUID ist die Template Engine von Typo3. Da die Funktionen von Smarty oder ähnlichen Template Engines den Anforderungen von Typo3 nicht gerecht wurden, wurde Typo3 FLUID entwickelt. FLUID ist in Typo3 4.3 enthalten, aber auch im PHP Framework Flow3. FLUID hat einige neue Variablen, die man sich auf der Typo3 Wiki ansehen kann. (http://wiki.typo3.org/De:Fluid)

Um mit dem Bearbeiten eines Templates anzufangen melden wir uns zuerst in unserer Typo3 Installation an. Als nächstes gehen wir auf den Menüpunkt Template, welcher sich im linken Menü befindet. Nun erscheint oben auf der Seite ein Dropdown Menü. In diesem wählen wir „Info/Modify“ aus und klicken dann auf den Punkt „Setup“. Nun sind wir im Typo3 eigenen „t3editor“.

1. Text im Typo3 Template anzeigen

Wir fangen erst einmal einfach an. Wir geben einfachen Text in unserem Template aus. Dafür verwenden wir das allseits beliebte und viel verwendete Beispiel „Hallo Welt“.

Mit der Anweisung „page = PAGE“ erstellen wir ein neues „Page“ Objekt namens „page“.

page = PAGE

Als nächstes bestimmen wir einen Textblock und füllen diesen mit unserem Text. Dies geschieht über folgende Anweisung:

page.10 = TEXT
page.10.value = Hallo Welt

Wenn wir nun ins Frontend unserer Typo3 Installation gehen, sehen wir den Text „Hallo Welt“ auf unserem Bildschirm.
Die Zahl „10“ bestimmt sozusagen zum einen die ID des Elements und zum anderen die Reihenfolge, in der die Elemente angezeigt werden. Ein Element mit der Zahl „10“ wird also immer vor einem Element angezeigt, mit der Zahl „20“.
Die Typoscripte werden immer von oben nach unten abgearbeitet. Daraus ergibt sich, dass ein Element geändert wird, wenn es nochmals mit „.value“ beschrieben wird.

page.10 = TEXT
page.10.value = Hallo Welt
page.10.value = Unser überarbeiteter Text Hallo Welt

In diesem Beispiel wird unser Text „Hallo Welt“ durch den Text „Unser überarbeiteter Text Hallo Welt“ ersetzt. Es wird auch nur der zuletzt gesetze Text angezeigt. Wenn wir nun wieder in das Frontend gehen, sehen wir den Text „Unser überarbeiteter Text Hallo Welt“ auf unserer Webseite.

Bei alten Typo3 Templates findet man folgende Anweisung um einen Textbaustein zu erstellen.

page.10 = HTML

Dieser ist laut der neuen Typo3 FLUID Version nicht mehr korrekt und wurde durch „page.10 = TEXT“ ersetzt.

2. Eigene Objekte erstellen

In Typo3 FLUID kann man eigene Objekte erstellen. Im oben genannten Beispiel hieß dieses Objekt „page“ und wurde vom obersten Objekt abgeleitet. Es lassen sich aber auch für jeden Text- bzw später auch Bildblock eigene Namen vergeben. Dies sieht dann folgendermaßen aus:

meinElement = TEXT
meinElement.value = Hallo Welt

page = PAGE
page.10 < meinElement

Mit „meinElement = TEXT“ wird ein neuer Textblock mit dem Namen „meinElement“ erzeugt. Es wird eine neue „page“ erzeugt und auf dieser das Element an Position 10 angezeigt.
Öffnen wir mit diesem Code nun das Frontend, sehen wir auf der Seite den Text „Hallo Welt“.

3. Typoscript abkürzen

Typoscript lässt sich auch verkürzen und vereinfachen. Dies erreichen wir durch das Setzen einer geschweiften Klammer. Wir nehmen noch einmal das obige „Hallo Welt“-Beispiel.

page = PAGE

page {
    10 = TEXT
    10 = Hallo Welt
    20 < .10

    30 = TEXT
    30 = Zweiter Absatz
    40 < .30
}

Diese Schreibweise verkürzt den Code und würde uns jetzt „Hallo Welt Zweiter Absatz“ anzeigen. Die Funktion „20 < .10“ sagt das selbe wie „20 < page.10“ und gibt das Element 10 aus. Es ist nur eine noch weiter verkürzte Schreibweise.

4. Daten aus Seiten ins Template importieren

Unser Template ist bis jetzt noch extrem statisch und es können keine Daten durch den Benutzer eingepflegt werden. Um dies zu ändern fangen wir einmal langsam an und lassen uns die mittlere Spalte der CMS-Seite anzeigen. Dies geht über folgenden Code:

page.20 < styles.content.get

Die Zahl „20“ hinter „page“ sagt wieder nur die Reihenfolge aus. Hier wird uns nun die mittlere Spalte der gefragten CMS Seite angezeigt.

5. Operatoren in TypoScript

Der erste Operator in Typo3 6 ist der sogenannte Referenzoperator. Geschrieben wird er „=<“ ohne die „“. Der Operator hat den Vorteil, dass er auch nachträglich geänderten Text in der neusten Version anzeigt. Er erstellt quasi nur eine Verknüpfung zu dem Objekt. Wird die Verknüpfung geändert, so wird auch die Anzeige geändert. Er überprüft also vor der Ausgabe, ob im nachfolgenden Skript noch eine Änderung an dem Objekt vorgenommen wird. Dies wird an folgendem Beispiel erkennbar.

beispielOBJEKT = TEXT
beispielOBJEKT.value = <h2>Text in h2</h2>

page=PAGE

page {
10 < beispielOBJEKT
20 =< beispielOBJEKT
}

beispielOBJEKT.value=<h1>Anderer Text</h1>

Wir geben hier zwei mal das beispielOBJEKT aus. Das erste mal mit dem normalen kopieren Operator und das zweite mal mit dem Referenzoperator.
Das erste Mal wird der <h2>-Tag ausgegeben, das zweite Mal der <h1>-Tag. Dies zeigt die Funktionsweise des Referenzoperators in Typoscript.

Der zweite Operator ist der löschen Operator. Er wird folgendermaßen geschrieben: „>“ (ohne „“) Dieser Operator löscht Objekte aus dem Skript. Die betroffenen Objekte werden auch nicht mehr im Frontend angezeigt.

Beispiel:

10 > beispielOBJEKT

Dieser Teil Typoscript löscht das Objekt beispielOBJEKT. Man könnte dieses Objekt auch mit „#“ auskommentieren.

6. Mehrzeilige Textblöcke

In Typo3 CMS 6 gibt es mehrzeilige Textblöcke. Diese haben den Vorteil, dass sie meist übersichtlicher sind. Den Aufbau erkennen wir an folgendem Beispiel:

beispielOBJEKT = TEXT
beispielOBJEKT.value (
    <h2>Text in h2</h2>
    Lorem Ipsum
)

Der Textblock wird mit der runden Klammer „(“ eingeleitet und mit „)“ wieder geschlossen. Der Text im Inneren der runden Klammern ist der Inhalt des Objektes. Hier sieht man auch den Unterschied zwischen runden und geschweiften Klammern. geschweifte Klammern werden für Zusammenfassungen von Objekten gebraucht, runde Klammern hingegen für Zusammenfassungen einzelner Werte in einem Objekt.

6. Typoscript Syntaxfehler finden und beheben

Typo3 6.1.7 bietet von Haus aus einen eigenen Editor an. Den „t3editor“. Typo3 bietet aber zusätzlich einen Object Browser an, mit dem man Fehler im Typoscript finden kann.
Um den Object Browser zu öffnen klickt man im obigen Reiter auf „Typoscript Object Browser“. Dieser verschafft einen Überblick über alle gesetzten Objekte und deren Werte. Fehlermeldungen über Tipp- oder Syntaxfehler findet man in der oberen Zeile des Object Browsers. Fehler sind in der Regel rot hinterlegt. Außerdem findet sich hier eine „Line Number“, in der der Fehler auftritt.
Die „Line Number“ sind allerdings besonders aufgebaut. Unser Template fängt z.B. erst bei ca. Line 2800 an. Deshalb sind die Zeilenangaben für Fehler im eigenen Template recht hoch. Über den Reiter „Template Analyse“ im obigen Menü lassen sich alle verwendeten und verfügbaren Templates anzeigen, sowie bearbeiten. Hier werden auch die dazugehörigen Zeilenangaben angezeigt. (z.B. 2618) Auch die Fehlermeldung wird hier im Skript erneut angezeigt.
In der Templatedatei „EXT:css_styled_content/static/“ werden alle Typo3 6 eigenen Funktionen gesetzt. Darunter ist auch die uns bekannte „styles.content.get“ Funktion.

Typo3 CMS 6.1 FLUID Template programmieren:

• 4.11| Typo3 CMS 6 Backend auf deutsch umsetellen
• 4.10| Logo mit Link zur Startseite einfügen – Typo3 Fluid
• 4.9| Ein Kontaktformular in Typo3 anlegen – Typo3 Fluid
• 4.8| News System für Typo3 – tx_news einrichten
• 4.7| RealUrl – Suchmaschinenfreundliche Links für Typo3 – SEO
• 4.6| Eine erweiterte Suchfunktion auf MySQL Basis für Typo3
• 4.5| Typo3 Updaten – Wie Update ich Typo3 richtig?
• 4.4| Inhaltsblöcke vererben – Typo3 Template mit FLUID
• 4.3| Objekt: TEXT – Textblöcke in Typoscript Typo3 FLUID
• 4.2| Menüs, Untermenüs und Navigation erstellen – Typo3 Fluid
• 4.1| Rechte, Linke Spalte und Rand ausgeben – Mehrspaltiges Layout
• 3.7| ViewHelper: Inline Notation – If Abfragen in einer Zeile – Typo3 Fluid
• 3.6| ViewHelper: Comment – Kommentieren von Code
• 3.5| ViewHelper: if – If Abfragen im Tempalte
• 3.4| ViewHelper: Hyperlinks – Externe und Interne Links einbauen
• 3.3| ViewHelper: cObject – Typoscript Objekte im Template anzeigen
• 3.2| ViewHelper: Format – Daten für das Frontend aufbereiten
• 3.1| ViewHelper: Image – Bilder einfügen
• 2.1| Layouts, Templates und Partials – Typo3 FLUID Template
• 2.0| Der Einstieg in FLUID
• 1.2| FLUID Template aufteilen – Struktur erstellen
• 1.1| TypoScript Basics – Typo3 Template mit FLUID programmieren