Zum Inhalt springen

TypoScript-Templates übersichtlich gestalten

Erstellt am 10. September 2007 · Noch keine Antworten

Tags: Tipp

Unbekannter Benutzer ·

TypoScript-Templates übersichtlich gestalten

Jeder fängt mal klein an, so auch ich und von einem Profi bin ich sicherlich noch Lichtjahre entfernt.
Dennoch macht es Spaß im Forum zu lesen, sich helfen zu lassen und natürlich auch selbst zu helfen.

Deshalb gibts heute einen Beitrag von mir, der das Thema (bestimmt noch einmal) aufgreift, wie man TypoScript (ff. TS) - Templates besser strukturiert.

Oftmals werden Templates gepostet, die Jenseits der 400 Zeilen liegen und eine Übersicht deutlich erschweren.
Dieser Überblick soll zeigen wie man TS-Templates besser strukturiert und in mehr oder weniger viele übersichtliche Häppchen aufteilt.
Natürlich gibt es auch hier keinen Goldenen Weg. Ein gewisser Teil bleibt also nach eigenem Geschmack zu verstehen.

Info:

  • - Wie man Seiten und Seitentypen erstellt setze ich hier vorraus.

  • - Wenn nichts anderes geschrieben wurde ist immer der Setup-Bereich gemeint für Code-Beispiele.

  • - Code-Beispiele müssen nicht zwangsläufig eine Funktion haben. Es handelt sich um veranschaulichende Beispiele.

Sicher ist jedoch das es nötig ist ein Haupttemplate zu haben, in welchem die wichtigsten Angaben gemacht werden. Dieses Haupttemplate soll an prominenter Stelle im Seitenbaum eingebaut werden. Am besten in der Startseite.
Dazu begibt man sich in die Template-Ansicht und wählt im Seitenbaum die Startseite aus. Im nun erscheinenden rechten Frame des Backend wählt man nun "Create Template for a new Site".
Die Sicherheitsfrage wird bestätigt und man landet automatisch in der Template Informationsansicht.
Dort wählt man nun "Click here to edit whole template record" um das frisch erstellte Template zu bearbeiten.

Es wurde also ein Roottemplate erstellt, in dem Setup und Constants gecleart sind und die RootLevel-Option aktiviert ist. (Der Beispiel Inhalt (Hello World) kann getrost gelöscht werden)

In dieses Template kommen die wichtigsten Dinge wie das Einbinden des Stylesheet, das Einbinden der Designvorlage und das Ansprechen sämtlicher Marker oder Subparts.
So könnte ein Haupttemplate aussehen:

page = PAGE
page {
	typeNum = 0
	bodyTag = Dein BodyTag
	stylesheet = fileadmin/Dein_CSS_File.css
}	

page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/Deine_Designvoralge.html
	workOnSubpart = DOCUMENT_BODY
	marks {
		DATUM < temp.datum
		MENU_IMG_BEGIN < temp.menu_img_begin
		MENU < temp.MENU
		MENU_IMG_END < temp.menu_img_end
		CONTENT < styles.content.get
		CR_DATUM < temp.cr_datum
	}
}

Es finden sich also in der Designvorlage die Marker

###DATUM###
###MENU_IMG_BEGIN###
###MENU###
###MENU_IMG_END###
###CONTENT###
###CR_DATUM###

und natürlich die Subparts DOCUMENT_BODY

Diese werden im Bereich "marks" angesprochen und weiter zugewiesen.

Würden alle Definitionen für die unterschiedlichen Marker nun auch in diesem Template stehen, würde die Übersichtlichkeit arg leiden. Daher werden nun alle Definitionen in sogenannte "Extensiontemplates" ausgelagert.

Dazu legt man am besten erstmal eine neue Seite vom Typ SysOrdner an, die sich ruhig auf der selben Ebene wie das Haupttemplate befinden darf. Ein treffender Name wäre "Templates"
Wenn der SysOrdner erstellt ist klickt man links im Menü auf "Template" und folgt der Option "Click here to create an Extension Template". Die folgende Sicherheitsabfrage wird bestätigt und es erscheint wieder die Template Informations-Ansicht.
Dort wählt man erneut "Click here to edit whole template record" um das neu angelegt TS-Template zu bearbeiten.
Die Optionen "RootLevel" und Clear sind hierbei standardmäßig nicht gesetzt und das muss auch in aller Regel so sein. Wäre RootLevel gesetzt, würde es sich nicht mehr um ein Extensiontemplate handeln.

Es soll ein aussagekräftige Titel für das Extensiontemplate vergeben werden. Ein Titel der den Inhalt des Templates treffend beschreibt. In diesem Fall "Datum"

Nun definieren wir den ersten Marker (###DATUM###), der im Hauptemplate schon mittels

...
	marks {
		DATUM < temp.datum
...

angesprochen wird.

temp.datum = TEXT
temp.datum {
	data = date : U
	strftime = %A, %d.%m.%Y
}

Nun, das wars auch schon. Speichern!

Nun gehts wieder in die Bearbeitung des Haupttemplates.
Dort muss das frisch erstellte Extension-Template nun eingebunden werden.
Es folgt also ein klick auf die Seite die das Haupttemplate enthält und anschließend ein klick auf "Template" links im Menü. Im rechten Frame wählen wir nun wieder "Click here to edit whole template record".
Etwas weiter unten findet man die Möglichkeit Templates einzubinden. Die Funktion heißt "Include basis template:". Dort folgt ein Klick auf das kleine Ordner-Symbol, um durch die Dateien/Seiten zu browsen. Es öffnet sich ein Fenster in dem man nun den SystemOrdner mit dem Extensiontemplate sucht. Es folgt ein Klick auf diesen.
Es werden nun alle Templates angezeigt, die sich in dem Ordner finden. In unserem Fall findet sich sicher nur eins, nämlich das welches die Definition für den Marker ###DATUM### enthält. Das Template "Datum" wird ausgewählt und das Fenster schließt sich.
Unter "Include basis template:" findet sich nun der Eintrag "Datum". Nach dem Speichern ist das Template erfolgreich eingebunden und funktioniert genauso, als würde es im Haupttemplate stehen.

Weiter geht es mit Definitionen für
###MENU_IMG_BEGIN### und ###MENU_IMG_END### (wieder ein Extensiontemplate anlegenn im SysOrdner "Templates")

temp.menu_img_begin = IMAGE
temp.menu_img_begin {
	file = fileadmin/
	wrap = |
	params = style="vertical-align:top;"
	altText =
}
temp.menu_img_end = IMAGE
temp.menu_img_end {
	file = fileadmin/
	wrap = |
	params = style="vertical-align:top;"
	altText =
}

Wie oben beschrieben ins Haupttemplate einbinden.

und

###MENU### (wieder ein Extensiontemplate anlegenn im SysOrdner "Templates")

temp.MENU = HMENU
temp.MENU {
	wrap (
	)
}
temp.MENU.1 = TMENU
temp.MENU.1 {
	expAll = 0
	NO {
	allWrap (
       	)
	ATagParams = 
	beforeImg = 
	}

	ACT < .NO
	ACT {
	allWrap (
		)
	ATagParams = 
	beforeImg = 
	}
	ACT = 1
}

temp.MENU.2 = TMENU
temp.MENU.2 {
	NO {
	allWrap (
		)
	ATagParams = 
	}

	ACT < .NO
	ACT {
	allWrap (
		)
	ATagParams = 
	}
	ACT = 1
}

Und ebenfalls im Haupttemplate einbinden

Ohne Aufteilung auf mehrere Templates würde unser Template schon jetzt erheblich an Übersichtlichkeit verlieren und um ausgiebige Kommentare käme man sicher nicht drumm herum.

temp.MENU = HMENU
temp.MENU {
	wrap (
	)
}
temp.MENU.1 = TMENU
temp.MENU.1 {
	expAll = 0
	NO {
	allWrap (
       	)
	ATagParams = 
	beforeImg = 
	}

	ACT < .NO
	ACT {
	allWrap (
		)
	ATagParams = 
	beforeImg = 
	}
	ACT = 1
}

temp.MENU.2 = TMENU
temp.MENU.2 {
	NO {
	allWrap (
		)
	ATagParams = 
	}

	ACT < .NO
	ACT {
	allWrap (
		)
	ATagParams = 
	}
	ACT = 1
}

temp.datum = TEXT
temp.datum {
	data = date : U
	strftime = %A, %d.%m.%Y
}

temp.menu_img_begin = IMAGE
temp.menu_img_begin {
	file = fileadmin/
	wrap = |
	params = style="vertical-align:top;"
	altText =
}
temp.menu_img_end = IMAGE
temp.menu_img_end {
	file = fileadmin/
	wrap = |
	params = style="vertical-align:top;"
	altText =
}

page = PAGE
page {
	typeNum = 0
	bodyTag = Dein BodyTag
	stylesheet = fileadmin/Dein_CSS_File.css
}	

page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/Deine_Designvoralge.html
	workOnSubpart = DOCUMENT_BODY
	marks {
		DATUM < temp.datum
		MENU_IMG_BEGIN < temp.menu_img_begin
		MENU < temp.MENU
		MENU_IMG_END < temp.menu_img_end
		CONTENT < styles.content.get
		CR_DATUM < temp.cr_datum
	}
}

Also wie man sieht hätte man bereits jetzt ein Länge von 84 Zeilen, ohne weitere wrap-Definitionen und es sind noch nicht alle Marker angesprochen. Es fehlen außerdem noch die configs, wie

config {

# Awstats
	stat_apache = 1
	stat_apache_logfile = 

# Hier wird Sys_stat Extension aktiviert, wichtig z.B. für
# mm_forum
	stat = 1
	stat_mysql = 1

# eMail-Adressen per JavaScript verschlüsseln
	spamProtectEmailAddresses = 2
	spamProtectEmailAddresses_atSubst = (at)

# Verkürzen der Links in eMails
	notification_email_urlmode = 76

# XHTML Doctype und Quelltextbereinigung
	doctype = xhtml_trans
	xhtml_cleaning = all

# Einschalten des Adminpanel
	admPanel = 1

#Kommentare ausblenden
	disablePrefixComment = 1

# Deutsche Sprache global für Extensions
	locale_all = de_DE
	language = de

# Externe Links in neuem Fenster öffnen lassen,
# bei verwendung von <link /></link>
	extTarget = _blank

}

# MSIE in den Standradmode zwingen:
[browser = msie6]
config.doctypeSwitch = 1
[global]

Es fehlen außerdem Definitionen z.B. für Plugins, wie zum Beispiel tt_news:

plugin.tt_news {
	displayList {
		date_stdWrap.strftime = %A, %e. %B %Y
		maja_newmarker {
			days = 4
			stdWrap.wrap = <sup>|</sup>
		}
	}
	displayLatest {
		date_stdWrap.strftime = %d.%m.%Y
		maja_newmarker {
			days = 4
			stdWrap.wrap = <sup>|</sup>
		}
	}
	displaySingle {
		date_stdWrap.strftime = %A, %e. %B %Y
		maja_newmarker {
			days = 4
			stdWrap.wrap = <sup>|</sup>
		}
	}
}

Weitere 70 Zeilen Code. Das Haupttemplate würde unübersichtlich lang werden und es handelt sich hierbei nichtmal um die Hälfte des nötigen Codes für eine durchschnittliche Seite. Zudem muss auch noch auf die Reihenfolge im Haupttemplate geachtet werden.

Ich hoffe ich konnte verdeutlichen wie wichtig es ist Templates aufzuteilen. Allein die Fehlersuche würde erheblich erleichtert. Der Template Analyzer ist um längen besser nutzbar.