TYPO3 Webseiten mit Fluid Templates
#Code

TYPO3 Webseiten mit Fluid Templates

TYPO3 Fluid Templates sind mittlerweile der Standard zur Erstellung von Websites in TYPO3. Mittels einer Extension, die standardmäßig vorinstalliert ist, wird Fluid eingebunden und erleichtert/verschönert das Bauen von Templates enorm.

Wie startet man ein Template?

Die klassische Ordnerstruktur beinhaltet zwei wichtige Ordner: "Templates" und darin "Layouts".

Der schönste und flexibelste Weg ist eine eigene Extension für das Template zu bauen.

Templates

Es können verschiedene Templates erstellt werden, die verschiedenen Seiten im Backend zugeordnet werden können. Wichtig ist, dass man in seinem Template (z.B.: Main.html) auf die Layout-Section referenziert:

 

<f:layout name="main" />
  <f:section name="Main">
</f:section>

 

 

Partials

Zur Übersicht und zum sauberen Arbeiten macht es Sinn Module und wiederkehrende Elemente in Partials auszulagern. Diese kann man ebenfalls im Ordner "Templates", im Ordner "Partials" abspeichern.

Ein Partial implementiert man in einem Template mit folgendem Snippet:

 

<f:render partial="Header" arguments="{_all}" />

 

In diesem Fall wird die Datei Header.html aus dem Ordner "Partials" eingebunden.

Templates in TYPO3 Registrieren und zuweisen

Unsere Extension ist installiert, ein Template eingerichtet, doch im Front-end wird noch nichts angezeigt, denn uns fehlen noch ein paar Schritte:

Template-Pfade

Unsere Seite weiß bislang noch nicht wo sie nach den Templates suchen soll. Wir müssen ihr deshalb zeigen wo sie zu finden sind. In unseren Konstanten im Backend, oder besser in einer ausgelagerten Datei, fügen wir folgendes Snippet ein:

 

plugin.tx_meineWebseite {
  view {
    templateRootPath = EXT:meineWebseite/Resources/Private/Templates/
    partialRootPath = EXT:meineWebseite/Resources/Private/Partials/
    layoutRootPath = EXT:meineWebseite/Resources/Private/Layouts/
  }
}

 

Hier verweisen wir auf unsere Extension, ein Pfad zum fileadmin ist ebenfalls möglich.

Template im Backend aufrufen

Im Backend gibt es sogenannte Backend-Layouts, die den jeweiligen Seiten, bzw. rekursiv, zugewiesen werden können. Hat man eines erstellt, findet man sie in den Seiteneigenschaften unter "Erscheinungsbild".

Nun benötigt man erneut etwas TypoScript, um die Templates auf die jeweiligen Backend-Layouts zu mappen. In diesem Fall registrieren wir zwei Templates, die sich auf die jeweilige ID des Backend-Layouts berufen:

 

page.10 = FLUIDTEMPLATE
page.10 {
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = levelfield:-2, backend_layout_next_level, slide
    key.override.field = backend_layout
    
    // Default template
    default = TEXT
    default.value = EXT:meineWebseite/Resources/Private/Templates/Main.html
    
    // Template file for backend layout with uid 2
    2 = TEXT
    2.value = EXT:meineWebseite/Resources/Private/Templates/Subpage.html
  }
}

 

Tipp: Um nicht jeder Seite ein spezifisches Backend-Layout zuweisen zu müssen, kann man auch die Funktion "Unterseiten zuweisen" nutzen. Hier wird das eingetragene Layout für alles Unterseiten als Standard gesetzt, der natürlich individuell überschrieben werden kann.

Inhalte einfügen

Bislang ist es zwar so, dass die jeweiligen Seiten im Front-end ausgegeben werden, man kann sie jedoch noch nicht bearbeiten. Dazu fehlen uns noch einige Schritte:

Schritt 1

 

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

 

Dieses kann an beliebiger Stelle im Template stehen, von beliebigen HTML-Elementen umgeben sein, solange es zwischen dem Section-Aufruf (s.o.) steht.

Schritt 2

 

lib.mainContent < styles.content.get
lib.mainContent.select.where = colPos = 1

 

Die colPos darf nur einmal vergeben werden, darauf muss unbedingt geachtet werde

 

// 1. Menü

lib.mainContent = HMENU
lib.mainContent {

 1 = TMENU
 1 {
 wrap = <ul>|</ul>
 expAll = 1
 NO.wrapItemAndSub = <li class="mainMenu-itemLevel1">|</li>

 ACT < .NO
 ACT = 1
 ACT.ATagParams = class="active"
 }
}

// 2. Statisches Element,
// basierend auf der ID eines Content Elements im Backend

lib.mainContent = RECORDS
lib.mainContent {
 tables = tt_content
 source = 25
}

 

Vom Prinzip her haben wir so recht schnell ein sehr belastbares und flexibles Webseiten-Template erstellt. Mein persönliches Highlight ist, dass man kein PHP im HTML nutzt, was viel schöner und übersichtlicher ist!

Offizielle Fluid Dokumentation