Der Einstieg in die Bakehouse-Entwicklung

    Das Bakehouse baut auf das bewährte, freie Open-Source CMS TYPO3 auf und erweitert dieses im Aufbau von Projekten und der Pflege und Wartung von Content. Bei der Implementierung von deinen Projekten wirst du also zwangsläufig mit Bakehouse- und TYPO3-Technologien arbeiten. 

    Hinweis

    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.

    Notiz

    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):

    HTML
    {namespace bh=TYPO3\Bh\ViewHelpers} <div class="l-page"> <nav class="l-nav"> <bh:tmpl.navigation typoscriptPath="lib.fullnavigation" /> </nav> <header class="l-header"> <div class="l-languages"> <bh:tmpl.navigation typoscriptPath="lib.languagemenu" /> </div> <f:link.page pageUid="5" class="l-booking-button"> {f:translate(key:'buchen', default: 'Buchen')} </f:link.page> </header> <main class="l-content"> <bh:tmpl.content class="bh-centered-content" label="Content" section="content" type="noinherit" default="content" /> </main> <footer class="l-footer"> <div class="l-footer__service"> <f:cObject typoscriptObjectPath="lib.servicenavigation" /> </div> </footer> </div>

    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
    # Beispiel für die Einbindung von CSS und JavaScript mit TypoScript page { includeCSS { design = fileadmin/css/design.css #myCSS = fileadmin/css/myCSS.css } includeJS { scriptlocal = fileadmin/js/script.js #myJS = fileadmin/js/myJS.js } } ...

    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. 

    HTML
    <f:cObject typoscriptObjectPath="lib.logo" /> ... <bh:tmpl.navigation typoscriptPath="lib.fullnavigation" />

    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: