Templates sind die Vorlagen der Seiten. Hier wird festgelegt, auf welche Weise und mit welchen Inhalten an welcher Stelle die Seite (eigentlich ein sammelsurium an Datensätzen) im Browser angezeigt wird.
Die Sprache TypoScript ist keine Programmiersprache, sondern eine Konfigurationssprache. Hier werden Anweisungen/Befehle an die Darstellung festgelegt - sozusagen konfiguriert. Ein Template ist also quasi eine Abfolge von TypoScript-Anweisungen. Diese Anweisungen legen u. a. die Seitenformatierungen, ausgaben der Inhalte und Menü-Aufbau fest.
Fazit: Eine TYPO3-Seite kann erst dann angezeigt werden, wenn sie mit einem Template-Datensatz verbunden ist!
In diesem Abschnitt geht es um das Anlegen und Verwalten von Templates (Tabellen, Wrap, Kopieren, Referenzieren).
Anlegen und Verwalten von Templates
Da vorab festgelegt wurde, dass die Home-Seite der Seitenstruktur als reine Konfigurationsseite dienen soll, werden die Templates für diese Seite angelegt.
Aufbau eines Template-Datensatzes:
- Öffnen des Menü-Punktes "Web / Templates"
- Klick auf "Home-Seite"
- Den Assistentin im Dropdown-Menü auf "Info/Bearbeiten" stellen (ist meistens schon voreingestellt)
- Alle hier angezeigten Templates sind editierbar (sichtbar durch den vorangestellten Bleistift). Hier: Klick auf "Setup"
- Zunächst wird ein Seitenobjekt erzeugt (PAGE):
Dazu schreibt man anfangs in das leere Script:
page = PAGE
Dieses ist eine Variable für den TypoScript Objekt-Typ PAGE (=Seite)
! Unbedingt die Großschreibweise beachten.
- Text zuweisen:
page.10 = TEXT -> Zeigt an, dass Text innerhalb der Seite erfolgt
page.10.value = Hallo! -> Gibt den Wert des Textes an
Zweiter Text:
page.20 = TEXT
page.20.value = Wie geht es Dir?
Dritter Text:
page.30 = TEXT
page.30.value = Wir lernen TYPO3 6.0
(usw.)
Hinweis: Für Formatierungen: HTML-Befehle werden akzeptiert! (Bsp.: <p /> pder )
Wie Anwender Texte schreiben:
- Öffnen des Templates
- Vollständigen Template anzeigen über den Reiter "Enthält"
- CSS Styled Content auswählen
- Speichern + schließen
- Zurück zum Setup der Home-Seite
- Das Script page.10 = TEXT löschen
- Statt dessen: page.10 < styles.content.get
! Durch diesen Befehl werden die im Gesamt-Template vorgegebenen Styles kopiert und in das Setup eingefügt ! - Speichern und schließen
- Öffnen der Seite aus dem Strukturbaum, in die ein Anwender den Text schreiben soll (Bsp.: Aktuelles)
- Der Arbeitsbereich gibt 4 Positionen für den Text an; entsprechenden Bereich auswählen (Links, Normal, Rechts, Rand)
- Neuen Text anwählen (kleiens Icon eines Docs mit Plus-Zeichen)
- Text editieren wie in einem Schreibprogramm
- Speichern + Schließen
Wie wird die linke Spalte im Frontend angezeigt?
- Zunächst im "Template/Template Analyse" nachschauen, welcher Script dazu aufgesetzt ist.
- Script lautet: <styles.content.getLeft
- Dieses Script wird in das Setup der Home-Seite eingefügt - speichern und schließen.
Das WRAP-Prinzip:
Die Anweisung WRAP ermöglicht es, einen vordefinierten Text an eine bestimmte Position in einem anderen Eelement einzufügen (einzubinden). An die Stelle, an die eingefügt werden soll, wird mit dem Symbol « | » definiert.
Bsp.: page.10.wrap = |
Tipp: HTML-Befehle greifen auch hier!
Soll das eingefügte Objekt im eigenen Absatz stehen: page.10.wrap = <p> | </p>
Welches Prinzip steckt hinter WRAP?
WRAP sucht sich aus, was auf der gleichen Ebenen steht (hier: page.10.) und schiebt dies an die Stelle des Platzhalter « | »
So kann das dann im Script aussehen:
page.10 = TEXT
page.10.value = Ei Gude!
page.10.wrap = <p>T3-Kurs: | </p>
page.20 = TEXT
page.20.value = Dies ist ein Typoscript
page.20.wrap = <h2> | </h2>
page.5 = TEXT
page.5.value = Ein Beispiel
page.5.wrap = <p><b> | </b></p>
Content-Object-Arrays (COA) - Tabellen:
Das Content-Object-Array (COA) ist ein Objekttyp in TypoScript, dem man mit Hilfe weiterer COAs beliebig vielen Unterobjekten zuordnen kann. Mit Hilfe der COAs ist es möglich, HTML-Tabellen sauber darzustellen - mit TEXT dagegen nicht.
An dem Beispiel einer Tabelle wird das Prinzip deutlich:
Eine Tabelle kann aus beliebig vielen Zeilen und Zellen bestehen. In den einzelnen Zellen wiederum kann beliebig viel Text stehen.
Die COAs übernehmen hierbei gewissermaßen die Rolle des Tabellenrahmen, des Zeilenrahmens und des Zellenrahmens.
Wie wir ein COA aufgebaut?
- Zunächst wird der Rahmen im Setup-Template der Home-Seite definiert:
# Einbindung einer Tabelle - Rahmen der Tabelle
page.30= COA
page.30.wrap = <table border="1" width="550"> | </table>
# zweite Zeile
page.30.10 = COA
page.30.10.wrap = <tr> | </tr>
# zweite ZeileHinweis:
page.30.20 = COA
page.30.20.wrap = <tr> | </tr># Werte in die erste Zeile einfügen
page.30.10.10 = TEXT
page.30.10.10.value = A
page.30.10.10.wrap = <td> | </td>
page.30.10.20 = TEXT
page.30.10.20.value = B
page.30.10.20.wrap = <td> | </td>
# Werte in die zweite Reihe einfügen
page.30.20.10 = TEXT
page.30.20.10.value = C
page.30.20.10.wrap = <td> | </td>
page.30.20.20 = TEXT
page.30.20.20.value = D
page.30.20.20.wrap = <td> | </td>
Alles, was hinter der Raute # steht, wird im Script NICHT angezeigt! Analog zum HTML-Kommentar-Container <!-- -->
- Da u. U. beliebig viele Zellen geschrieben werden können, kann das Script viel Schreibarbeit bedeuten. Zur Vereinfachung gibt es das Prinzip der Ausklammerung:
# Ausklammern / Vereinfachung des Scriptes:
page.30.10 {
10 = TEXT
10.value = A10.wrap =<td> | </td>
20 = TEXT
20.value = B
20.wrap = <td> | </td>
}
page.30.20 {
10 = TEXT
10.value = C
10.wrap = <td> | </td>
20 = TEXT
20.value = D
20.wrap = <td> | </td>
}
Keine Kommentare:
Kommentar veröffentlichen