Vorraussetzungen für Entwickler:innen
Die gesamte Dokumentation setzt technisches Grundwissen im Umgang mit Webtechnologien und dem Enterprise Content Management System TYPO3 voraus. Mit folgenden Technologien und Systemen solltest du also grundlegend vertraut sein, bevor du beginnst:
Ordnerstruktur auf dem Webspace
fileadmin
Jedes Bakehouse baut in der Regel auf der selben Ordnerstruktur auf. Alle anpassbaren Dateien und Assets für das Webprojekt befinden sich unter folderempty /web/fileadmin/ und sollten auch hier gespeichert werden.
Template
Unter folderempty /templates/ befindet sich die Datei page Index.html . Diese enthält die Basis-Struktur deines Projekts und ist somit dein Ausgangs-Template. Bereits hier sind die TYPO3-Wurzeln des Bakehouse in Form von ViewHelpern zu erkennen. Um dein Projekt mit dynamischen Content zu befüllen und zu pflegen, wird hier mindestens ein Content-Bereich benötigt.
Was sind ViewHelper?
ViewHelper sind – wie es der Name schon sagt – Helfer. Dabei können ihre Aufgaben sehr vielseitig sein. Angefangen vom einfachen Bereitstellen von Daten bzw. Datenobjekt-Referenzen, bis hin zur Generierung von komplexen Funktionalitäten und HTML-Strukturen.
Zur Verfügung stehen hier nicht nur die TYPO3-Fluid-ViewHelper, sondern auch eine Vielzahl von Bakehouse-Eigenentwicklungen.
Beispiel eines Templates (page Index.html):
In der ersten Zeile werden die Bakehouse ViewHelper eingebunden. Dies ist in einem Template immer an oberster Stelle fix enthalten.
In der Template Datei ist kein html-, body- oder head-Tag enthalten, da das Template von Bakehouse automatisch im body-Tag eingebunden wird.
Im oberen Beispiel werden drei Navigationen erstellt:
- Zeile 6 erstellt ein Menü mit drei Ebenen.
- Zeile 11 integriert ein Sprachmenü zum Umschalten.
- Zeile 24 bietet ein Menü mit einer Ebene. Beispielsweise kann man dies als Footer-Menü nutzen, wo für gewöhnlich Datenschutz-, Impressum- und AGB-Seiten enthalten sind.
Diese drei Varianten werden bereits von Bakehouse zur Verfügung gestellt und bieten Voreinstellungen. So wird beispielsweise eine active Klasse automatisch auf dem Menüpunkt gelegt, auf dem man sich aktuell befindet.
Zeile 18 definiert einen Content-Bereich, eine Art dynamischen Container, wo Integratoren und Befüller die Möglichkeit haben, Elemente per Drag and Drop anzulegen und beliebig zu verschachteln.
Zeile 11 - 13 erstellt einen Link zur internen Buchen-Seite. Die interne Buchen-Seite wurde in der Seiten-Struktur angelegt und hat die Seiten-ID = 5. Der Vorteil dieser Variante im Vergleich zum gewöhnlichen a-Tag ist, dass der f:link.page ViewHelper sich automatisch um die URL Generierung und die Mehrsprachigkeit kümmert. Egal, wo sich die Seite befindet und ob die Seite in der Seitenstruktur verschoben wurde, die URL wird richtig generiert.
Da das Projekt mehrsprachig ist, wurden die Übersetzungen im TypoScript eingetragen und über f:translate wird die jeweilige Übersetzung ausgegeben.
JavaScript und CSS
Für die jeweiligen Technologien sind mit page /css/design.css und page /js/script.js bereits Dateien im folderempty fileadmin vorinstalliert. Die Konfiguration und Einbindung dieser Dateien befindet sich im TypoScript und kann editiert oder um zusätzliche Datei-Einbindungen erweitert werden. Es werden im Bakehouse auch eine Reihe von JavaScript-Bibliotheken standardmäßig zur Verfügung gestellt.
TypoScript und Libraries
Aufgrund des TYPO3-Unterbaus werden die meisten Konfigurationen des Projekts im TypoScript definiert. Die TypoScript-Konfiguration kann über das Panel navigation „Seitenstruktur“ durch einen docurightclick Rechtsklick auf die page Root-Seite (für gewöhnlich „Home“) und die Auswahl von „TypoScript“ im docucontextmenu Kontextmenü aufgerufen werden.
TypoScript-Shortcut: Die TypoScript-Konfiguration erreicht man als angemeldeter User auch mit der ^-Taste, sofern kein Bakehouse-Fenster oder -Panel geöffnet ist.
Neben der grundlegenden Konfiguration der Seite werden hier auch Libraries erstellt bzw. überarbeitet. Libraries sind TypoScript-Strukturen, die vorzugsweise zur Generierung von seitenabhängigen oder mehrfach verwendeten Template-Konstrukten wie Navigationen, Logos oder Kontaktdaten genutzt werden.
Diese Strukturen werden über den Fluid-ViewHelper f:cObject aufgerufen. Für spezielle Fälle, wie z. B. Navigations-Architekturen, gibt es auch Bakehouse-eigene ViewHelper (bh:tmpl.navigation).
Die nächsten Schritte
Folgende Schritte empfiehlt das Bakehouse-Team jedem neuen Bakehouse-Entwickler: