Freie Templates in TYPO3 einbinden
Die ersten TypoScript-Schritte für das eigene Frontend
Sicherlich sind Templates Geschmackssache, doch soll dem Einstieg an dieser Stelle das Template Logistix von der Website freecsstemplates.org [1] dienen. Es handelt sich dabei wie bei den meisten Templates von der Seite um eine Vorlage für Wordpress, deshalb muss es zunächst speziell für TYPO3 verändert werden. Eine fertig angepasste Version können Sie allerdings von der Website des Autors herunterladen [2]. Voraussetzung für alles Weitere ist eine bestehende TYPO3-Installation. Eine Anleitung finden Sie ebenfalls im Internet [3]. Für die ersten Versuche sehr zu empfehlen ist auch ein „Webserver on Stick“ (WOS) [4], der einfach und schnell startklar ist, ohne dass erst MySQL und PHP installiert werden müssen. Die TYPO3-Installation vorausgesetzt, erstellen Sie zunächst einen Ordner namens „templates“ im Ordner „fileadmin“. Und nach dem Download der Datei „TPL_logistix.zip“ wird sie in den Ordner „fileadmin/templates/“ entpackt. Anschließend loggen Sie sich ins Backend ein.
Der Import des Templates in TYPO3
Für den Import des Templates klicken Sie einmal auf die kleine Weltkugel bei „New TYPO3 Site“ und wählen „Importieren aus .t3d“ aus. Danach wechseln Sie auf den Reiter „Upload“, klicken auf „Durchsuchen...“ und wählen die Datei „logistix.t3d“ im Ordner „fileadmin\templates\“. Klicken Sie auf den Button „Upload“, wonach die zu importierende Struktur unten angezeigt wird. Wechseln Sie auf den Reiter „Import“, aktivieren „ALLE UID Werte erzwingen“ und klicken auf den Button „Import“. Die anschließende Abfrage bestätigen Sie mit „OK“.
Das TYPO3-Backend zeigt die Struktur des importierten Templates.
Anschließend markieren Sie die Seite „root“ im Seitenbaum und klicken oben auf die Lupe „Webseite anzeigen“. Die Webseite sollte jetzt in der Vorschau angezeigt werden.
Das Template erweitern und anpassen
Nun soll das Template so erweitert werden, dass im Header der linke Titel „logistix“ durch den „Sitetitle“ aus dem Template „NEW SITE“ ersetzt wird. So kann er bequem im Backend geändert werden. Der Slogan im rechten Template-Bereich soll durch die Menüuntertitel und, wenn es sie nicht gibt, durch den Titel ersetzt werden. Dazu editieren Sie die HTML-Vorlage „index.html“, die im Ordner „fileadmin/templates/logistix/“ liegt und ersetzen die statischen Titel durch subparts Marker. Die Texte werden später beim Rendern durch TYPO3 ersetzt.
Das Template Logistix von freecsstemplate ist hier noch völlig unverändert.
<div id="header"> <h1><!-- ###SITETITLE### -->Logistix<!-- ###SITETITLE### --></h1> <h2><!-- ###TITEL### -->By Free CSS Templates<!-- ###TITEL### --></h2> </div> <!-- end #header -->Listing 1
Jetzt müssen Sie den Subparts noch das „Content Object Array“ (COA) übergeben, das sich in der „config.txt“ befindet. Außerdem muss im Backend der gewünschte Titel erfasst werden. Dazu editieren Sie die Datei „setup.txt“, die sich im Ordner „fileadmin/templates/logistix/typoscript/“ befindet, und fügen den subparts einen „SITETITLE“ hinzu.
subparts.TITEL = TEXT subparts.TITEL.field = subtitle//title subparts.SITETITLE < temp.siteTitleListing 2
Markieren Sie im Backend die Seite „root“, wählen im Menü „Web“ den untersten Menüpunkt „Template“ und editieren den Sitetitle. Dazu klicken Sie auf den Stift und tragen zum Beispiel den Webseitentitel „Logistix Workshop“ ein. Klicken Sie abschließend auf den Button „Update“.
Bevor die Änderungen in der Vorschau zu sehen sind, muss der Seitencache gelöscht werden. Danach sollte der linke Seitentitel „logistix workshop“ lauten. Der Slogan im rechten Fensterbereich ändert sich dynamisch beim Seitenwechsel.
Nach den beschriebenen Einstellungen übernimmt das Template den Sitetitle aus dem Backend.
Eine Update-Anzeige einfügen
Um als weitere Möglichkeit eine Lastupdate-Funktion einzufügen, öffnen Sie erneut mit einem Editor die Datei „config.txt“ im Ordner „fileadmin/templates/logistix/typoscript/“ und fügen nachstehendes Listing ein.
#page Last Updated
temp.lu = TEXT
temp.lu {
data = page:lastUpdated
if.isTrue.data = page:lastUpdated
date = d.m.Y, H:i
wrap = Aktualisiert: |
data = register : SYS_LASTCHANGED
if >
}
Listing 3
In der Datei „setup.txt“ aktivieren Sie noch den subpart für unseren Marker.
subparts.LASTUPDATE < temp.luListing 4
Danach editieren Sie die Datei „index.html“ und fügen einen weiteren Marker ein, um das aktuelle Datum der jeweiligen Seitenänderung auszugeben.
<p id="legal"> <!-- ###COPYRIGHT### --> <!-- ###COPYRIGHT### --> Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> Edited by <a href="http://www.rasi.ch/">Free TYPO3 Templates</a> <!-- ###LASTUPDATE### --> <!-- ###LASTUPDATE### --> </p>Listing 5
Auch diesmal wird der Seitencache gelöscht, wonach in der Fußzeile das Datum der letzten Änderung erscheint, also zum Beispiel „Aktualisiert: 06.10.2007, 16:41“. Sie können den Marker auch an beliebiger anderer Stelle in die HTML-Vorlage einfügen und ihn gegebenenfalls in einem „div“ mit CSS positionieren.
Das Copyright anpassen
Damit der Name für das Copyright im Footer der Seite mit dem Seitentitel übereinstimmt, sollte er noch angepasst werden. Sie editieren dazu wiederum die Datei „config.txt“ im Ordner „fileadmin/ templates/logistix/typoscript/“ und ändern den String im Typoscript wie folgt:
temp.copyright = TEXT
temp.copyright {
data = date : U
strftime = %Y
wrap = Copyright © | Logistix Workshop.
}
Listing 6
Speichern Sie die Datei und löschen im Backend den Seitencache. Anschließend sehen Sie die Seite in der Vorschau an. Das Copyright entspricht nun unserer Webseite, das Datum wird jeweils dynamisch von TYPO3 angepasst.
Meta-Tags für die Suchrobots
Damit die Site auch mit den richtigen Schlüsselwörtern von den Suchmaschinenrobots indiziert wird, müssen die Meta-Tags angepasst werden. Dazu editieren Sie die Datei „setup.txt“ erneut und fügen die gewählten Schlüsselwörter ein.
page.meta.DESCRIPTION = Site Logistix page.meta.KEYWORDS = Typo3, Workshop, TemplateListing 7
Nach dem Löschen des Seitencache erscheinen im Seitenquelltext die eingetragenen Meta Tags.
Fazit
TYPO3 ist in Verbindung mit TypoScript sehr flexibel. Um die vielfältigen Möglichkeiten besser zu verarbeiten, ist Experimentieren durchaus der beste Weg. Außerdem macht es Spaß, immer neue Funktionen zu entdecken und sie umzusetzen. Zwar sind die ersten Schritte schwierig, doch es gibt zahlreiche hilfreiche Anleitungen im Web.
Gerhard Rasi ist seit mehreren Jahren im Info Center einer schweizerischen Stadtverwaltung tätig. In seiner Freizeit beschäftigt er sich seit TYPO3 Version 3.5 fast jede freie Minute mit diesem CMS. Auf seiner Website http://www.rasi.ch sind nützliche Tipps in einer Datenbank zu finden. Fragen zu diesem Artikel können unter typo3@rasi.ch gestellt werden.
