Im Bearbeitungsmodus des Template wird auf der Registerkarte “General” das grundlegende Gerüst definiert. Hier kann dessen Name sowie Struktur eingegeben werden. Für meine Arbeit waren hier die beiden TS-Eingabefelder “Constants” und “Setup” interessant. Constants definiert, wie der Name sagt, eine Liste von Konstanten. Setup definiert das Rendering der Seite.
Im Abschnitt Constants habe Konstanten für den Standard definiert, die später auf Unterseiten als abgeleitete Templates überschrieben werden können. Die Konstanten steuern das Layout der Seite.
Ich habe hier folgende Konstanten definiert:
staticMenuItems=6,7
copyRight=(c) 2016 Richard Woitaschik
templateFile=fileadmin/templates/main/onecol.html
themeClass=
staticMenuItems
Diese Konstante definiter eine Liste von Seiten-Id’s, die in dem statischen Menü in der Fußleiste angezeigt werden sollen. Ich habe mich hier für eine fest vorgegebene Liste entschieden. Eine Anzeige einer Navigation anhand der Unterseiten ist natürlich ebenso möglich.
copyRight
Diese Konstante enthält einen Text, der auch in der Fußzeile ausgegeben wird.
templateFile
Diese Konstante ist notwendig für die Anzeige einer Seite mit einem ein- oder zweispaltigem Layout. Diese Konstante wird auf Unterseiten in den abgeleiteten Templates überschrieben. Aber hierzu später mehr.
themeClass
Diese Konstante enthält einen optionalen CSS Klassennamen, der im Themen-Bereich hinzugefügt wird. Die Anzeige der Themenbilder wird bei mir über CSS-Klassen gesteuert. Auch diese Konstante kann in abgeleiteten Templates überschrieben werden. In dem Haupt-Template ist sie leer, es wird ein Default-Themenbild verwendet.
Das Eingabefeld Setup enthält als TypoScript die Zusammenstellung und Generierung des Seiten-HTML. Hier hatte ich folgende Definition angegeben.
Typo Script ist eine Meta-Sprache, welche im CMS Verwendung findet zur Ausgabe des HTML im Frontend. Die Sprache könnte weitgefasst als einem Array von Objekten beschrieben werden. In dem PHP Teil von Typo3 wird das TypoScript als Array repräsentiert.
Die Ausgabe einer Seite wird im einfachsten Fall als folgendes TypoScript definiert:
page = PAGE
page.10 = TEXT
page.10.value = Hello, world!
page.10.wrap = <h2>|</h2>
Bestimmte Bereiche kann man auch in TypoScript in geschweiften Klammern zusammengefasst werden. Der nachfolgende Text ist identisch zum vorhergehenden.
page = PAGE
page {
10 = TEXT
10 {
value = Hello, world!
wrap = <h2>|</h2>
}
}
So, genug der Grundlagen. Wer mehr wissen möchte kann mehr Information auf typo3.org finden.
Um meine in der Vorlage angegebenen Header ins HTML zu übernehmen kopiere ich den Bereich mit dem Namen DOCUMENT_HEADER in eine Variable. Hier speichere ich eine Template-Variable mit dem Namen docHead in einem temporären Objekt. Auf oberster Ebene existieren diverse Objekte (Top-Level Objekts; TLO), an die man eigene Definitionen anhängen kann. Für eine Auflistung der TLO's sehen Sie bitte hier nach.
temp.docHead = TEMPLATE
temp.docHead {
template = FILE
template.file = {$templateFile}
workOnSubpart = DOCUMENT_HEADER
}
Dieser Header wird später in der Seite im <head> Abschnitt übernommen. Dazu wird der Inhalt des Abschnittes später im PAGE Objekt übernommen.
headerData.10 < temp.docHead
Für das Hauptmenü (im oberen Bereich) definiere ich eine Menü-Variable im temporären Abschnitt des TS.
temp.mainMenu = HMENU
temp.mainMenu {
1 = TMENU
1 {
wrap=<ul>|</ul>
NO = 1
NO {
allWrap = <li> | </li>
}
ACT = 1
ACT {
allWrap = <li class="current"> | </li>
}
}
}
In der Variable mainMenu wird ein hierarchisches Menü erzeugt. Dieses enthält einen Eintrag mit einem Text-Menü-Objekt. Für dieses Text-Menü wird für den Zustand normal (NO) wie aktuell (ACT) jeweils die HTML-Ausgabe definiert. Das Pipe-Symbol (|) trennt dabei zwei Werte.
Das statische Menü in der Fußzeile war mit diesem Wissen auch einfach realisiert.
temp.staticMenu = HMENU
temp.staticMenu {
includeNotInMenu = 1
special = list
special.value = {$staticMenuItems}
1 = TMENU
1 {
wrap=<ul>|</ul>
NO.allWrap = <li> | </li>
}
}
Hier sind aber mehrere Unterschiede zum Hauptmenü.
Als nächstes hatte ich die Variable für das Sub-Menü definiert. Diese wird immer mit generiert, auch wenn nur das einspaltige Layout verwendet wird.
temp.subMenu = HMENU
temp.subMenu {
entryLevel = 1
1 = TMENU
1 {
wrap = <ul>|</ul>
NO = 1
NO {
wrapItemAndSub = <li>|</li>
}
CUR = 1
CUR {
wrapItemAndSub = <li class="current"> | </li>
}
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="current">|</li>
}
}
2 < .1
}
Das Menü soll diesmal aber 2 Ebenen haben. Deswegen werden hier 2 TMENU Objekte definiert. Um bei dem Menü eine Verschachtelung von Listenelementen zu erreichen setze ich das Property wrapItemAndSub anstatt allWrap.
Bei allWrap wurde das HTML wie folgt generiert:
<li>Eintrag 1</li>
<ul>
<li>Sub-Eintrag 1</li>
<li>Sub-Eintrag 2</li>
</ul>
Korrekterweise sollten die Listenelemente mit wrapItemAndSub für das Menü aber wie folgt erzeugt werden.
<li>Eintrag 1
<ul>
<li>Sub-Eintrag 1</li>
<li>Sub-Eintrag 2</li>
</ul>
</li>
Der Themenbereich meines Layouts enthält neben einem Bild auch noch einen Text. Dieser Text entspricht normalerweise dem Seitentitel. In einigen Fällen ist es aber notwendig, dass hier etwas Anderes steht. Dazu hatte ich mir überlegt, dass ich als Alternative den Text aus dem Feld Subtitle in den Eigenschaften der Seite nehme.
temp.themeTitle = COA
temp.themeTitle {
10 = TEXT
10.if.isFalse.data = page:subtitle
10.data = page:title
20 = TEXT
20.if.isTrue.data = page:subtitle
20.data = page:subtitle
}
Hierzu definiere ich in der temporären Variable themeTitle ein Array mit 2 Einträgen. Diese Einträge habe ich mit einer Bedingung versehen.
Nachdem ich jetzt alle notwendigen Elemente meiner Seite in temporären Variablen habe, kann ich den Body-Bereich zusammensetzen.
temp.docBody = TEMPLATE
temp.docBody {
template = FILE
template.file = {$templateFile}
workOnSubpart = DOCUMENT_BODY
marks {
HEADING = TEXT
HEADING.field = title
DOCUMENT_TITLE < temp.themeTitle
CONTENT < styles.content.get
MAIN_NAVIGATION < temp.mainMenu
SUB_NAVIGATION < temp.subMenu
STATIC_NAVIGATION < temp.staticMenu
COPYRIGHT_INFO = TEXT
COPYRIGHT_INFO.value = {$copyRight}
THEME_CLASS = TEXT
THEME_CLASS.value = {$themeClass}
}
}
Hierzu verwende ich den kompletten Bereich DOCUMENT_BODY aus meiner Vorlage. In dieser Vorlage ersetze ich alle Platzhalter durch deren Inhalte.
Über den Operator “<” wird der der Platzhalter durch den erzeugten Inhalt der temporären Variable eresetzt, wenn diese Variable ein Objekt ist. Im nachfolgenden Ausschnitt wird das HTML für das Menü erzeugt und anstatt des Platzhalters in die Ausgabe geschrieben.
MAIN_NAVIGATION < temp.mainMenu
Wenn man nur eine simple Zeichenkette an einer Stelle als Ersatz für einen Platzhalter verwenden möchte, kann man dies natürlich auch direkt definieren. Im nachfolgenden Ausschnitt wird der Platzhalter für das Copyright als Textobjekt definiert und mit dem Wert der Konstante befüllt.
COPYRIGHT_INFO = TEXT
COPYRIGHT_INFO.value = {$copyRight}
Mit der Definition des Body-Bereichs habe ich alle Elemente zusammen um eine Seite zu erzeugen. Das hierfür notwendige TypoScript ist jetzt relativ übersichtlich.
page = PAGE
page {
headerData = COA
headerData.10 < temp.docHead
10 < temp.docBody
}
Für den Header-Bereich wird ein Array definiert, dieser beinhaltet als einzigen Eintrag den Ausschnitt des Headers aus meiner Layout-Vorlage.
Der Content Bereich besteht ebenfalls aus einem Eintrag. Dieser Eintrag entspricht dem erzeugten Inhalt aus unserer temporären Body-Variablen.