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.
Das NO bezeichnet die Standardausgabe des Menüelements mit dem Status "Normal". Dieser Status ist bei allen Menüs vorausgesetzt.
Es können auch einfache <div> Tags verwendet werden, oder ganz etwas Anderes.

  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 = &gt;&nbsp; | &nbsp;

&gt; enspricht">" und &nbsp; 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.

}