Der Einstieg in die
Hinweis
Voraussetzungen für Entwickler:innen bzw. Integrator:innen
Die gesamte Dokumentation setzt technisches Grundwissen im Umgang mit Webtechnologien und dem Enterprise Content-Management-System TYPO3 voraus.
Wir empfehlen daher davor den Einstieg in die Web-Entwicklung.
Ordnerstruktur auf dem Webspace
fileadmin
Jedes Bakehouse baut in der Regel auf derselben 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 web/fileadmin/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. Sie reichen vom einfachen Bereitstellen von Daten bzw. Datenobjekt-Referenzen, bis hin zur Generierung komplexer Funktionen 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">
<bh:tmpl.navigation typoscriptPath="lib.servicenavigation" />
</div>
</footer>
</div>
Zeile 1 bindet die Bakehouse-ViewHelper bh: ein. Diese Zeile muss in jedem Template ganz oben stehen.
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 eine Hauptnavigation mit drei Ebenen.
- Zeile 11 integriert ein Sprachmenü zum Umschalten.
- Zeile 24 Einstufiges Menü, hier im Footer für z.B. Impressum, Datenschutz und AGB.
Alle drei Navigationen sind im Bakehouse bereits vordefiniert und bieten nützliche Voreinstellungen. So wird beispielsweise eine active Klasse automatisch auf dem Menüpunkt gelegt, auf dem man sich aktuell befindet.
Zeile 13 - 15 verlinken auf die Buchen-Seite (Seiten-ID 5 - Angelegt & ausgelesen über die Seiten-Struktur). Anders als bei einem normalen a-Tag erzeugt f:link.page die URL automatisch, auch in jeder Sprache und wenn die Seite im Seitenbaum verschoben wird. Da das Projekt mehrsprachig ist, wurden die Übersetzungen im TypoScript eingetragen und über f:translate wird die jeweilige Übersetzung ausgegeben.
Zeile 19 definiert einen Content-Bereich. Darin können Redakteur:innen Elemente per Drag-and-drop anlegen und verschachteln.
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: