Einfaches Template erstellen
Um einen Inhalt auf der Startseite des Frontends angezeigt zu bekommen, ist es unbedingt notwendig, ein Template einzubinden.
Durch dieses Template weiß Typo3, wie es die Inhalte, welche für diese Seite abgelegt sind, anordnen soll.
1. Auf die entsprechende Seite im Seitenbaum wechseln (z.B. Startseite)
2. Im "Web" Bereich der Navigation "Template" auswählen.
3. Button "Template für neue Website erstellen" klicken.
Damit steht das Template zur Verfügung. Jedoch wird nur ein "Hallo Welt" ausgegeben, da noch keine Verbindung zu den entsprechenden Seiteninhalten eingerichtet wurde.
Kleine Änderungen im Template (Setup Bereich)
Die Anpassung des Templates findet unter Anderem im Setup Bereich des Templates statt.
1. Entsprechende Seite im Seitenbaum wählen.
2. "Template" im "WEB" Bereich der Navigation klicken.
3. Den Schriftzug "Klicken Sie hier, um dieses Template anzuzeigen." anklicken.
4. Auf "Setup" klicken.
Hier kannst du das, was auf der Seite ausgegeben wird beeinflussen. Schreibe z.B. anstatt "page.10.value = Hallo Welt" einfach "page.10.value = Anderer Text".
HTML Template einbinden
Um ein HTML Template einzubinden, musst du die Templatedaten (HTML Seite, *.css Datei und Images) in das Verzeichnis "fileadmin" kopieren. Dieses befindet sich im htdoc Verzeichnis deiner Typo3 Installation.
Zwecks der Übersicht bietet es sich an, hierfür ein eigenes Unterverzeichnis zu erstellen.
Das HTML File besteht aus statischen und dynamischen Bereichen. Im Normalfall sind Bereiche wie Logo oder das Bild im Kopfbereich statisch, wobei Bereiche wie Navigation oder Texte innerhalb der Seite dynamisch sind.
Diese dynamischen Bereiche werden mit Subparts bzw. Marker gekennzeichnet (siehe Begriffe). Dazu wird innerhalb der Gesamte Body Tag mit einem Subpart versehen.
Z.B.:
<body>
<!-- ###DOCUMENT_BODY### begin -->
bla bla bla ...
<!-- ###DOCUMENT_BODY### end -->
</body>
Um das Template zu verwenden, müssen wir es noch einbinden, und zwar über TypoScript im Setupbereich. (Siehe "Kleine Änderungen im Template (Setup Bereich)" weiter oben)
Dort schreiben wir folgendes:
page = PAGE | Dem Objekt page eine Seite übergeben |
page.10 = TEMPLATE | Dem ersten Unterobjekt der Seite (10) ein Templateobjekt übergeben. |
page.10.template = FILE | Dem Templateobjekt ein Fileobjekt übergeben. |
page.10.template.file = fileadmin/templates/index.htm | Dem Fileobjekt des Templates den Pfad des HTML Templates mitteilen. Hier muss natürlich der Name des Unterverzeichnisses und der HTML Datei angepasst werden. |
page.10.workOnSubpart = DOCUMENT_BODY | Dies ist notwendig, um den Wirkungsbereich auf den Body-Bereich zu beschränken. (Dadurch wird der header Bereich nicht erneut eingebunden) |
page.10.relPathPrefix = fileadmin/templates/ | Dieser Code dient dazu, relative Pfadangaben aus dem HTML Template anzupassen, so dass sie unsrer Dateiverwaltung entsprechen. |
page.includeCSS.css1 = fileadmin/templates/css/css1.css | Einbinden eines/mehrerer Stylesheets |
Eine Hauptnavigation einbinden (Seitennavigation)
Für die Haupnavigation wird hier ein hirarschiches Menü HMENU verwendet. Darunter werden 2 Ebenen mit einem TMENU eingebunden.
Danach wird eine Funktion implementiert, die es ermöglicht, die aktuell Seite im Menü zu markieren.
Des Weiteren wird hier eine erleichterte Schreibweise des Codes verwendet. Anstatt jedes mal page.10.subparts zu schreiben, wird dieser nur einmal geschrieben. Dahinter wird in geschweiften Klammern der weitere Code eingefügt. Alles was sich innerhalb der Klammern befindet, wird dem page.10.subparts Objekt hinzugefügt.
page.10.subparts { | Erzeugen des Subparts, und Öffnen des Blocks |
HauptNavi = HMENU | Erzeugen eines HMNEU (hirarschiches Menü) Objekts, um diesen dann in dem im HTML Code definierten Subpart "HauptNavi" einzufügen. |
HauptNavi.1 = TMENU | Erzeugen der ersten Navigationsebene mit einem TMENU (Text Menü) Objekts |
HauptNavi.1.NO.allWrap = <div class="irgendwas"> | </div> | Hier wird der Normale Status des Menüs in einen DIV Tag gewrapt, damit die Menüeinträge zum einen entsprechend des Tags formatiert werden, und zum Anderen nicht einfach hinter einander aufgeführt werden. |
HauptNavi.1.ACT = 1 | Den Active Status aktivieren. |
HauptNavi.1.ACT.allWrap = <div class="css für Aktiv"> | </div> | Wenn der aktive Menüeintrag auftaaucht, dann ein anderes CSS verwenden. Es muss aber nicht in einem CSS abgehandelt werden, dies kann auch direkt hier im TypoScript behandelt werden. |
HauptNavi.2 = TMENU | Die zweite Ebene des Menüs anlegen. Auch hier handelt es sich um ein Textmenü. |
HauptNavi.2.NO.allWrap = <div class="irgendwas Anderes"> | </div> | Siehe identische Code für Ebene1 |
HauptNavi.2.ACT = 1 | Den Active Status aktivieren. |
HauptNavi.2.ACT.allWrap = <div class="css für Aktiv"> | </div> | Wenn der aktive Menüeintrag auftaaucht, dann ein anderes CSS verwenden. Es muss aber nicht in einem CSS abgehandelt werden, dies kann auch direkt hier im TypoScript behandelt werden. |
} |
Zentrale Navigation einfügen (Kopfbereich horizontal)
Für die Navigation im Kopfbereich muss natürlich auch wieder ein entsprechender Subpart Bereich in dem HTML Template definiert sein.
page.10.subpart { | Dieser Teil kann weg gelassen werden, wenn er bereits durch die vorherigen Beispiele existiert. |
KopfNavi = HMENU | Auch hier handelt es sich um ein hirarschiches Menü. KopfNavi ist die Bezeichnung, die wir im HTML Template für den Subpart verwendet haben. |
KopfNavi.1 = TMENU | Auch wenn es nur eine Ebene geben wird, muss dieser ein entsprechendes Textmenü (TMENU) zugewiesen werden. |
KopfNavi.1.NO.allWrap = <li> | </li> | Die Menüeinträge werden mit <li> Tags umschlaossen. |
KopfNavi.1.wrap = <ul> | </ul> | Alle <li> Einträge werden mit einem <ul> </ul> Tag umschlossen. |
} |
Um einen Bestimmten Unterzweig anzeigen zu lassen, muss dem ganzen noch zwei Zeilen hinzugefügt werden:
page.10.subpart { | Dieser Teil kann weg gelassen werden, wenn er bereits durch die vorherigen Beispiele existiert. |
KopfNavi = HMENU | Auch hier handelt es sich um ein hirarschiches Menü. KopfNavi ist die Bezeichnung, die wir im HTML Template für den Subpart verwendet haben. |
KopfNavi.special = directory | Besagt, das der Root Punkt aus dem directory gesetzt wird. |
KopfNavi.special.value = 12 | Wenn wir davon ausgehen, dass die Seite mit der ID 12 mehrere Unterseiten hat, werden diese Unterseiten nun als Menüeinträge angezeigt. |
KopfNavi.1 = TMENU | Auch wenn es nur eine Ebene geben wird, muss dieser ein entsprechendes Textmenü (TMENU) zugewiesen werden. |
KopfNavi.1.NO.allWrap = <li> | </li> | Die Menüeinträge werden mit <li> Tags umschlaossen. |
KopfNavi.1.wrap = <ul> | </ul> | Alle <li> Einträge werden mit einem <ul> </ul> Tag umschlossen. |
} |
Breadcrumb einfügen
Ein Breadcrumb ist der Pfad zur aktuellen Seite, in dem man z.B. in der Hirarchie wieder zuück navigieren kann.
page.10.subparts | Kann, wenn durch die vorherigen Beispiele bereits vorhanden, weg gelassen werden. |
Brotkrumen = HMENU | Auch dieses Menü ist hiraisch |
Brotkrumen.special = rootline | rootline ist in Typo3 so etwas wie eine Broadcrumb, es gibt die Links, die von der aktuellen Seite bis zur Rootseite führen aus. |
Brotcrumen.special.range = 1 | -1 | Range gibt an, in welchem Rahmen zurückverfolgt werden soll. In diesem Beispiel von der Ebene 1 bis zur Rooseite. Möchte man Ebene 2 mit einebziehen, schreibt man 2 | -1. |
Brotcrumen.1 = TMENU | Die erste Ebene wird wieder ein Textmenü. |
Brotcrumen.1.NO.allWrap = > | | > enspricht">" und entspricht " " |
} |
Content einfügen
Ein weiterer Dynamischer Bereich ist der Content, also der eigentliche Inhalt der Seite.
Damit deine Inhalte, die du im Backend eingetragen hast auch sichtbar werden, müssen diese mit dem Template verknüpft werden.
Hierzu binden wir die Extension css styled content, die bei neueren Typo3 Versionen bereits Standardmäßig installiert ist, ein. Diese liefert uns ein paar nützlich Zusatzobjekte.
Vorbereitend:
1. Sicherstellen, dass CSS_Styled_content installiert ist (über den EXT Manager)
2. Zum Template wechseln ("Seite" im WEB Bereich klicken -> Seite mit Template auswählen -> "Template" im WEB Bereich klicken.
3. "Click here to edit whole template record" anklicken
4. Unter "Include static (from extensions)" den CSS Styled Content hinzufügen und speichern.
Im Setup Bereich des Templates können wir dann mit dem Einbinden beginnen:
page.10.subparts ( | Öffnen des Subpart blocks. Wenn du bereits einen offenene Subpart block hast, kannst du dir diese Zeile sparen. |
CONTENT < styles.content.get | Fügt den Inhalt der Spalte Normal im Backendbereich der entsprechenden Seite, in den, im HTML Code definierten, CONTENT Subpart ein, um dieses dann im Frontend darzustellen. |
CONTENT_RIGHT < styles.content.getRight | Fügt den Inhalt der Spalte Rechts im Backendbereich der entsprechenden Seite, in den, im HTML Code definierten, CONTENT_RIGHT Subpart ein, um diesen dann im Frontend darzustellen. |
} |
Marker einfügen
Für bestimmte Dinge lohnt es sich Marker anzulegen. Diese können z.B. das Jahr des Copyrights sein, oder die letzte Änderung etc.
Hierzu werden bestimmte Bereiche durch ###Markername### im HTML Template festgelegt. An diesen Stellen erscheinen dann die zugewiesenene Werte.
page.10.marks{ | Ein neuer Bereich, der alle Einträge die mit page.10.marks beginnen sollen, zusammenfasst. |
JAHR = TEXT | Der Marker JAHR ist ein Textobjekt. |
JAHR.data = date:U | Dem Objekt Jahr wird das heutige Datum zugewiesen. Das U steht für heute. |
JAHR.strftime = %Y | Mit strftime kann das heutige Datum/Zeit formatiert werden. In diesem Fall, für das Copyright, wird nur das Jahr benötigt. |
LETZTE_ANDERUNG = TEXT | Der Marker LETZTE_ANDERUNG beinhaltet einen TEXT. |
LETZTE_ANDERUNG.data = register:SYS_LASTCHANGED | Diese Variable beinhaltet nicht nur die Information, ob sich die Seite geändert, sondern auch ob sich die Inhalte geändert haben. |
LETZTE_ANDERUNG.strftime = %d.%m.%Y | Da in SYS_LASTCHANGED die Sekunden seit dem 1.1.1970 angezeigt werden, muss auch dieser Wert erst einmal formatiert werden. |
} |