Fluid Frontend Templates integrieren
Fluid Templates anlegen
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>
<div class="row"> <div class="col-md-12"> <f:cObject typoscriptObjectPath="lib.content" /> </div> </div>
Verknüpfung von Backend- und Frontendtemplates in TYPO3
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/ } } }
... 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/ ...
Fluid Engine: Templates - Layouts - Partials
<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>