Mit Designvorlagen wird normalerweise das Grundlayout einer Website festgelegt. Wie bei anderen Content-Management-Systemen kommen auch in TYPO3 Platzhalter zum Einsatz. Sie lassen sich in Form von Markierungen (Markern) oder Abschnitten (Subparts) in die Designvorlage einfügen, um später automatisch durch die entsprechenden Inhalte ersetzt zu werden. Immer wieder gibt es Unklarheiten in Hinsicht auf die beiden Begriffe Templates und Designvorlagen. Bei einer Designvorlage handelt es sich in den meisten Fällen um eine normale HTML-Datei. Ihre Besonderheit gegenüber diesen ist jedoch die Verwendung von Markern wie zum Beispiel „###INHALT###“, um später Inhalt der Website dynamisch in das Seitenlayout zu platzieren.

Das Designvorlagen-Konzept

Grundsätzlich wird bei Websites, die auf TYPO3 basieren, zwischen statischen und dynamischen Elementen unterschieden. Typische statische Elemente sind:

• Tabellenstruktur für die Definition des Grundlayouts (sollte allerdings durch CSS ersetzt werden)
• Grafiken, die an vielen Stellen zum Einsatz kommen (können ebenso statisch definiert sein, empfehlenswert z. B. bei Logos)

Zu den dynamischen Elementen zählen:

• Textlink zur Druckversion
• Textmenü
• Newsbereich

Der Unterschied zwischen statischen und dynamischen Elementen liegt also im Wesentlichen darin, dass sämtliche statische Elemente fest in die HTML-Datei kodiert werden und der Rest über Platzhalter durch das Content-Management-System bei der Generierung der Seite über das TS-Template einfließt.

Die Platzhalter werden später im Frontend automatisch ersetzt.

Es gibt grundsätzlich zwei unterschiedliche Arten von Platzhaltern: Marker und Subparts. Obwohl beide Platzhalterarten eine ähnliche Syntax verwenden, wurden diese für unterschiedliche Einsatzzwecke konzipiert. Mittlerweile ist es in TYPO3 allgemein anerkannt, dass Bezeichner ausschließlich in Großbuchstaben geschrieben werden. Dies scheint insofern sinnvoll, da durch diese Vorgehensweise die Platzhalter im Quelltext schneller auffindbar sind und eine falsche Zuordnung durch TYPO3 ausgeschlossen wird. Bei der Namensgebung von Markern und Subparts sollte weiterhin darauf geachtet werden, auf Sonderzeichen und Umlaute zu verzichten.

Marker

Marker sind Platzhalter, die stets als einzelnes Element vorkommen. Ein typischer Marker ist nach folgendem Schema aufgebaut:

<strong>###INHALT###</strong>

Durch diese Syntax würde der Marker „###INHALT###“ später von TYPO3 durch ein entsprechendes TS-Template, zum Beispiel mit der Zeichenfolge „Hallo, Welt!“, ersetzt werden:

<strong>Hallo, Welt!</strong>

Subparts

Platzhalter in Form von Subparts sind ähnlich aufgebaut wie Marker, müssen jedoch stets im „Doppelpack“ verwendet werden:

<strong>
   ###INHALT###
      Hallo, Welt! wird durch einen anderen Inhalt ersetzt 
   ###INHALT### 
</strong>

Subparts sind dadurch gekennzeichnet, dass ein einleitender und ein abschließender Marker zum Einsatz kommen. Beide sind in der Regel so platziert, dass der Inhalt zwischen ihnen bei der Verarbeitung durch das TS-Template komplett dynamisch ersetzt wird.

HTML-Kommentare, Marker und Subparts

Ein Problem der oben beschriebenen Subparts liegt auf der Hand: Zwar gibt es einen einleitenden und einen abschließenden Marker, diese sind jedoch von ihrer Schreibweise identisch und in ihrer Funktion schwer zu unterscheiden, wenn mehrere Platzhalter in einer Datei zwischen statischen Inhalten definiert sind. So würde schnell die Übersichtlichkeit verloren gehen, gäbe es nicht die Möglichkeit sämtliche Subparts mit HTML-Kommentaren zu kennzeichnen:

<strong> 
   <!-- ###INHALT### Anfang--> 
      Hallo, Welt! wird durch einen anderen Inhalt ersetzt 
   <!-- ###INHALT### Ende--> 
</strong>

Dieses Beispiel erfüllt den gleichen Zweck wie zuvor, macht jedoch einen aufgeräumteren Eindruck und ist leichter zu handhaben. Ein weiterer Vorteil: Ebenso wie die Subparts werden auch die HTML-Kommentare von TYPO3 bei der Weiterverarbeitung vollständig entfernt.

Bei Markern funktioniert das Auszeichnen mit HTML-Kommentaren jedoch nicht. Wer folglich seinen Marker auf folgende Art verfeinern möchte, wird wenig Freude daran haben:

<strong><!-- Anfang ###INHALT### - Ende-></strong>

Ein so ausgezeichneter Marker würde nichts anderes als einen herkömmlichen HTML-Kommentar erzeugen. Die Existenz dieser offensichtlich vermeidbaren Fehlerquelle führt zwangsläufig zu der Frage, warum nicht immer Subparts eingesetzt werden. Wer das möchte, kann dies ohne Bedenken tun. Denn Subparts haben einen weiteren Vorteil: Sie lassen sich wie ganz normale HTML-Elemente per CSS formatieren. So bekommen Sie bereits beim Betrachten der Designvorlage ein Gefühl dafür, wie die fertige Seite letztendlich aussehen wird. Ganz anders ist das bei Markern, die doch etwas abstrakt wirken. In folgender Designvorlage wird mit den Markern „###MENU###“ und „###NEWS###“ gearbeitet. So kann man sich nur schlecht vorstellen, wie später die Seite gestaltet sein wird. Wie es anders geht, zeigt der exemplarisch eingefügte Subpart:

<span class="subtitle"> 
   <!-- ###HEADER### --> 
      An diese Stelle kommt später die Überschrift 
   <!-- ###HEADER### --> 
</span>

Der Inhalt des Subparts wird im Browser in einer gewohnten Form angezeigt und es ist auf den ersten Blick ersichtlich, wie die Seite später einmal aussehen wird. Bei der Verarbeitung der Designvorlage durch TYPO3 und TypoScript wird dieser Subpart jedoch genauso dynamisch ersetzt wie ein vergleichbarer Marker.

Der doppelte Head-Bereich

Bei der Erstellung der Designvorlage ist zu der Wahl des Platzhaltertyps zusätzlich ein wichtiger Aspekt zu beachten. Als Beispiel sei folgende Designvorlage aufgeführt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
   <title>Hallo, Welt!</title> 
   <link xhref="css/css.css" rel="stylesheet" type="text/css" /> 
  </head> 
  <body> 
    <h1> 
     <!-- ###FETT### --> 
      Überschrift oben 
     <!-- ###FETT### --> 
    </h1> 
    <div>###NEWS###</div> 
  </body> 
 </html>

Wird diese Designvorlage nach der Verarbeitung durch ein TS-Template im TYPO3-Frontend aufgerufen, führt dies zu einem HTML-Fehler. Ein Blick in den Quellcode der erzeugten Ausgabe lässt Folgendes hervorscheinen:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
[...] 
</head> 
<body bgcolor="#FFFFFF"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Hallo, Welt!</title> 
<link xhref="css/css.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<h1> 
<!-- ###FETT### --> 
Überschrift oben 
<!-- ###FETT### --> 
</h1> 
<div>###NEWS###</div> 
</body> 
</html> 
</body> 
</html>

Der Quelltext wurde aus Platzgründen gekürzt. Dennoch sind zwei Probleme erkennbar: Das generierte HTML-Dokument besitzt zwei Head-Bereiche sowie zwei <body>-Tags. Dies liegt im Wesentlichen darin begründet, dass TYPO3 die Designvorlage bis zum ersten <body>-Tag durch TYPO3-eigene Definitionen ersetzt und erst anschließend die Designvorlage einliest. Ein weiterer Subpart mit den Namen „BODY_INHALT“ schafft hier Abhilfe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Hallo, Welt!</title> 
      <link xhref="css/css.css" rel="stylesheet" type="text/css" /> 
   </head> 
<body> 
   <!-- ###BODY_INHALT### --> 
      <h1> 
         <!-- ###FETT### --> 
         Überschrift oben 
         <!-- ###FETT### --> 
      </h1> 
      <div>###NEWS###</div> 
   <!-- ###BODY_INHALT### --> 
</body> 
</html>

Der Subpart „###BODY_INHALT###“ wird innerhalb des <body>-Tags notiert. Später können Sie dann per TypoScript festlegen, dass die Designvorlage sich nur über diesen Bereich erstrecken soll. Beim Zusammenfügen des TYPO3-Grundgerüsts mit der Designvorlage werden somit alle Elemente, die sich „außerhalb“ des Subparts „###BODY_INHALT###“ befinden, nicht mit eingelesen.

Was sind TypoScript-Templates?

Der Begriff des „Templates“ dürfte aus anderen CM-Systemen bekannt sein. Das Grundprinzip von TS-Templates ist aber ein wenig anders und birgt weiterführende Funktionen. Mit TypoScript steht eine TYPO3-eigene Sprache zur Verfügung, die es unter anderem auf einfachste Weise ermöglicht, Designvorlagen mit dynamischen Inhalten aus der Datenbank zu verknüpfen.

Aufgaben von Typoscript

Wie wichtig Typoscript für TYPO3 ist, lässt sich am einfachsten daran festmachen, dass es ohne TypoScript nicht möglich wäre, eine Ausgabe aus einem TYPO3-Projekt anzuzeigen. Folgende Aufgaben werden von TS-Templates übernommen:

• Einbinden von Designvorlagen
• Definition der Seiteneigenschaften
• Erzeugung von Menüs
• dynamisches Generieren von Bildern
• Einbinden von Erweiterungen

Hallo, Welt!

TS-Templates lassen sich über das Modul „Templates“ anlegen und verwalten. Wird dieses Modul innerhalb eines Projekts das erste Mal aufgerufen, werden auf der rechten Bildschirmseite noch keine Templates angezeigt. Ein Klick auf den Button „Create template for a new site“ legt ein TS-Template mit dem Namen „NEW SITE“ an, der später beliebig verändert werden kann. Ein Aufruf der TYPO3-Seite fördert ein „HELLO WORLD!“ zu Tage.

Mehr als „Hallo, Welt!“

Zum besseren Verständnis von TS-Templates soll es nun darum gehen das angelegte TS-Template spezifisch anzupassen. Den Einstieg macht wieder einmal das klassische „Hallo, Welt!“. Legen Sie unter „fileadmin/_temp_/“ die Datei „hallo.htm“ mit folgendem Inhalt an:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Hallo, Welt!</title> 
   </head> 
<body> 
   <!-- ###BODY_INHALT### --> 
      <strong> 
         <!-- ###FETT### --> 
            Wird dieser Text wohl ausgegeben? 
         <!-- ###FETT### --> 
      </strong> 
   <!-- ###BODY_INHALT### --> 
</body> 
</html>

Rufen Sie das Feld „Setup“ des Template-Datensatzes auf und tragen Sie dort den folgenden Code ein:

</p><pre>TSS
temp.mainTemplate = TEMPLATE 
temp.mainTemplate{ 
	template = FILE 
	template.file = fileadmin/_temp_/hallo.htm 
	} 
page = PAGE 
page.typeNum = 0 
page.10 < temp.mainTemplate

Über das „FILE-Objekt“ wird die zuvor erstellte Datei „hallo.htm“ eingelesen. Allerdings ist bei einem erneuten Aufruf der Seite im Browser keine besondere Änderung sichtbar: Es erscheint lediglich der Satz „Wird dieser Text wohl ausgegeben?“ Auch der Blick in den Quellcode der erzeugten HTML-Datei verrät, dass diese in ihrer Ursprungsform angezeigt wird. Genau hier kommt eine Besonderheit des „TEMPLATE-cObjects“ zum Vorschein: Mit seiner Hilfe können HTML-Dateien nicht nur eingelesen, sondern auch einzelne Bereiche daraus extrahiert und mit dynamischen Inhalten ersetzt werden. Ändern Sie dazu den Inhalt des Setup-Felds wie folgt:

temp.mainTemplate = TEMPLATE 
temp.mainTemplate { 
   template = FILE 
   template.file = fileadmin/_temp_/hallo.htm 
   workOnSubpart = BODY_INHALT 
   subparts.FETT = TEXT 
   subparts.FETT.value = Hallo, Welt! 
} 
# Default PAGE object: 
page = PAGE 
page.typeNum = 0 
page.10 < temp.mainTemplate</pre>

Sobald diese Datei im Browser aufgerufen ist, sehen Sie, dass der dynamische Inhalt „Hallo, Welt!“ eingefügt wurde. Auch ein Blick in den Quellcode zeigt die Veränderungen:

<body style="background-color:#ffffff"> 
<strong> 
      Hallo, Welt! 
   </strong> 
</body>

Die Quelltext-Anpassungen sind deutlich: Das Template-Objekt „mainTemplate“ erhielt die Anweisung mit dem „###BODY_INHALT###“-Abschnitt zu arbeiten. Außerdem wird festgelegt, dass der Subpart „###FETT###“ durch ein TEXT-Object zu ersetzen ist.

Vererbung und TypoScript

Sicherlich kennen Sie das Prinzip der Vererbung aus CSS. Dort werden Stildefinitionen, die für ein Element festgelegt sind, auch auf die untergeordneten Elemente angewendet. Wie das funktioniert, soll folgendes Beispiel zeigen:

body {  
   font-family: Verdana, SunSans-Regular, Sans-Serif;  
   color: #000;  
   background-color: #fff;  
}

Für das <body>-Tag definieren Sie Schriftart, Schriftfarbe und Hintergrundfarbe. Schriftart und Schriftfarbe gehören hierbei zu den CSS-Eigenschaften die vererbt werden. Es reicht also diese Eigenschaften im „<body>“ festzulegen, da anschließend die Vererbung an alle weiteren Unterelemente erfolgt.

h2 {  
   color: #f00;  
   background-color: transparent;  
}

Die Schrift der Überschriftenordnung „h2“ wird in der gleichen Schriftart dargestellt wie ursprünglich im <body>-Tag definiert. Lediglich eine andere Farbe ist hinzugekommen. Gerade bei umfangreichen Stylesheet-Definitionen spart man sich so mehrfache Deklarationen. Alle TS-Anweisungen werden ebenfalls innerhalb einer Seite vererbt und gelten somit nicht nur für die aktuelle, sondern auch für alle untergeordneten Seiten.

Designvorlagen einbinden

Um Designvorlagen nutzen zu können, sind eigentlich nur zwei Schritte nötig:

• die Designvorlage wird eingebunden
• die Marker und Subparts werden angesprochen

Alternativ existieren weitere Wege, Templates zu erzeugen. So ist es zum Beispiel möglich, reine TypoScript-Templates zu erstellen oder die von TYPO3 bereitgestellten Standard-Templates anzupassen.

Designvorlagen ansprechen

Nachdem eine Designvorlage existiert, muss eine Verbindung zum Template hergestellt werden. Generieren Sie dazu eine neue Designvorlage mit folgendem Inhalt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
   <head> 
      <title>Hallo, Welt!</title> 
      <link xhref="css/css.css" rel="stylesheet" type="text/css" /> 
   </head> 
   <body> 
      <!-- ###BODY_INHALT### --> 
         <h1> 
            <!-- ###FETT### --> 
            Überschrift oben 
            <!-- ###FETT### --> 
         </h1> 
         <div>###NEWS###</div> 
      <!-- ###BODY_INHALT### --> 
   </body> 
</html>

Diese Datei können Sie nun unter dem Namen „hallo.htm“ im Verzeichnis „fileadmin/_temp_/“ ablegen. Erzeugen Sie anschließend im Verzeichnis „fileadmin/css“ die Datei „css.css“ mit folgendem Inhalt:

h1 { 
   font-family : Georgia, "Times New Roman", Times, serif;  
   font-size : 16px;  
   line-height : 12px;  
   font-weight : bold;  
   color : #660000;  
}  

div { 
   font-size : 12px;  
   color : #213c4d;  
   font-style : normal;  
   font-family : Verdana, Arial, Helvetica, sans-serif;  
}

Über diese CSS-Datei werden die beiden Elemente „<h1>“ und „<div>“ formatiert. Die Datei „hallo.htm“ lässt sich jetzt statisch im Browser aufrufen.

Die Formatierungen werden übernommen.

Auf diese Weise lässt sich die Designvorlage nochmals vorab kontrollieren. Wenn alles in Ordnung ist, geht es an die eigentliche TypoScript-Template-Erstellung. Rufen Sie dazu das Template-Modul im TYPO3-Backend auf und tragen Sie in das Feld „Setup“ Folgendes ein:

temp.mainTemplate = TEMPLATE 
temp.mainTemplate { 
   template = FILE 
   template.file = fileadmin/_temp_/hallo.htm 
} 
page = PAGE 
page.typeNum = 0 
page.10 < temp.mainTemplate

Über diesen TypoScript-Code wird die Designvorlage in das Template eingebunden. Herzstück ist hierbei das „FILE-Objekt“, über das sich der Inhalt einer Datei laden lässt. Da es sich in diesem Fall um eine Text- bzw. HTML-Datei handelt, wird deren Inhalt an der zugewiesenen Position ausgegeben. Dazu müssen Sie über die Eigenschaft „file“ den Pfad zur Datei festlegen. Ausgangspunkt für die Pfadangabe ist das „typo3/“-Verzeichnis.

Die angesprochene Designvorlage nach dem Aufruf im Template.

Der Inhalt der Seite wird zwar angezeigt, allerdings fällt auf, dass die Stylesheets entfernt wurden. Das liegt an dem schon erwähnten Problem mit den zwei Head- und Body-Bereichen, die standardmäßig eingefügt werden.

Subparts ansprechen

Im Zusammenhang mit Designvorlagen wurde bereits auf das Problem des doppelten Headers aufmerksam gemacht. Als Lösung hierfür bot sich der Subpart „###BODY_INHALT###“ an. TypoScript kann jetzt nämlich angewiesen werden, die Designvorlage auf den Inhalt des Subparts „###BODY_INHALT###“ zu reduzieren:

[...]
page = PAGE 
page.typeNum = 0 
page.10 < temp.mainTemplate 
page.10.workOnSubpart = BODY_INHALT

Beim Aufruf der Seite im Frontend ist gleich zu erkennen, dass tatsächlich nur noch ein „<head>-Bereich“ existiert. Das führt allerdings zu einem neuen Problem, denn nach dem Aufruf im Frontend wird die Seite unformatiert angezeigt. Ein Blick in den Quellcode offenbart warum: Der Verweis auf die Stylesheet-Datei, der sich in der Designvorlage befand, ist durch die Einschränkung auf den Subpart „###BODY_INHALT###“ nicht mehr vorhanden.

Ein Stylesheet einbinden

Um das Stylesheet anzuwenden, binden Sie es über die Eigenschaft „stylesheet“ des „PAGE-Objekts“ erneut ein. Dazu wird der Eigenschaft „stylesheet“ des Page-Objekts der Pfad zur CSS-Datei zugewiesen:

[...]
page = PAGE 
page.typeNum = 0 
page.10 < temp.mainTemplate 
page.stylesheet = fileadmin/_temp_/css/css.css 
page.10.workOnSubpart = BODY_INHALT

Sobald diese Seite nun im Frontend aufgerufen wird, werden die Formatierungen wie im Stylesheet deklariert dargestellt. Der Quelltext zeigt folgende Verbindung zum Stylesheet:

<link rel="stylesheet" type="text/css" xhref="fileadmin/_temp_/css/css.css" />

Bislang erscheint der Marker „###NEWS###“ unverändert im Frontend – so wie er innerhalb der Designvorlage definiert wurde. Das soll sich nun ändern, indem im ersten Schritt „###NEWS###“ per TypoScript durch den Text „Neuigkeiten gibt es“ ersetzt wird:

[...]
page.10.marks.NEWS= TEXT 
page.10.marks.NEWS.value = Neuigkeiten gibt es auch

Über die Eigenschaft „marks“ wird der Marker der Designvorlage angesprochen. Hier muss zuerst angegeben werden, welcher Platzhalter betroffen ist. Anschließend wird das Objekt bestimmt, das auf diesen Platzhalter angewendet werden soll. Im gezeigten Beispiel handelt es sich bei „marks.News“ um ein TEXT-Objekt, dem über die Eigenschaft „value“ die Zeichenkette „Neuigkeiten gibt es auch“ zugewiesen wird.

Fazit

Dieser Artikel sollte Ihnen einen Einblick gegeben haben, wie Sie eigene Designs in TYPO3 umsetzen können. Neben normalen Designvorlagen und TypoScript-Templates gibt es in diesem Bereich aber auch noch andere interessante Konzepte. So wird zum Beispiel die XML-basierte TemplaVoilà-Extension immer beliebter.