Fluid-Layout entwickeln für Typo3

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche

Schon seit Typo3 8.x basieren unsere Typo3-Layouts auf der Fluid-Engine. Damit gibt es für die Gestaltung der Seite folgende Elemente:

  • PHP-Programme wie z.B. die View-Helper
  • HTML-Code in Layout, Template und Partial
  • Typoscript-Code
  • CSS

PHP

Typo3 selber ist in der Programmiersprache PHP geschrieben, wie viele andere CMS auch. Damit ist es auch abhängig von den Versionen dieser Sprache, aktuell ist 7.4. Typo3 funktioniert nicht mit jeder PHP-Version.

Normalerweise hat man für die Layout-Entwicklung eher selten direkt mit PHP zu tun. Lediglich für die Entwicklung der nettgrids habe ich z.B. PHP-Code benötigt, in Form der ViewHelper.


Layout, Template und Partial

Hierbei handelt es sich um eine hierarchische Struktur. Zu einem Layout können mehrere Templates gehören und zu den Templates verschieden Partials. Bei meinen Gestaltungen ist das Layout fast leer, DefaultLayout.html besteht nur aus einer Zeile:

 <f:render section="inhalt" />

Die eigentliche Struktur steckt in den Templates:

  • einspaltig.html
  • zweispaltig.html
  • dreispaltig.html

Hier einmal das einfachste Template einspaltig.html

<f:layout name="DefaultLayout" />
<f:section name="inhalt">

<div id="einspaltig">

  <div class="container">

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

  <f:render partial="navbar" />
  <f:render partial="service" />
  <f:render partial="rootline" />

    <div id="inhalt" class="row equalheight">

      <div class="col-md-12 equal" id="hauptinhalt">
      <a id="content" name="content"></a>
          <!--TYPO3SEARCH_begin-->
          <f:format.raw>{hauptInhalt}</f:format.raw>
          <!--TYPO3SEARCH_end-->
      <p style="font-size:0px">&nbsp;<p> 
      </div>

    </div>  
    <f:render partial="footer" />
  </div>
 </div>
</f:section>

Die ersten beiden Zeilen stellen den Bezug zum übergeordneten Layout dar.