Sie befinden sich hier: Startseite » TYPO3 » Inhalte ausgeben » Fluid-Template in TypoScript

Fluid-Template einbinden mit dem TypoScript-Objekt FLUIDTEMPLATE

Mit dem TypoScript-Objekt FLUIDTEMPLATE lässt sich die neue Template-Engine Fluid über TypoScript zum rendern der Frontend-Ausgabe einsetzen.

Grundlagen

Seit der TYPO3-Version 4.5 ist es mit dem TypoScript Content-Object FLUIDTEMPLATE möglich, die neue Template-Engine Fluid zur Frontent-Ausgabe über TypoScript einzusetzen. Voraussetzung ist die Installation der System-Extensions Extbase und Fluid. 

Zwar ist die Template-Engine Fluid vor allem auf den Umgang mit Objekten und Arrays aus der objektorientierten Programmierung mit Extbase oder FLOW3 optimiert, einige Vorteile gegenüber dem klassischen TEMPLATE-Objekt in TypoScript lassen sich aber dennoch nutzen.

Fluid Template-Dateien
Template-, Layout- und Partial-Dateien

Das TypoScript cObject FLUIDTEMPLATE

FLUIDTEMPLATE kann alternativ zum klassischen TypoScript-Objekt TEMPLATE eingesetzt werden.

Mit dem Parameter file wird die zu verwendende Template-Datei angegeben.

Die Parameter layoutRootPath und partialRootPath definieren, wo nach Layout- und Partial-Dateien gesucht wird, die in der Template-Datei verwendet werden.

Unter variables können Platzhalter für die Template-Datei definiert und Inhalte zur Ausgabe zugewiesen werden.

TypoScript Setup

page.10 = FLUIDTEMPLATE 
page.10 {
  file = fileadmin/templates_fluid/template01.html
  partialRootPath = fileadmin/templates_fluid/partials/
  layoutRootPath = fileadmin/templates_fluid/layouts/
  variables {
    headerLogo < temp.headerLogo
    headerNavi < temp.headerNavi
    printHeader < temp.printHeader
    leftCol < styles.content.getLeft
    mainNavi < temp.mainNavi
    subNavi < temp.subNavi
    rootlineNavi < temp.rootlineNavi
    contentGet < styles.content.get
    footerText < temp.footerText
    footerNavi < temp.footerNavi
  }
}

Templates, Layouts und Partials

Mit der Template-Datei wird der Einsatz von Layouts und Partials gesteuert. Layouts können verwendet werden, um einen wiederkehrenden Rahmen, z. B. den Header und Footer einer Seite auszulagern und so in mehreren Templates zu verwenden. Partials können für kleinere Teile der Seitenausgabe verwendet werden, die dann ebenfalls in mehreren Templates zur Verfügung stehen, z. B. eine linke Spalte mit Sub-Navigation, die in verschiedenen Templates benötigt wird.

Fluid Template

<f:layout name="default" />
<f:section name="body">
  <f:render partial="left_col" arguments="{subNavi:subNavi, leftCol:leftCol}" />
  <div id="mainCol">
    <f:format.html parseFuncTSPath="">{rootlineNavi}</f:format.html>
    <!--TYPO3SEARCH_begin-->
    <f:format.html parseFuncTSPath="">{contentGet}</f:format.html>
    <!--TYPO3SEARCH_end-->
  </div>
</f:section>

Layouts: default.html

<div id="headerAndBody">
  <div id="header">
    <div id="headerInner">
      <f:format.html parseFuncTSPath="">{headerLogo}</f:format.html>
      <f:format.html parseFuncTSPath="">{headerNavi}</f:format.html>
      <f:format.html parseFuncTSPath="">{mainNavi}</f:format.html>
    </div>
  </div>
  <div id="printHeader" style="display:none;">
    <f:format.html parseFuncTSPath="">{printHeader}</f:format.html>
  </div>
  <div id="body">
    <f:render section="body" />	
  </div>
</div>
<div id="footer">
  <div id="footerInner">
    <f:format.html parseFuncTSPath="">{footerText}</f:format.html>
    <f:format.html parseFuncTSPath="">{footerNavi}</f:format.html>
  </div>
</div>

Partials: left_col.html

<div id ="leftCol">
  <f:format.html parseFuncTSPath="">{subNavi}</f:format.html>
  <f:format.html parseFuncTSPath="">{leftCol}</f:format.html>
</div>

View-Helper

View-Helper sind spezielle Tags, mit denen aus der Template-Datei Funktionen der Template-Engine Fluid aufgerufen werden. Neben den Standard-View-Helpern können selbst programmierte View-Helper verwendet werden.

Ausgabe von HTML-Inhalten mit dem View-Helper f:format.html

Da Fluid die über Variablen eingefügten Inhalte mit der PHP-Funktion htmlspecialchars bearbeitet, muss für die Ausgabe von Inhalten mit HTML-Code der View-Helper f:format.html verwendet werden. Dieser View-Helper gibt die Inhalte an die TypoScript-Funktion parseFunc weiter. Standardmäßig wird die Konfiguration lib.parseFunc_RTE verwendet. Mit dem Parameter parseFuncTSPath kann eine alternative TypoScript-Konfiguration für die Funktion parseFunc angegeben werden. Da  lib.parseFunc_RTE für das Parsen von Inhalten aus dem RTE konfiguriert ist, kann für fertig HTML-formatierte Inhalte der Pfad zu einer eigenen Konfiguration oder der Parameter parseFuncTSPath mit einem leeren Wert verwendet werden.

Neuer View-Helper f:format.raw

Seit der TYPO3-Version 4.6 ist der View-Helper f:format.raw verfügbar, der die übergebenen Inhalte dann ohne weitere Verarbeitung ausgeben kann.

Ausgabe mit dem View-Helper f:cObject

Anstatt die von TypoScript generierten Inhalte den Variablen des FLUIDTEMPLATE-Objekts zuzuweisen, können TypoScript-Libraries auch direkt aus dem Fluid-Template aufgerufen werden. Hierzu wird dem View-Helper f:cObject, der Pfad zur TypoScript-Library mit dem Parameter typoscriptObjectPath übergeben: 

 

<f:cObject typoscriptObjectPath="lib.mainNavi" />