Vom Umgang mit Designvorlagen

Templates in T3: 1 Begriff - 2 Arten

Beim Anlegen komplexer Websites mit einer Vielzahl von unterschiedlichen Bereichen und Layouts sind normalen Webeditoren schlicht überfordert. Hier spielt ein modernes und professionelles Enterprise Web Content Management System seine Stärke in der Erstellung und Verwaltung von multiplen Webseiten voll aus. Für den Aufbau des grundlegenden Layouts stehen dem TYPO3 Anwender spezielle TYPO3 Templates zur Verfügung. Dabei bezeichnet der Begriff Templating das Anlegen von Vorlagen. Tempates ist eigentlich ein etwas irreführender Begriff, denn in TYPO3 bezeichnet ein Template zwei verschiedene Dinge.

HTML-Vorlagen, die neben dem grundlegenden Design der Webseite auch Markierungen für die Flächen, an denen später dynamisch erzeugte Inhalte integriert werden sollen, enthalten.

Das Konzept der "normalen" Templates ist bereits seit Jahren die Standard-Vorgehensweise für das Anlegen von komplexen Websites. Mittels sogenannter Templates werden vorab angefertigte Designvorlagen für das Layout der Seite in HTML codiert und definiert und anschließend in einen beliebigen Webseiten- oder HTML-Editor geladen. Genereller Vorteil der Templates ist dabei die Festlegung und eventuelle Wiederverwendbarkeit der Seitenstruktur und -inhaltes sowie das Definieren von Flächen, in denen später dynamischer Content integriert werden soll. So auch im Web Content Management System TYPO3: Es unterstützt dabei Templates, die auf HTML, auf XHTML 1.0 und CSS 2.0 aufbauen.

Unter Templates spricht man bei TYPO3 aber auch von den

TypoScript - Templates. Das sind TYPO3-Konfigurations-Vorlagen, die regeln, in welcher Form die Inhalte der Datenbank in die Markierungen der Designvorlagen-(Templates) einfügt werden sollen.

Was bedeutet Templating in TYPO3?

Templating bezeichnet das Anlegen der Designlayouts in TYPO3 mittels TypoScript und gegebenenfalls TemplaVoila.

Welche Möglichkeiten des Templating gibt es?

Templating per Hand

Templates per Hand bedeutet dabei über die normale TYPO3 Funktion "Template" eine HTML-Vorlage zu erstellen. Es öffnet sich das Eingabefeld indem der Nutzer wie in jedem beliebigen HTML-Editor den passenden Code eintragen kann. Dynamische Inhalte werden entweder mittels Marker oder Subparts und den jeweils entsprechenden TypoScript-Code in die HTML-Seite integriert. Zusätzlich lassen sich hier auch die Cascading Style Sheets per Pfadangabe referenzieren. Wichtig und notwendig bei dieser Methode ist es, dass der Anwender alle Pfade zu den CSS-Dateien, den Bildern und sonstigen Medien richtig und in jeder Zeile einzeln setzt, damit TYPO3 die Seite später auch richtig zusammensetzt.

Bei umfangreichen Webseites mit einer Vielzahl von Seiten ist diese Methode, besonders wenn nachträglich das Seitenlayout durch den Kunden geändert werden soll, zu umständlich.

Templating mit dem "Template Autoparser"

Hier kommt die Extension "Template Autoparser" ins Spiel! Diese Extension ermöglicht bereits im Vorfeld relative Pfade zu konfigurieren. TYPO3 sucht anhand dieser Angaben dann später sowohl in dem Hauptpfad und allen Subpfaden nach den passenden - im HTML-Code angelegten Elementen einer oder mehrerer Seiten. Konkrete Pfadangebe sind nunmehr nicht mehr nötig. Wie auch beim Templating per Hand werden auch bei dieser Methode dynamische Elemente per Subparts oder Marker und dem richtigen TypoScript-Code an den gewünschten Stellen im HTML-Code integriert.

Templating mit "TemplaVoila"

Noch einfacher ist das Anlegen eines Templates durch die neue Extension "TemplaVoila". Mittels TemplaVoila (TV) kann man Inhalte (Texte, Bilder, Multimedia, Extention-Output) auf ein HTML-Template (HTML + CSS Defintion von Web-Seiten) festlegen (mappen). Man kann also leicht definieren, an welcher Stelle der Webseite beispielsweise der Haupttext, ein Flash-Header oder ein Menu angezeigt werden soll.

Vorgehensweise beim Templating mit TemplaVoila

Zunächst erarbeitet man eine vollständige Seite in einem Standard-HTML-Editor.
Das Ergebnis legt man dann unter fileadmin in einen eigens dafür neu geschaffenen System-Ordner templates.
Danach definiert man in TemplaVoila zwei neue Strukturen.

eine Datenstruktur (DS)
ein Template-Objekt (TO)

Die Datenstruktur von TemplaVoila definiert welche Inhalte in der Webseite anzeigt werden soll. Das Template-Objekt an welchen Stellen.

Per visuellen Mapping in TV kann man danach auswählen welcher Tag oder welcher bestimmte Inhalt im vorhandenen HTML-Template ersetzt werden soll. Über den TYPO3-Strukturbaum lässt sich dann definieren, welches Template für welche der Web-Seiten verwendet werden soll und welche Art von Content an die jeweiligen "TemplaVoila-"Stellen geschrieben werden soll.

Vorteile durch den Einsatz von TemplaVoila

Der entscheidende Vorteil an TemplaViola aber, im Gegensatz zudem eher veralteten Standard Templating und dem Autoparser, liegt darin, das das Konfigurieren von Seiteninhalten mit TypoScript auf ein Minimum reduziert wird. Ausserdem sind bestimmte Webdesigns wie beispielsweise die flexible Gestaltung von Spalten und Layouts, von sehr komplexen grafischen Elementen oder gar von "on-the-fly"-veränderbaren Flashdateien innerhalb einer TYPO3 Webseite erst mit TemplaVoila möglich.

Weitere externe Quellen:
Das TYPO3 Templating Konzept Eine Einführung (englisch)	Templating mit TemplaVoilá Eine Einführung
Templating mit dem Autoparser Eine Einführung (englisch)	TYPO3 Documentation Library Offizielle Dokumentation (englisch)