Zuckerschlecken

TYPO3-Templates mit TemplaVoilà erstellen
Kommentare

Wenn Sie bereits Templates für TYPO3 erstellt haben, dann wissen Sie, dass das nicht ganz unproblematisch ist. Denn der Weg von einer statischen Vorlage hin zu einer TYPO3-basierten Website ist auf klassischem Weg recht zeitraubend und mühsam. Abhilfe musste also her. Und genau die hat mit dem neuen Template-Konzept TemplaVoilà das Licht der Welt erblickt. Was es damit auf sich hat, wo die Vorteile liegen und wie sich TemplaVoilà in der Praxis nutzen lässt, das zeigt dieser Artikel.

TYPO3 ist ein äußerst mächtiges Content-Management-System (CMS). Deutlich wird das auch und gerade, wenn man einen Blick hinter die Kulissen riskiert und sich an die Template-Entwicklung heranwagt. Schnell haben Sie es dann nämlich mit den verschiedensten Platzhaltern und Markern zu tun. Und diese Vielzahl an Elementen führt dann oft zu Problemen. Die fangen schon damit an, dass das Anpassen der Pfade innerhalb der Templates einen gehörigen Aufwand verursacht. Erschwerend kommt hinzu, dass es sehr umständlich ist, ein einmal integriertes Template wieder in eine normale HTML-Datei zurück zu verwandeln. Bei kleineren Projekten wiegen diese Nachteile sicherlich nicht allzu schwer, werden die Sites aber umfangreicher, sieht die Sache schon anders aus. Um diese „Missstände“ zu beseitigen, wurde das Projekt TemplaVoilà ins Leben gerufen. Dabei handelt es sich um eine visuelle Template-Engine zum Anlegen von TYPO3-Templates. Durch die schnelle und effiziente Weise, mit der sich mittels TemplaVoilà aus statischen Templates eine funktionierende TYPO3-Website „zusammenklicken“ lässt, wird eine höhere Effizienz bei der Template-Entwicklung erreicht und der Umgang mit TYPO3-Templates ganz gehörig erleichtert. Weiterer Vorteil dieser Template-Engine: Neue und dynamische Inhaltstypen, die so genannten flexiblen Inhaltselemente (Flexible Content Elements) können erstellt werden.

Installation

Für die Installation benötigen Sie zunächst einmal eine funktionierende TYPO3-Installation ab Version 4.0. (Verfügbar ist bei Redaktionsschluss bereits der erste RC von TYPO3 4.2, der sehr stabil läuft.) Ist diese Voraussetzung erfüllt, kann mit den Arbeiten an und mit TemplaVoilà begonnen werden. Um TemplaVoilà nutzen zu können, muss man zusätzliche Extensions installieren. Deren Installation erfolgt, wie das in TYPO3 üblich ist, über das Extension-Repository.
  • css_styled_content
  • static_info_tables
  • TemplaVoilà
Seit TYPO3 4.0 spielt die Reihenfolge, in der die Extensions installiert werden, keine Rolle mehr. Denn sollte eine benötigte Erweiterung fehlen, wird automatisch nachgefragt, ob diese installiert werden soll. Achten Sie in jedem Fall darauf, dass die folgenden Extensions nicht vorhanden sind, da sie Konflikte und somit Probleme verursachen:
  • kb_tv_clipboard
  • TemplaVoilà_cw
  • eu_tradvoila
Nachdem alle Erweiterungen installiert und der Cache geleert wurde, sollten Sie unter dem Menüpunkt Web neue Einträge finden. (Manchmal kann es nötig sein, dass Sie sich zunächst ausloggen, dann wieder einloggen und erneut den Cache leeren.)
Abb. 1: Es gibt neue Einträge im Backend

Abb. 1: Es gibt neue Einträge im Backend

Damit ist die Installation abgeschlossen und die „echten“ Arbeiten können beginnen. Im Zusammenhang mit TemplaVoilà werden Ihnen immer wieder die Begriffe Datenstrukturen (data structure – DS) und Template-Objekt (template object – TO) begegnen. Anhand der Datenstruktur werden die dynamischen Felder beschrieben, die für ein Template verwendet werden können. Mit dem Template-Objekt wiederum wird die Dokumentstruktur an eine HTML-Datei gebunden. Grundvoraussetzung, um mit TemplaVoilà arbeiten zu können, ist ein vorhandener SysOrdner. In dem werden nämlich Dokumentstruktur und Template-Objekte gespeichert. Die Funktionsweise von TemplaVoilà lässt sich am besten anhand eines „durchexerzierten“ Beispiels zeigen. Daher wird im weiteren Verlauf dieses Artikels von der in Abbildung 2 gezeigten Seitenstruktur ausgegangen.
Abb. 2: Diese Seitenstruktur wird verwendet

Abb. 2: Diese Seitenstruktur wird verwendet

Um den SysOrdner anzulegen, klicken Sie auf das Symbol des Root-Elements der Seite und wählen Neu. Dabei spielt es übrigens keine Rolle, an welcher Stelle die Seite platziert wird. Es ist lediglich wichtig, dass sie später korrekt verbunden wird. Aus der eben angelegten normalen Seite muss nun noch ein SysOrdner gemacht werden. Dazu klicken Sie auf deren Symbol im Seitenbaum und wählen aus dem Kontextmenü Seiteneigenschaften bearbeiten. Über das Typ-Feld wird SysOrdner eingestellt. (An dieser Stelle der Hinweis, dass es auch möglich ist, mehrere SysOrdner für ein Projekt anzulegen. Dadurch lassen sich Datensätze beispielsweise nach Extensions, Themen oder ähnlichem sortieren). Im nächsten Schritt muss dem Wurzelelement der Seite beigebracht werden, wo sich die Template-Dateien befinden. Dazu gehen Sie auf Web | Seite sowie auf das Root-Element und rufen das Stif-Symbol auf, über das sich die Seiteneigenschaften bearbeiten lassen. Im unteren Fensterbereich befindet sich die Allgemeine Datensatzsammlung, über die der Speicherort von TemplaVoilà definiert wird.

Das Template erstellen

TYPO3 benötigt einen Wurzeltemplate-Eintrag. Dieser dient so lange für alle Unterseiten, bis er überschrieben oder erweitert wird. Dieses Template lässt sich dann später in beliebigen Unterseiten ändern oder ebenfalls ausbauen. Ebenso besteht aber auch die Möglichkeit, andere Template-Einträge zu erstellen. So kann man unterschiedliche Designs für die Seite anbieten. Um die notwendigen Einstellungen vorzunehmen, wird die Root-Seite aufgerufen und im Menü Web | Template gewählt. Die Meldung, dass noch kein Template für die Seite existiert, wird mit Create template for a new site übersprungen. Im Setup sind standardmäßig einige Zeilen TypoScript-Code enthalten, die angepasst werden müssen. Klicken Sie dazu auf das Stift-Symbol. Aus
# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
wird folgender Eintrag gemacht:
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
Durch diese Syntax wird mittels TypoScript eine Seite definiert. Dieser Seite wurde die TemplaVoilà-Erweiterung zugewiesen oder anders gesagt: Fortan wird das Design der Seite über TemplaVoilà gesteuert.

CSS-Einstellungen

Weiter geht es mit der CSS-Verarbeitung, die zunächst im Template von TYPO3 aktiviert werden muss. Dazu rufen Sie Web | Template auf und klicken dort die Seite an, die das Template enthält. Bei dieser Seite handelt es sich um das Root-Element. Öffnen Sie Click here to edit whole template record, um den gesamten Template-Eintrag zu bearbeiten. Im Feld Include Static (from extension)wird anschließend das Objekt CSS Styled Content hinzugefügt.

Datenstrukturen und Template-Objekte

Weiter geht es mit den Datenstrukturen und den Template-Objekten. Kurz zu den Unterschieden beider Varianten:
  • Eine Datenstruktur drückt aus, welche so genannten Felder (Fields) mit dem HTML-Template verbunden werden können.
  • Ein Template-Objekt beschreibt, welche HTML-Elemente zu welchen Feldern verknüpft sind.
Aus dem zuvor genannten wird deutlich, dass ein Template-Objekt immer auf eine Datenstruktur verweist. Diese Datenstruktur teilt dem Template-Objekt mit, welche Felder wie und in welcher Hierarchie miteinander verbunden sind. Das bedeutet, dass es mehrere Template-Objekte geben kann, die auf die gleiche Datenstruktur zeigen. Bevor nun das Template-Objekt erstellt wird, sollten sich die Template-Dateien bereits in einem Verzeichnis unterhalb von fileadmin/ befinden. Für die weiteren Arbeiten an TemplaVoilà wird eine HTML-Datei benötigt, die als Vorlage dient. Aussehen könnte sie wie in Listing 1 gezeigt. Listing 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://<a class="elf-external elf-icon" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow">www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="http: //<a class="elf-external elf-icon" href="http://www.w3.org/1999/xhtml" rel="nofollow">www.w3.org/1999/xhtml</a>">
<div id="logo"><img src="img/logo.gif" alt="Firmenlogo" /></div>
<div id="hauptmenu"><strong>Hauptmenu</strong></div>
<ul id="navigation">
<li><a href="#">Products</a></li>
<li><a href="#">Content Elements</a>
<ul>
<li><a href="#">Headers</a></li>
<li><a href="#">Text</a></li>
</ul>
</li>
<li><a href="#">Visions</a></li>
<li><a href="#">About us</a></li>
</ul>
<div id="info">

<strong>News</strong>Hier werden die News eingeblendet

</div>
<div id="content">
<h1>Willkommen</h1>
<h2>auf unseren Seiten</h2>
Schauen Sie sich ruhig etwas um.

</div>
Speichern Sie diese Datei beispielsweise unter fileadmin/mein_template/voila.html ab. Die Dokumentstruktur können Sie selbst schreiben. Dafür müssen Sie allerdings die Syntax kennen. Und genau hier liegt der Vorteil von TemplaVoilà. Denn man muss sich eben nicht um solche „Nebensächlichkeiten“ wie Syntax und Ähnliches kümmern, sondern kann mit ein paar Klicks Datenstruktur und Template-Objekte erstellen. An dieser Stelle allerdings gleich der Hinweis, dass, wenn Sie weiterführend mit TYPO3-Templates arbeiten wollen, Sie nicht um das Erlernen der Syntax herumkommen werden. Zurück zur Template-Datei. Rufen Sie unter Datei den Eintrag Dateiliste auf. Dort navigieren Sie zu dem Verzeichnis, in dem diese Datei liegt. Wenn Sie dem Beispiel dieses Artikel folgen, dann ist das fileadmin/mein_template/. Dort wird auf das vor der Datei voila.html angezeigte HTML-Symbol geklickt und TemplaVoilà gewählt. Über die Preview-Schaltfläche lässt sich die Vorschau der Seite öffnen, anhand der die korrekte Verknüpfung der Grafiken, der CSS-Dateien usw. überprüft werden kann. Sobald Sie mit der Voransicht zufrieden sind, geht es ans Anlegen der Dokumentstruktur. Dies erfolgt immer in zwei Schritten:
  • Es werden Platzhalter für die noch kommenden Inhalte eingefügt.
  • Die Platzhalter werden mit den entsprechenden HTML-Elementen verknüpft.
Das Datenelement ROOT wird automatisch von TYPO3 aufgelistet. Es muss nun nur noch dem entsprechenden HTML-Bereich zugeordnet werden. ROOT wird zunächst mithilfe der Map-Schaltfläche mit dem -Element des HTML-Templates verknüpft. Dazu wird rechts von ROOT auf Map und im Vorschaufenster auf den farbig hinterlegten body-Bereich geklickt. Über das entsprechende Listenfeld lässt sich die Art der Verknüpfung bestimmen.
  • INNER: Das ausgewählte Tag bleibt stehen und das Element wird innerhalb des Tags eingebunden.
  • OUTER: Das ausgewählte Tag wird nicht mit in das Element integriert. Stattdessen beginnt es vor dem Tag und endet nach ihm.
Im Fall von body wird INNER gewählt. Denn schließlich soll das -Tag eingeschlossen werden. Über einen Klick auf SET wird die Zuordnung bestätigt. Ob alles wie gewünscht funktioniert hat, lässt sich über Preview testen. Das sollten Sie übrigens nach jedem Mapping-Schritt tun. So lassen sich Fehler sofort aufdecken und müssen nicht erst später mit zeitaufwändiger und nervenaufreibender Suche korrigiert werden. Im nächsten Schritt wird ein Inhaltscontainer angelegt. Das wird der Bereich, in dem der Inhalt der Webseite steht. Im aktuellen Beispiel handelt es sich dabei um das Element mit der IDcontent. Tragen Sie in das Feld [Enter new fieldname] den Namen für den Inhalt ein. In der Praxis wird dabei übrigens meistens das Präfix field_ verwendet. Im aktuellen Beispiel trägt man demzufolge also field_content ein. Mit ADD werden die Einstellungen übernommen. In der sich daraufhin öffnenden Seite können dem neu angelegten Feld Eigenschaften zugewiesen werden (s. auch Tabellen 1 und 2). Tabelle 1: Mögliche Feldeigenschaften

Feld

Beschreibung

Mapping Type Hierüber wird festgelegt, mit welchem HTML-Element aus der Dokumentstruktur das Feld verbunden werden soll.
Title Der Titel des Feldes.
Mapping Instructions Notieren Sie hier den Zweck des Feldes. Die Mapping Instructions dienen Ihnen dabei später als Gedächtnisstütze.
Sample Data An dieser Stelle wird ein Beispieltext angegeben, der dann in der Voransicht erscheint.
Editing Type Hierüber wird festgelegt, von welchem Wert der Feldinhalt ist. Ausführliche Informationen dazu finden Sie im weiteren Verlauf dieses Artikels.
[Advanced] Mapping Rules Bei dieser Option handelt es sich um die Detaileinstellungen für den Mapping-Typ.
Tabelle 2: Es wurde bereits darauf hingewiesen, dass bei Editing Type mehrere Werte möglich sind

Feld

Beschreibung

Content Elements Inhaltselemente
Header field Das sind verlinkbare Eingabefelder, die in erster Linie für Überschriften gedacht sind.
Header field, Graphical Dabei handelt es sich um solche Überschriften, die mittels GIFBUILDER generiert werden.
Image field Ein Auswahlfeld für Grafiken.
Image field, fixes W+H Eine Grafik mit fester Breite und Höhe.
Integer value Zahlenwerte
Link field Das aus TYPO3 bekannte Auswahlfeld für einen URL.
Plain input field Ein einfaches Textfeld.
Selector box Ein normales Auswahlfeld.
TypoScript object path Dabei handelt es sich um TypoScript-Objekte wie Menüs usw.
Für das content-Element können die Einträge wie in Abbildung 3 vorgenommen werden:
Abb. 3: So sehen die Einstellungen für das content-Element aus

Abb. 3: So sehen die Einstellungen für das content-Element aus

Über Add wird das Element erzeugt. Jetzt muss content noch mit dem betreffenden Element aus der HTML-Datei verbunden werden. Dazu rufen Sie Map auf und klicken im Vorschaufenster auf das Tag mit der ID content. Im Bereich Action wird INNER eingestellt. Denn der Inhalt der Webseite soll innerhalb dieses DIVs stehen und im Frontend auch dort zu sehen sein. Mit Setwird das Element generiert. Was wäre eine Webseite ohne Menü? Ergo wird auch das diesem Artikel zugrunde liegende Beispiel mit einem solchen ausgestattet. Für dieses Menü wurde in der HTML-Datei der Bereich mit der ID hauptmenu angelegt. Prinzipiell wird das Hauptmenü genauso wie das Inhaltselement erstellt. Allerdings setzt man dieses Mal Editing Type auf TypoScript Object Path. Dazu wird der Feldname field_hauptmenu angegeben. Weitere Werte sind Hauptmenü für Title und Hier steht das Menü für Sample Data. Nachdem diese Einstellungen mit Add bestätigt wurden, erscheint das neue Feld Object path. Dort steht zunächst einmal der Eintrag lib.MyObject. Den löschen Sie und ersetzen ihn durch lib.HauptMenu. Bestätigt wird diese Angabe mit Update. Weiter geht es mit dem Verbinden des Elements Hauptmenü mit dem entsprechenden Template-Bereich. Dazu klicken Sie auf den Map-Button neben [EL]Hauptmenü. In dem sich öffnenden Dialogfenster wird der Bereich mit der ID navigation ausgewählt. Bei Action stellen Sie INNER ein. Bestätigt werden die gemachten Einstellungen wieder mit Set. Die genannten Schritte werden nun noch für das DIV-Element mit der ID navigation wiederholt. Innerhalb des Template sieht das folgendermaßen aus: Dieses Untermenü soll nun gegen ein dynamisches ausgetauscht werden. Legen Sie dafür das neue Feld field_untermenu an und rufen Sie Add auf. Als Title wird UnterMenu angegeben. Der Wert von Sample Data könnte Das ist das Untermenü sein. Im Bereich Editing Type wählen Sie TypoScript Object Path, klicken auf Add und tragen Object path: lib.UnterMenu ein. Mit Update und Map wird der nun schon bekannte Mapping-Dialog aufgerufen. Dort wählen Sie das Element mit der ID navigation aus, weisen ihm INNER zu und bestätigen diese Einstellungen mit Set. Jetzt müssen Datenstruktur und Template-Objekte gespeichert werden. Das geschieht über Save. Werden Datenstruktur und Template-Objekte das erste Mal angelegt, dann müssen Sie den Titel und den Typ des Templates notieren. Im aktuellen Beispiel könnte das folgendermaßen aussehen:
  • Title of DS/TO – MeinTemplate
  • Template Type – Page Template
  • Store in PID – Wählen Sie den Eintrag TemplateVoila (UID:12) aus. Beachten Sie, dass die UID bei Ihnen sicherlich eine andere sein wird.
Wenn Sie später Änderungen am Template vornehmen, verwenden Sie den unteren Fensterbereich, um die dann bereits bestehenden Datenstrukturen und Template-Objekte zu aktualisieren. Mit Create TO and DS werden Datenstruktur und Template-Objekte erzeugt. Ansehen können Sie sich die Einträge, indem Sie Web | Liste aufrufen und den entsprechenden SysOrdner auswählen. Wird nun versucht, sich diese Seite über Web | Anzeigen | Root-Seite im Frontend anzusehen, erscheint nach wie vor eine Fehlermeldung. Das liegt daran, dass auf den Seiten noch nicht das Template ausgewählt wurde. Um das zu ändern, werden die Seiteneigenschaften der Root-Seite aufgerufen. Innerhalb der angezeigten Auswahlfelder stellt man jeweils das zuvor angelegte Template ein. Nach dem Speichern dieser Einstellungen erscheinen neue Felder. Tragen Sie auch dort das gewünschte Template ein. Ein erneuter Blick in das Frontend zeigt, dass nun wenigstens schon mal die Seite angezeigt wird. Es fehlen allerdings noch die Formatierungen. Der simple Grund: Die CSS-Datei wurde noch nicht eingebunden. Um diesen Schönheitsfehler zu beheben, rufen Sie über Web | Liste die HTML-Datei auf, klicken auf TO und wählen aus dem Kontextmenü TemplaVoilà. Zusätzlich aktivieren Sie in dem Bereich Adding Parts from HTML Header die beiden Kontrollkästchen  und . Mit Save werden die Einstellungen übernommen. Wenn Sie nun das Frontend aufrufen, sehen Sie, dass die Seite korrekt angezeigt wird.

Inhalte anlegen

Um Inhalt anlegen zu können, müssen Sie über das Moduls Web | TV Seite gehen. Der klassische Weg funktioniert im Zusammenhang mit TemplaVoilà nicht mehr. Markieren Sie also die gewünschte Seite, rufen Sie TV Seite auf und pflegen Sie dort den Inhalt ein. Noch ein wichtiger Hinweis in diesem Zusammenhang: Bei der Installation von TemplaVoilà wird noch kein Symbol für flexiblen Inhalt angelegt. Um nun tatsächlich flexiblen Inhalt nutzen zu können, erzeugen Sie ein neues Inhaltselement und ändern dessen Typ in Flexibler Inhalt bzw. Flexible Content.

YAML für TemplaVoilà

YAML hat sich längst zu einem Star in der Web-Gemeinde entwickelt. Es war nur eine Frage der Zeit, bis es auch eine entsprechende YAML-Anwendung für TYPO3 im Allgemeinen und TemplaVoilà im Speziellen geben würde. Eine entsprechende Extension hat t3net.de entwickelt und stellt sie kostenlos zur Verfügung (die genauen Nutzungsbedingungen stehen auf der Webseite der Entwickler.

Fazit

Dieser Artikel hat gezeigt, wie TemplaVoilà genutzt werden kann. Deutlich wurde dabei, dass sich mit TemplaVoilà die Ketten, die TYPO3 Template-Entwicklern üblicherweise anlegt, sprengen lassen. Verschwiegen werden darf allerdings auch nicht, dass TemplaVoilà äußerst komplex ist. Das gilt vor allem, wenn Sie sich nicht nur „Durchklicken“, sondern direkt mit der TemplaVoilà-Syntax arbeiten wollen. Denn TemplaVoilà arbeitet intern mit einer XML-basierten Sprache, die extra für TYPO3-Datenstrukturen entwickelt wurde. Auch wenn der Aufwand zum Erlernen von TemplaVoilà anfangs vielleicht recht groß erscheinen mag, sollten Sie sich nicht entmutigen lassen. Der Einsatz wird sich in jedem Fall lohnen, da Sie dank TemplaVoilà die größtmögliche Freiheit über Ihre TYPO3-Templates erlangen.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -