HTML-Templates erstellen

Das Layout einer Webseite wird durch sogenannte HTML-Templates bestimmt. Das Template enthält dabei das grobe Gerüst der Seite. An bestimmten Stellen im Template werden dynamische Elemente wie Inhaltsbereiche, Navigationen und mehr definiert.

Einbindung des Templates

Ein Template besteht aus zwei Dateien.

  • eine HTML Datei welche die Struktur des Templates enthält
  • einer CSS Datei welche das Design des Templates bestimmt

Mittels TypoScript werden diese beide Dateien dem System bekannt gegeben. Im TypoScript der Startseite (Root-Page) können am Ende folgende Zeilen hinzugefügt werden, um die Standardkonfiguration zu überschreiben. 

Standardmäßig ist die Template-Datei index.html und die CSS-Datei design.css am FTP angelegt und per TypoScript integriert. 

Beispiel für ein Bakehouse-Template

Es folgt ein Beispiel der Datei fileadmin/templates/index.html

Diese Datei ist in jeder Bakehouse-Installation bereits vorhanden und kann angepasst werden um die gewünschte Seitenstruktur zu erreichen. 

Die hervorgehobenen Zeilen definieren dynamische Bereiche wie Inhalt und Navigationen im HTML-Template.

Template-Aufbau

Im Template wird nur der Bereich innerhalb des <body> definiert. Der <head> Bereich wird vom System selber hinzugefügt. Inhalte die im Header-Bereich stehen sollen können im TypoScript definiert werden. Damit das Bakehouse die Datei richtig interpretieren kann müssen jedoch einige Bereich im HTML definiert werden. Dies erfolgt mit sogenannten ViewHelper.

Ganz oben im Templatefile müssen die Bakehouse-ViewHelpers mit folgender Zeile geladen werden. Sie laden die nötigen Systemdateien:

In einen Contentbereich können Content-Elemente abgelegt werden. Mit einem Contentbereich wird also definiert wo der Redakteur auf der Webseite befüllen kann. 

Attribute:

type: Gibt an ob ein Contentbereich seinen Inhalt an Unterseiten vererbt (inherit bzw. noinherit).
section:  Definiert den "Namen" des Contentbereichs. Ein Name sollte in einem Template nicht zweimal vorkommen.

Beispiel eines Headerbereichs der sich vererbt:

Statischer Inhalt welcher auf jeder Seite gleich ist, kann entweder direkt im HTML eingebunden werden oder über Typoscript Libraries definiert werden. (Sinnvoll zum Beispiel für.: Logo, Adresse, Menüs, Buttons etc.) 

Einige Libraries sind bereits im Bakehouse integriert. 

ViewHelper

Fluid-ViewHelper und spezielle Bakehouse ViewHelper die im Template verwendet werden können finden sich hier

Daten auf die zurückgegriffen werden kann

Das Bakehouse stellt Datenobjekt-Referenzen zur Verfügung auf die zurückgegriffen werden kann. Eine Auflistung der Werte finden sich hier

© 2014 Cookis Webworks |
Akzeptieren
Mehr Infos
Diese Seite verwendet Cookies.