Fluid-Layout entwickeln für Typo3: Unterschied zwischen den Versionen

Aus Debacher-Wiki
Wechseln zu:Navigation, Suche
(Typoscript)
Zeile 100: Zeile 100:
  
 
Die Variable stammt übrigens aus dem Konstanten-Editor von Typo3. Hier gibt es Einstellmöglichkeiten für nettemplate, u.a. das Feld FooterText.
 
Die Variable stammt übrigens aus dem Konstanten-Editor von Typo3. Hier gibt es Einstellmöglichkeiten für nettemplate, u.a. das Feld FooterText.
 +
 +
Etwas aufwändiger ist das Listing für das HeaderImage:
  
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
Zeile 119: Zeile 121:
 
  }
 
  }
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
Auch hier wird ein Element erzeugt, diesmal eine IMG_RESOURCE, die bringt ihren HTML-Tag selber mit. Als Quelle für dieses Bild dient das Feld levelmedia der aktuellen Seite. Sollte sich auf der aktuellen Seite kein Eintrag finden, so wird durch das slide bei den Elternseiten gesucht.

Version vom 19. November 2020, 12:46 Uhr

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" />
oder
<f:cObject typoscriptObjectPath="lib.field_headerimage" />

Hierbei handelt es sich um Aufrufe von Typoscript, die wir im nächsten Abschnitt betrachten.

Will man etwas an der Struktur einer Seite verändern, so erfolgt das hier im Template. Manchmal soll z.B. das Partial Service.html nicht oben auf der Seite eingebunden werden, sondern im Bereich des Footers. Solche Struktur-Änderungen der Seite nimmt man hier vor.

Typoscript

Am Typoscript sind vermutlich schon viele Leute verzweifelt. Es handelt sich hierbei um eine eigene Programmiersprache im Kontext von Typo3. Typosrcipt bietet enorme Möglichkeiten, ist aber aus meiner Sicht nicht optimal dokumentiert bzw. schwer nachvollziehbar. CMS-Systeme wir Wordpress verzichten auf eine eigene Programmiersprache, hier erfolgt die Gestaltung direkt mit PHP.

# Dieser Code wird vom Partial footer angesprungen
 lib.field_footer = TEXT
 lib.field_footer {
    data = date : Y
    wrap (
     {$plugin.nettemplate.FooterText} (|)
    )
 }


Der Code sagt folgendes. Der Footer ist ein Element vom Typ TEXT und bekommt als erzeugten Inhalt eine Datumsangabe. In diesem Fall nur das aktuelle Jahr. Dieser Text wird umgeben (gewrappt) von den runden Klammern und dem Inhalt der Variablen $plugin.nettemplate.FooterText. Wraps spielen bei Typoscript eine große Rolle, wenn erzeugte Daten von konstantem Text umgeben werden sollen. Teile des Wraps können vo bzw. hinter den Daten stehen. Die Position der Daten im Wrap wird durch den senkrechten Strich markiert, der hier zwischen den runden Klammern kaum auffällt.

Die Variable stammt übrigens aus dem Konstanten-Editor von Typo3. Hier gibt es Einstellmöglichkeiten für nettemplate, u.a. das Feld FooterText.

Etwas aufwändiger ist das Listing für das HeaderImage:

 # Dieser Code wird von den Templates aus angesprungen
 lib.field_headerimage = IMG_RESOURCE
 lib.field_headerimage {
  file.import.data = levelmedia:2, slide
  file.treatIdAsReference = 1
  file.import.listNum = 0
  stdWrap.wrap (
     <div id="skiplink">
      <a class="skip" title="Direkt zur Navigation springen" href="#navigation">Zur Navigation springen</a><br>
      <a class="skip" title="Direkt zum Content springen" href="#content">Zum Content springen</a>
     </div>
     <div id="headerimage" style="background-image:url('/|'); "><a href="/">
      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAO2lmDQ==" alt="Zur Startseite" width="135" height="135">
     </a></div>
  )
 }

Auch hier wird ein Element erzeugt, diesmal eine IMG_RESOURCE, die bringt ihren HTML-Tag selber mit. Als Quelle für dieses Bild dient das Feld levelmedia der aktuellen Seite. Sollte sich auf der aktuellen Seite kein Eintrag finden, so wird durch das slide bei den Elternseiten gesucht.