Frontend Templates 

Frontendtemplates in TYPO3 mit Backendlayouts verknüpfen: page Object, Fluid Templates.

15.09.2016 1426

Fluid Frontend Templates integrieren

Im Beitrag Backend Layouts hatte ich beschrieben wie man verschiedene Backendlayouts dem TYPO3 System hinzufügt. Die Layouts können in den Seiteneigenschaften im Backend ausgewählt, und dann mit  Inhalten für die Frontendausgabe gefüllt werden. Damit die verschieden strukturierten BE Layouts im Frontend auch enstsprechend ausgegeben werden brauchen wir unterschiedliche Frontendtemplates. In diesem Beitrag zeige ich euch die Grundanlage von Fluid Templates mit Layouts und Partials sowie die Verknüpfung der Templates mit den Backendlayouts.

Fluid Templates anlegen

Frontendtemplates residieren normalerweise im Ordner Resources/Private/Templates. Wer den Artikel Das TYPO3 Template durchgearbeitet hat, der sollte in diesem Ordner ein Default.html Template gespeichert haben.
Für jedes Backendlayout wird nur eine eigene Templatedatei angelegt. Bitte beachtet, das Templatedateien immer mit einem Großbuchstaben beginnen müssen! Innerhalb des Templates kümmern wir uns nur um die Ausgabe des Seiteninhaltes. Header, Hauptnaviagtion und Footer binden wir am Ende des Abschnitts über Template Layouts ein. Ein einfaches dreispaltiges Layout auf Basis des Bootstrapframeworks könnte dann so Aussehen:
<div class="row">
    <div class="col-md-8">
        <f:cObject typoscriptObjectPath="lib.content" />
    </div>
    <div class="col-md-4">
        <f:cObject typoscriptObjectPath="lib.contentRight" />
    </div>
</div>
Diese Datei speichern wir mit dem Dateinamen TwoCols.html  im Ordner Resources/Private/Templates ab. Entsprechend können wir ein einspaltiges Template OneCol.html anlegen:
<div class="row">
    <div class="col-md-12">
        <f:cObject typoscriptObjectPath="lib.content" />
    </div>
</div>

Verknüpfung von Backend- und Frontendtemplates in TYPO3

Schauen wir nochmal in das Setup aus dem Artikel Das TYPO3 Template. Dort haben wir innerhalb des page Objects bereits das  Default Template zugewiesen:
page {
    typeNum = 0
    10 = FLUIDTEMPLATE
    10 {
            templateName = TEXT
            templateName.stdWrap.cObject = CASE
            templateName.stdWrap.cObject {
                key.data = pagelayout

                default = TEXT
                default.value = Default.html
            }
            templateRootPaths {
	        10 =  EXT:my_extension/Resources/Private/Templates/
            }
	    layoutRootPaths {
	        10 =  EXT:my_extension/Resources/Private/Layouts/
            }
	    partialRootPaths {
	        10 = EXT:my_extension/Resources/Private/Partials/
            }
      }
}
Die Case Anweisung erweitern wir jetzt um unsere Backend und Frontendtemplates. Dabei setzt sich der Schlüssel aus dem Namen des Backendlayouts mit vorgestelltem "pagets__" zusammen. Da wir die TemplateRootPaths definiert haben, brauchen wir als value nur noch den Fluid Dateinamen zuweisen:
...
10 = FLUIDTEMPLATE
10 {
        templateName = TEXT
        templateName.stdWrap.cObject = CASE
        templateName.stdWrap.cObject {
            key.data = pagelayout
        
            pagets__onecol = TEXT
            pagets__onecol.value = Onecol.html
           
            pagets__twocols = TEXT
            pagets__twocols.value = Twocols.html
            
            default = TEXT
            default.value = Standard.html
            
        }

        templateRootPaths {
            10 =  EXT:my_extension/Resources/Private/Templates/
...
Nach dem Löschen aller Systemcaches können wir nun im TYPO3 Backend in den Seiteneigenschaften ein Backendtemplate auswählen und die Seite wird im Frontend automatisch im richtigem Fluid Template dargestellt.

Fluid Engine: Templates - Layouts - Partials

Bisher beinhalten unsere Templates nur den Content der Seite. Natürlich ist das der wichtigste Bereich, aber  klar, wir wollen einen Seitenkopf mit Logo, Navigation etc und einen Footer. Um diese nicht in jedem Template erneut einzubinden nutzen wir die Möglichkeit von Layouts und Partials. Dazu legen wir uns ein Default Layout (Default.html) im Verzeichnis Resources/Private/Layouts mit folgendem Inhalt an:
<f:render partial="Header.html" arguments="{_all}" />
<f:render section="Main" />
<f:render partial="Footer.html" arguments="{_all}" />
Da wir bereits innerhab des page Objects den Partial Pfad festgelegt haben, brauchen wir noch im Ordner Resources/Private/Partials die Dateien Header.html und Footer.html anzulegen. Um die Ausgabe zu kontrollieren reicht in beiden Dateien nur das Wort "Header" bzw "Footer". Die Layoutdatei im Fluid Template nutzen: Damit nun unser Template weiss, das es eine Layout Datei berücksichtigen muss, ergänzen wie die Templatedatei wie folgt:
<f:layout name="Default" />

<f:section name="Main">

    <div class="row">
        <div class="col-md-12">
            <f:cObject typoscriptObjectPath="lib.content" />
        </div>
    </div>

</f:section>
Nach dem Löschen der Caches wird im Frontend vor dem Seiteninhalt der Inhalt aus dem Partial Header.html und nach dem Content der Footer Inhalt ausgegeben. Somit können wir zentral die Seitenbereiche Header und Footer gestalten ohne jeweils die Templates modifizieren zu müssen.