Marker und Subparts

Integration von Inhalten in ein Template

Damit der Inhalt mit dem Design der Webseite zusammengefügt werden kann, ist es notwendig ein Template zu integrieren. TYPO3 liefert als Vorlage einige Templates mit aus. Meist ist es jedoch erwünscht ein eigenes individuelles Template zu erzeugen. In TYPO3 gibt es mehrere Möglichkeiten Templates zu erzeugen.


1.) TypoScript Templates

Es ist möglich mit TypoScript komplette Templates zu erzeugen. TypoScript ist eine TYPO3 interne Konfigurationssprache, die es erlaubt gewisse Einstellungen in TYPO3 vorzunehmen. Technisch gesehen werden in TypoScript gemachte Einstellungen in PHP Arrays überführt und können im Quelltext von TYPO3 und Erweiterungen genutzt werden. Die Möglichkeiten von TYPO3Script gehen jedoch viel weiter, so ist es z.b. möglich Textausgaben von Extensions in Grafiken zu konvertieren. Die TypoScript Referenz ist unter folgendem Link zu finden.


2.) Templates aus HTML Vorlagen

Da das Erzeugen von kompletten Templates mit TypoScript sehr aufwendig währe, gibt es die Möglichkeit Templates aus HTML Dateien auszulesen.


In dem HTML Template werden Marker und Subparts eingefügt, um später ersetzt zu werden. Ein Marker ist ein Text welcher mit ### beginnt und endet.


Bsp:

###TESTMARKER###

Ein Subpart besteht aus zwei HTML Kommentaren, die wie Marker aussehen, jedoch noch den Zusatz ?start und end? enthalten und als Kommentare auch dann nicht sichtbar sind, wenn sie nicht ersetzt werden.

 

Bsp:

<!-- ###DOCUMENT_BODY### START--> 
<!-- ###DOCUMENT_BODY### END--> 

Die HTML Datei wird im Templatedatensatz eingebunden. Über TypoScript lassen sich Subparts und Marker ansprechen und durch Inhalte ersetzen.


Die beiden Templatearten lassen sich kombinieren. In der Regel wird für das Rahmenlayout eine HTML Vorlage verwendet und für einzelne Passagen der Seite TypoScript Templates. Da sich in ein Template andere Templates integrieren lassen, ist es möglich häufig genutzte Teiltemplates in ein eigenes Template auszulagern und so mehrfach zu verwenden.

HTML Templatevorlagen verwenden

In den nächsten Schritten werde ich ein ganz einfaches Template erstellen und Schritt für Schritt in TYPO3 umsetzen. Als erstes ist eine HTML Seite mit einem Wysiwyg Editor wie "NVU" oder einem normalen Editor in HTML zu erstellen, die als Vorlage für das Template dient.


Es wurde für dieses Beispiel ein Template vorbereitet, es basiert auf einem Layout mit "DIV" Tags, einem CSS und einem Logo. In die einzelnen Bereiche soll später TYPO3 die Inhalte einfügen.


Dazu muss als erstes der Quelltext des Templates angepasst werden. Die einzelnen Bereiche die später ersetzt werden sollen müssen durch Subparts und Marker ausgewiesen werden.


Im linken Bereich soll die Navigation erscheinen, die über den Subpart MENU angesprochen werden soll. Im rechten Bereich soll der Inhalt erscheinen. Außerdem soll im oberen orangen Layer eine Rootline Navigation eingefügt werden, damit der Besucher später weiss, wo er sich gerade auf der Webseite befindet.


Der Tag mit dem vorher das Bild eingebaut wurde, wurde mit einem Marker (###LOGO###) ersetzt.


Aufbau des HTML Templates nach Einbau von Markern und Subparts


Damit der Browser das Layout so umsetzt wie gewünscht, ist ebenfalls ein CSS File notwendig. Dies hat folgenden Aufbau:


Aufbau der CSS Datei


Nachdem alle Vorbereitungen getroffen sind kann das Template in das TYPO3 System übernommen werden.

Templatesetup mit TypoScript

Um ein Template in TYPO3 anzulegen und einzubinden ist in der Backendnavigation der Menüpunkt "Web -> Template" zu wählen. Für dieses Beispiel ist im Pagetree die Startseite auszuwählen. Im rechten Bereich des Backends ist der Button "Create Template for a New Site" auszuwählen, oder falls schon ein Template existiert "Click here to Edit the whole template record".


Im Formular für das Template sind folgende Einträge zu machen:


Template title:

Geben sie hier einen aussagekräftigen Titel ein. Anhand diesen Titels ist das Template später im Backend zu sehen.


Contants:

In diesem Feld können Konstanten definiert werden, auf diese Konstanten kann später im Setupfeld zugegriffen werden.


Setup:

Dieses Feld ist das wichtigste Feld im Templatedatensatz. In diesem Feld erfolgt die Konfiguration des Templates mit TypoScript. Für das Beispiel ist folgende Konfiguration notwendig, Kommentare zu den einzelnen Zeilen beginnen mit #:

#Erzeugen eines Pageobjekt in "page"
page = PAGE

#Zuweisen des Sytlesheet Files 
page.stylesheet = style.css

#Typ der Seite ist 0, hiermit können verschiedene 
#Typen ausgewählt werden z.b. für eine Druckansicht
page.typeNum = 0

page.10 = TEMPLATE

#Template ist eine Datei 
page.10.template = FILE

#Der Dateiname ist template.html
page.10.template.file = template.html

#Den Subpart DOCUMENT BODY bearbeiten
page.10.workOnSubpart = DOCUMENT_BODY

#Innerhalb von Documtent Body weitere Subparts bearbeiten
page.10.subparts {
	#Der Subpart CONTENT wird mit 
        #der Ausgabe von styles.content.get ersetzt
	#dies entspricht der mittleren Contentspalte 
	CONTENT < styles.content.get
	
	#Der Subpart MENU ist ein hierachisches Menü 
	MENU = HMENU 

	#Die 1. Ebene des Menüs ist ein Textmenü
   	MENU.1 = TMENU
   	MENU.1 {
		NO = 1
		#Die Einträge werden umschlossen von 
                #<div class="level1"> </div> 
   		NO.allWrap = <div class="level1"> | </div> 
   	} 
   	
	#Die 2. Ebene ist ebenfalls ein Textmenü
   	MENU.2 = TMENU
   	MENU.2 {
		NO = 1
		#Die Einträge werden umschlossen 
                #von <div class="level2"> </div> 
   		NO.allWrap = <div class="level2"> | </div> 
   	} 
}

#An dieser Stelle werden die Marker 
#im Template (page.10) bearbeitet

page.10.marks{
	#Der Marker LOGO ist ein Bild
	LOGO = IMAGE

	#Die Datei für das Bild ist die 
        #Datei logo-typo3.gif
	LOGO.file = logo-typo3.gif
	
	#Der Marker Rootline ist ein hierachisches Menü
	ROOTLINE = HMENU
	ROOTLINE.special=rootline
	ROOTLINE.special.range= 0 | -1
	ROOTLINE.1=TMENU

	#Die einzelnen Einträge werden durch Slashes getrennt
	ROOTLINE.1.NO.allWrap= |   /   |*| |   /   |*| |
}

Ressource:

 

In diesem Feld werden Ressourcen angegeben die im Template verwendet werden, diese können aus den Filemounts ausgewählt werden oder direkt hochgeladen werden. In diesem Beispiel werden die Dateien "template.html", "style.css" und "logo-typo3.gif" hochgeladen.

 

Rootlevel:

In diesem Feld ist ein Haken zu setzen da dieses Template ein Template in der 1. Ebene ist.

 

Include Static:

In diesem Feld ist "content (default) und styles.content (default)" auszuwählen.


Description:

In diesem Feld sollte ein Beschreibung des Templates eingetragen werden, damit andere es später leichter haben das Template zu verstehen.

Navigation