Fluid-Layout entwickeln für Typo3

Aus Debacher-Wiki
Version vom 19. November 2020, 12:25 Uhr von Debacher (Diskussion | Beiträge) (Layout, Template und Partial)
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.

Die meisten Elemente der Datei sind HTML-Elemente. Lediglich die Tags die mit f: beginnen haben eine besondere Bedeutung. Die meisten dieser Tags binden weitere Elemente ein, die Partials. Dies sind hier Elemente, die in mehreren Templates benötigt werden. Es erleichtert die Pflege des Codes, wenn solche Teile nicht mehrfach geschrieben werden.

Bei meinen Templates ist jeweils das letzte Partial die Datei Footer.html

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

Sowohl im Template, als auch im Partial tauchen dann Elemente auf, wie

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