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 = PAGEDem Objekt page eine Seite übergeben
page.10 = TEMPLATEDem ersten Unterobjekt der Seite (10) ein Templateobjekt übergeben.
page.10.template = FILEDem Templateobjekt ein Fileobjekt übergeben.
page.10.template.file = fileadmin/templates/index.htmDem 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_BODYDies 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.cssEinbinden 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 = HMENUErzeugen eines HMNEU (hirarschiches Menü) Objekts, um diesen dann in dem im HTML Code definierten Subpart "HauptNavi" einzufügen.
  HauptNavi.1 = TMENUErzeugen 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 = 1Den 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 = TMENUDie 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 = 1Den 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 = HMENUAuch 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 = TMENUAuch 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 = HMENUAuch 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 = directoryBesagt, das der Root Punkt aus dem directory gesetzt wird.
  KopfNavi.special.value = 12Wenn wir davon ausgehen, dass die Seite mit der ID 12 mehrere Unterseiten hat, werden diese Unterseiten nun als Menüeinträge angezeigt.
  KopfNavi.1 = TMENUAuch 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.subpartsKann, wenn durch die vorherigen Beispiele bereits vorhanden, weg gelassen werden.
  Brotkrumen = HMENUAuch dieses Menü ist hiraisch
 Brotkrumen.special = rootlinerootline 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 = TMENUDie 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.getFü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.getRightFü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 = TEXTDer Marker JAHR ist ein Textobjekt.
  JAHR.data = date:UDem Objekt Jahr wird das heutige Datum zugewiesen. Das U steht für heute.
  JAHR.strftime = %YMit strftime kann das heutige Datum/Zeit formatiert werden. In diesem Fall, für das Copyright, wird nur das Jahr benötigt.
 LETZTE_ANDERUNG = TEXTDer Marker LETZTE_ANDERUNG beinhaltet einen TEXT.
 LETZTE_ANDERUNG.data = register:SYS_LASTCHANGEDDiese 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.%YDa in SYS_LASTCHANGED die Sekunden seit dem 1.1.1970 angezeigt werden, muss auch dieser Wert erst einmal formatiert werden.
}