TYPO3 (Teil 31): Designvorlagen (1)

In TypoScript muss zwischen den beiden Begriffen Templates und Designvorlagen unterschieden werden. Bei einer Designvorlage handelt es sich eigentlich um eine herkömmliche HTML-Datei. Ihre einzige Besonderheit sind die darin definierten Platzhalter. Die Designvorlage bildet die Basis jeder TYPO3-basierten Webseite. (Es gibt zwar auch die Möglichkeit, Designvorlagen zu umgehen, dann müsste man allerdings den gesamten HTML-Code mittels TypoScript schreiben, was zu aufwendig und unübersichtlich ist). In diesem Tutorial wird gezeigt, was es mit Designvorlagen auf sich hat und wie man diese erstellen kann. Dabei werden die beiden Dinge vorgestellt, die für die Arbeit mit Designvorlagen entscheidend sind: Platzhalter und Teilbereiche.

Wir empfehlen:
TYPO3 CMS-Training

Erfahrungsgemäß gibt es immer wieder Unklarheiten im Zusammenhang mit den Begrifflichkeiten in TypoScript. Hier begegnen einem nämlich immer wieder die beiden Begriffe Templates und Designvorlagen. In vielen Beschreibungen taucht der Begriff Designvorlagen überhaupt nicht auf oder aber wird direkt mit den Templates gleichgesetzt. Beides ist prinzipiell falsch. Wie beschrieben, handelt es sich bei einer Designvorlage um eine HTML-Datei, in der Platzhalter definiert sind. (Tatsächlich gehören zur Designvorlage noch Bilder, CSS-Dateien usw., dazu dann aber später mehr).

Anders sieht es bei den Templates aus. Bei denen handelt es sich um dynamische Seitendefinitionen. Ausführliche Informationen zu den Templates gibt es selbstverständlich im Rahmen dieser TYPO3-Reihe. An dieser Stelle geht es aber zunächst um die Designvorlagen.

Um Sinn und Zweck von Designvorlagen zu verstehen, muss man zunächst einmal wissen, dass in TYPO3 zwischen statischen und dynamischen Inhalten bzw. Elementen unterschieden wird. Hier einige typische statische Elemente:

• Grafiken können statisch eingebunden werden. Das gilt für solche Grafiken, die man üblicherweise nicht verändert. Denkt hier beispielsweise an ein Logo usw.
• Slider kann man ebenfalls statisch einbinden.

Was sind dann alles dynamische Elemente?

• Ein Newsbereich
• Textmenüs
• Textlinks zur Druckvorschau
• Der eigentliche Content-Bereich

Die statischen Elemente werden fest in der Designvorlage verankert. Alles das, was dynamisch eingebunden werden soll, definiert man in der Designvorlage über Platzhalter. Diese Platzhalter werden von TYPO3 automatisch durch die dynamischen Inhalte ersetzt. In TYPO3 gibt es zwei verschiedene Arten Platzhalter, nämlich klassische Platzhalter und Teilbereiche. Beide Varianten werden in diesem Tutorial vorgestellt.

Platzhalter

Das Prinzip, mit Platzhaltern zu arbeiten, ist keine TYPO3-Erfindung, sondern ist so auch in anderen Bereichen – denkt an Template-Engines – anzutreffen. Platzhalter werden in TYPO3 üblicherweise großgeschrieben und in jeweils drei Rautezeichen eingeschlossen. Eine typische Platzhalter-Definition sieht also folgendermaßen aus:

###Inhalt###

Die drei Rautezeichen sind dabei Pflicht, die Großschreibung hingegen nur gute TYPO3-Sitte. Aber auch wenn die Großschreibung keine Pflicht ist, solltet ihr sie trotzdem verwenden. Denn dank derer findet man sich in den Designvorlagen schneller zurecht.

Teilbereiche

Das Gegenstück zu den Platzhaltern sind die Teilbereiche. Warum gibt es aber eigentlich ein solches Gegenstück? Tatsächlich wird die Designvorlage von TypoScript eingelesen, wobei die Platzhalter automatisch durch dynamische Inhalte ersetzt werden. Das Problem dabei: Bei jeder Ausgabe wird von TYPO3 immer ein eigener head-Bereich der Seite generiert und ausgegeben. Wie problematisch das ist, zeigt ein erster Blick auf die Designvorlage.

<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>Elektro</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="wrapper">
  <div id="top">
    <h2 class="logo"><a href="#" title="Elektro">Elektro</a></h2>
    <div id="topnvav"> ###MENU_OBEN### </div>
    <br class="clear" />
  </div>
  <div id="content">
    <div class="content_left"> ###INHALT###
      <div class="content_right"> ###MENU_LINKS###
        <div> </div>
      </div>
      <br class="clear" />
    </div>
  </div>
 </div>
 <div id="footer"> ###FUSSBEREICH### </div>
 </body>
 </html>

 

So könnte eine typische Designvorlage aussehen. (Ausführliche Informationen zu deren Aufbau gibt es dann im nächsten Tutorial).

 

Wird diese nun unverändert von TYPO3 eingelesen, kommt es im Frontend-Quellcode zu einem HTML-Fehler. Der gesamte Quellcode sähe dann nämlich folgendermaßen aus:

<!DOCTYPE html>
 <!--[if lt IE 7]> <html class="no-js ie6 oldie"> <![endif]-->
 <!--[if IE 7]> <html class="no-js ie7 oldie"> <![endif]-->
 <!--[if IE 8]> <html class="no-js ie8 oldie"> <![endif]-->
 <!--[if gt IE 8]> <!--><html class="no-js ie6 oldie"> <!--<![endif]-->
 <head>
 <meta charset="utf-8">
 <!-- 
 <!--
 This website is brought to you by TYPO3 - get.content.right
 [...]
 -->
 [...]
 </head>
 <body bgcolor="#fff">
 <!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>Elektro</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="wrapper">
  <div id="top">
    <h2 class="logo"><a href="#" title="Eleketo">Elektro</a></h2>
    <div id="topnvav"> ###MENU_OBEN### </div>
    <br class="clear" />
    ...
 </body>
 </html>
 </body>
 </html>

 

Wie ihr seht, gibt es in dieser Ergebnissyntax zwei Kopfbereiche.

Das Problem lässt sich auf zweierlei Art lösen. Zunächst einmal könntet ihr natürlich die Designvorlage ohne die Informationen bereitstellen, die ohnehin von TYPO3 ausgegeben werden. Ihr würdet also tatsächlich ausschließlich den Inhalt des body-Elements in die Designvorlage aufnehmen. Meistens wird allerdings zu einem anderen "Trick" gegriffen. Bei dem kommen die Teilbereiche zum Einsatz.

 

Zunächst ein Blick auf die entsprechende Designvorlage, die nun mit einem solchen Teilbereich ausgestattet wurde.

<!DOCTYPE html>
 <head>
 <meta charset="utf-8">
 <title>Elektro</title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <!-- ###DOKUMENT### anfang -->
 <div id="wrapper">
  <div id="top">
    <h2 class="logo"><a href="#" title="Eleketo">Elektro</a></h2>
    <div id="topnvav"> ###MENU_OBEN### </div>
    <br class="clear" />
  </div>
  <div id="content">
    <div class="content_left"> ###INHALT###
      <div class="content_right"> ###MENU_LINKS###
        <div> </div>
      </div>
      <br class="clear" />
    </div>
   </div>
 </div>
 <div id="footer"> ###FUSSBEREICH### </div>
 <!-- ###DOKUMENT### ende -->
 </body>
 </html>

Wie das Beispiel zeigt, ist in dieser Syntax der Teilbereich ###DOKUMENT### neu hinzugekommen. Dadurch kann man TYPO3 später über TypoScript mitteilen, dass die Designvorlage sich quasi nur auf den Part beschränkt, der sich innerhalb dieses Teilbereichs befindet.

 

Teilbereiche werden ähnlich definiert wie Platzhalter.

<strong>
 ###INHALT###
 <p>Hier steht der Inhalt</p>
 ###INHALT###
 </strong>

In diesem Fall lautet der Name des Teilbereichs ###INHALT###. Der Inhalt des Teilbereichs wird später durch TYPO3 mit den gewünschten Inhalten ersetzt. Bei der Definition von Teilbereichen gibt es jedoch augenscheinlich ein Problem. Zwar gibt es einen einleitenden und einen abschließenden Marker, diese sind allerdings identisch geschrieben. Gerade dann also, wenn Dateien sehr umfangreich sind, wird es schnell unübersichtlich. Beheben lässt sich dieses Problem durch den Einsatz von HTML-Kommentaren. Das folgende Beispiel zeigt, wie sich so etwas umsetzen lässt.

<strong>
 <!-- ###INHALT### anfang-->
 <p>Hier steht der Inhalt</p>
 <!-- ###INHALT### ende-->
 </strong>

Der Teilbereich ist in einen HTML-Kommentar eingebettet. Innerhalb des Kommentars können dann beispielsweise zusätzliche Dinge wie eben anfang und ende geschrieben werden, was noch einmal die Übersichtlichkeit der Anwendung erhöht.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training