Fluid Templates

Fluid Templates sind der Standard zur Generierung von Inhalten in TYPO3. Dies gilt für das Templating, also die Gestaltung von HTML-Vorlagen für die gesamte Webseite, genauso wie für die Gestaltung des HTML-Outputs einer Extension.

Im Prinzip reicht ein Fluid Template für die Gestaltung einer einfachen Webseite aus. Hier schilder wir ein Beispiel für das HTML-Konstrukt einer Webseite, die aus den Bereichen

• Header
• Main
• Footer

besteht.

<header id="header">  
  <div class="row">
    <div class="col-md-12 col-sm-12">
      [...Hier der Header...]
    </div>
  </div>
</header>

<main id="main">  
  <div class="row">
    <div class="col-md-12 col-sm-12">
      [...Hier der Inhalt...]
    </div>
  </div>
</main>

<footer id="footer">  
  <div class="row">
    <div class="col-md-12 col-sm-12">
      [...Hier der Footer...]
    </div>
  </div>
</footer>

Die Inhalte der drei Bereiche sind mit einer ID versehen, damit sie per CSS bearbeitet werden können.

In den meisten Fällen wird man den gesamten Inhalt der Webseite nicht über ein einziges Basis Template darstellen, sondern dieses in einzelne Teilbereiche gliedern. Der Inhaltsbereich wird in einer Section dargestellt. Diese Partials bieten mehrere Vorteile. So werden die einzelnen Vorlagen der Webseite übersichtlicher und kürzer. Zudem sind Anpassung im Quelltext der Vorlagen einfacher und können per GIT versioniert werden.

<f:render section="main" />
  <main id="main">  
    <div class="row">
      <div class="col-md-12 col-sm-12">
        [...Hier der Inhalt 1...]
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        [...Hier der Inhalt 2...]
      </div>
    </div>
  </main>
</f:render>

Der Blog der Internetagentur Irma Berscheid-Kimeridze. Dies ist das Template für die ListAction, dass als Standard bei leerem Aufruf des Blog geladen wird. Die Darstellung entspricht im Layout nicht der genauen Source des Templates, die Einbindung eines zweispaltigen Layouts mit Bootstrap Styles wurde der Übersichtlichkeit halber weggelassen. Bei vielen Einbindungen von Partials wurden übergebene Werte weggelassen, um die Zeilen des Quelltextes zu kürzen. Dieses ist der Darstellung des Prinzips förderlich.

<f:layout name="Default" />

<f:section name="main">

Wichtige Elemente hier:

• Einbindung von Partials (BlogList)
• Übergabe von Objekten mit Daten
• Abfrage von Conditions mit if / else Beziehung

## Liste aller Beiträge im Blog
<div class="div_kasten">
  <f:render partial="Blog/BlogList" arguments="{blogs:blogs}" />
</div>
  
## Links im Button Layout zur Weiterschaltung
<div class="div_kasten">
  <f:if condition="{blogcounter}">
    <f:if condition="{controller}=='blog'">
      <f:render partial="Blog/Blogbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
    <f:if condition="{controller}=='kat'">
      <f:render partial="Blog/Katbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
    <f:if condition="{controller}=='tag'">
      <f:render partial="Blog/Tagbuttons" arguments="{blogs:blogs, blogcounter: blogcounter}" />
    </f:if>
  </f:if>	
</div>		

Wichtige Elemente hier:

• Conditions mit Vergleichsparametern
• for / each Schleife
• Generierung von Links mit Übergabe von Parametern

<div class="blog_tags">
  
  ## Wolke mit Suchbegriffen unterschiedlicher Gewichtung
  <f:if condition="{tagcloudarray}">
    <f:then>
      <f:for each="{tagcloudarray}" as="tag">
        <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
          {tag.name}
        </f:link.action> 
      </f:for>
    </f:then>
  </f:if>		
  
  ## Verfügbare Kategorien    
  <f:if condition="{kat}">
    <f:for each="{kat}" as="kategoriehead">
      <f:if condition="{kategoriehead.uid}=={blogkatlink}">
        <f:then>
          <f:link.action action="list" pluginName="Kategories" arguments="{blog: blog, katid: kategoriehead.uid}">
            {kategoriehead.name} ({kategoriehead.counter})
          </f:link.action>						
        </f:then> 
        <f:else>
          <f:link.action action="list" pluginName="Kategories" arguments="{blog: blog, katid: kategoriehead.uid}">
            {kategoriehead.name} ({kategoriehead.counter})
          </f:link.action>
        </f:else> 
      </f:if>
    </f:for>
  </f:if>
  
  ## Verfügbare Tags
  <f:if condition="{tagshowarray}">
    <f:then>
      <f:for each="{tagshowarray}" as="tag">
        <f:if condition="{tag.uid}=={blogtaglink}">
          <f:then>
            <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
              {tag.name} ({tag.counter})
            </f:link.action>
          </f:then> 
          <f:else>
            <f:link.action action="list" pluginName="Tag" arguments="{blog: blog, tagid: tag.uid}">
              {tag.name} ({tag.counter})
            </f:link.action>
          </f:else> 
        </f:if>
      </f:for>
    </f:then>
  </f:if>
  
</div>

</f:section>