Benutzer: Gast
Eintrag: Fluidtemplate als Content-Object

Fluidtemplate als Content-Object

von: marcel
Tags: Typo3, TypoScript
Kreise: Typo3

Beschreibung

Seit geraumer Zeit ist es möglich die Sys-Extension Fluid als Template-Engine im TypoScript zu nutzen. Damit kann man nun recht komfortabel ganze Seiten-Layouts mit voller Fluid-Funktionalität erstellen und auf das Marker- und Subparts-Gedöns verzichten.

Im Prinzip besteht die Template-Erstellung aus folgenden wenigen Schritten:

  1. Anlegen der Verzeichnisstruktur für
    • Layouts
      Ein Template benutzt meistens ein Layout – sozusagen der Wrap für das Template.
    • Templates
      Die eigentliche Kern-Dateien, wo das HTML definiert ist.
    • Partials
      Code-Abschnitte, um das Template besser strukturieren zu können oder wiederkehrendes HTML zu definieren.
  2. Definieren von Inhalten
    Ganz normal im TypoScript-Template-Setup (z.B. lib.content < styles.content.get)
  3. Erstellen des PAGE-Objects mit dem Content-Object FLUIDTEMPLATE.
    Wenn man mag, kann man zusätzlich noch das Backend-Layout auswerten und mit in das Frontend-Layout übernehmen.

TypoScript Template-Setup

Code: TypoScript (TS)
# Beispiel-Inhalte:
lib.content_0 < styles.content.get
lib.content_1 < styles.content.get
lib.content_1.select.where = colPos = 1
lib.example = TEXT
lib.example.value = Beispielinhalt
 
# rekursives Auslesen des Backend-Layouts, um es Fluid mitzugeben:
lib.backend_layout = TEXT
lib.backend_layout {
  data = levelfield:-1, backend_layout_next_level, slide
  override.field = backend_layout
}
 
# Seite definieren:
page = PAGE
page.typeNum = 0
 
# Fluid-Instanz als cObject erzeugen:
page.10 = FLUIDTEMPLATE
page.10 {
  # Haupt-Template-Datei definieren:
  file = fileadmin/resources/templates/Type0.html
  # Pfad zum Partials- und Layout-Ordner definieren:
  partialRootPath = fileadmin/resources/partials/
  layoutRootPath = fileadmin/resources/layouts/
  # Variablen mitgeben:
  variables {
    backend_layout < lib.backend_layout
    inTsDefinedTestVar = 666
    testString = TEXT
    testString.value = Hallo Welt
    testString.wrap = <h1>|</h1>
  }
}

Datei fileadmin/resources/templates/Type0.html:

Code: XML XHTML XSLT HTML
<!-- Benutze Layout-Datei fileadmin/resources/layouts/Type0.html: -->
<f:layout name="Type0" />
 
<!-- Backend-Layout 1 -->
<f:section name="layout1">
<f:render partial="Header" />
<f:render partial="BodyOneColumne" />
<f:render partial="Footer" />
</f:section>
 
<!-- Backend-Layout 2 -->
<f:section name="layout2">
<f:render partial="Header" />
<f:render partial="BodyTwoColumns" arguments="{myTestVar:inTsDefinedTestVar, testString:testString}" />
<f:render partial="Footer" />
</f:section>

Datei fileadmin/resources/layouts/Type0.html:

Code: XML XHTML XSLT HTML
<!-- hier wird entschieden, welches Backend-Layout benutzt werden soll. Man hätte dies auch bereits in der Template-Datei auswerten können. -->
<a name="top"></a>
<f:if condition="{backend_layout} == 1"><f:render section="layout1" /></f:if>
<f:if condition="{backend_layout} == 2"><f:render section="layout2" /></f:if>
<!-- <f:render section="name" /> ruft in der Template-Datei die passende Section auf. -->

Ordner fileadmin/resources/partials/:

In der Template-Datei werden je nach Backend-Layout dann die verschiedenen Abschnitte wie header, body und footer aus dem Partials-Ordner geholt:

fileadmin/resources/partials/Header.html
fileadmin/resources/partials/BodyOneColumne.html
fileadmin/resources/partials/BodyTwoColumnes.html
fileadmin/resources/partials/Footer.html

Hierbei wäre darauf zu achten, dass Variablen automatisch in der Template- und Layout-Datei zur Verfügung stehen, aber nicht an die Partials-Dateien weitergegeben werden. Dies kann man aber leicht mit dem Paramter arguments bewerkstelligen, welcher ein Array erwartet. Mehr zu Fluid, Variablen in Fluid und View-Helper gibt es hier: wiki.typo3.org/De:Fluid

Beispiel für fileadmin/resources/partials/BodyTwoColumnes.html:

Code: XML XHTML XSLT HTML
<div id="bodyWrap">
  <div id="body">
   
    <!-- Auswertung der durch TypoScript gesetzten und per arguments weitergegebenen Variablen myTestVar bzw. inTsDefinedTestVar und testString -->
    {testString}
    <f:if condition="{myTestVar} == 666">
      <!-- Aufruf des im Template-Setup definierten Abschnitts lib.example -->
      <f:cObject typoscriptObjectPath="lib.example" />
    </f:if>
   
    <div id="bodyCol1Wrap">
      <div id="bodyCol1">
        <!--TYPO3SEARCH_begin-->
          <!-- Aufruf des im Template-Setup definierten Abschnitts lib.content_0 -->
          <f:cObject typoscriptObjectPath="lib.content_0" />
        <!--TYPO3SEARCH_end-->
      </div>
    </div>
   
    <div id="bodyCol2Wrap">
      <div id="bodyCol2">
       
        <!--TYPO3SEARCH_begin-->
          <!-- Aufruf des im Template-Setup definierten Abschnitts lib.content_1 -->
          <f:cObject typoscriptObjectPath="lib.content_1" />
        <!--TYPO3SEARCH_end-->
       
      </div>
    </div>
   
    <div class="clear"></div>
   
  </div>
</div>
Es gibt noch keine Kommentare.