Kaufmann Digital Logo

TYPO3 Templates erstellen mit Blick auf Neos CMS

TYPO3 Templates erstellen mit Blick auf Neos CMS

Bereits heute empfehlen wir Website Templates im TYPO3 CMS konsequent mit Hilfe von TYPO3 Fluid zu erstellen und als TYPO3-Extension anzulegen. Es bietet viele Vorteile für die Zukunft: u. a. vereinfacht es den Ein- und späteren Umstieg auf das kommende Neos CMS.

Template als TYPO3 Extension erstellen

Das TYPO3 CMS bietet viele Wege bei der Erstellung des Website Templates: Die altbekannte Marker-Vorgehensweise, durch zusätzliche TYPO3 Erweiterungen wie z. B. automaketemplate oder TemplaVoila sowie TYPO3 Fluid. Im Neos CMS wird mit TYPO3 Fluid die mächtigste Variante den Standard darstellen. Im Folgenden werden in Anlehnung an Neos die Vorteile von TYPO3 Fluid dargestellt und ein möglicher Weg aufgezeigt um sich schnell im kommenden CMS zu Recht zu finden.

Wir nutzen die Vorteile von TYPO3 Fluid gewinnbringend, denn

... wir nutzen das Best of beider Systeme.
Mit TYPO3 Fluid nutzen wir eine zukunftssichere Template-Engine, die sowohl bei TYPO3 CMS, als auch bei TYPO3 Neos zum Einsatz kommt.

... wir erhalten einheitliche Ordnerstrukturen und Dateinamen.
Angelehnt an die zukünftige Ordnerstruktur aus dem Neos CMS finden wir uns in Websitetemplates schnell und einfach zurecht. Unsere Anpassungen werden somit schneller und sicherer.

... wir können die Dateien des Website Templates zentralisieren.
Alle templatebezogenen Dateien und Bilder speichern wir jetzt zentral in einem Ordner.

... die Umwandlung eines TYPO3 CMS Templates in ein Neos Site Package ist einfacher.
Wir profitieren von der verbesserten Portierbarkeit von Fluid-basierten Websitetemplates aus dem TYPO3 CMS in ein funktionsfähiges TYPO3 Neos Site Package.

Website Template als TYPO3 Extension

Unser Tipp für das Website Template: Immer eine eigene TYPO3 Erweiterung erstellen, also z.B. kaufmann_template. In Neos wird dies später das bereits erwähnte Site Package sein.

Ordnerstruktur des Website Templates

Absolut erfolgsentscheidend ist, sich in beiden Systemen an eine einheitliche Ordnerstruktur zu halten. Folgende Struktur ist an Neos angelehnt:

  • kaufmann_template/Resources/Private/
  • kaufmann_template/Resources/Private/Layouts/
  • kaufmann_template/Resources/Private/Partials/
  • kaufmann_template/Resources/Private/Templates/
  • kaufmann_template/Resources/Private/TypoScript/
  • kaufmann_template/Resources/Private/TypoScript/Setup
  • kaufmann_template/Resources/Private/TypoScript/Library
  • kaufmann_template/Resources/Private/TypoScript/Constants
  • kaufmann_template/Resources/Private/TypoScript/Nodes
  • kaufmann_template/Resources/Public/
  • kaufmann_template/Resources/Public/Fonts/
  • kaufmann_template/Resources/Public/Images/
  • kaufmann_template/Resources/Public/JavaScript/
  • kaufmann_template/Resources/Public/JavaScript/Library
  • kaufmann_template/Resources/Public/Stylesheets/

In den Resources Ordnern wird jetzt das komplette Website Template verteilt. Der Ordner Private signalisiert, dass diese Dateien nicht öffentlich zugänglich sind. Hierfür hinterlegen wir im TYPO3 CMS zustätzlich eine .htaccess Datei.

Alle öffentlich verfügbaren Template Dateien wie Fonts, JavaScript, Images sowie Stylesheets hinterlegen wir strukturiert unter Resources im Ordner Public.

So strukturieren Sie Ihr Website Template

Im Ordner Private finden sich die Ordner Layouts, Partials, Templates und TypoScript:

In TypoScript lagern wir das komplette TypoScript in Dateien aus. Die zwei Dateien setup.txt und constants.txt stellen die Hauptdateien dar, welche alle weiteren Dateien aus den selbigen Unterordnern inkludieren. So sollte es im Unterordner Setup z.B. die Dateien Page.ts und Config.ts - geben, die in der Setup.ts Datei eingebunden werden. Wir verwenden noch den Ordner Library, in dem allgemeine Objekte definiert werden wie z.B. lib.firstLevelMenue. Unter Nodes, die so genannten Seitenknoten im kommenden Neos, hinterlegen wir zur besseren Übersicht Erweiterungs-Templates wie beispielsweise Kontakt.ts mit speziellen TypoScript Einstellungen für die jeweilige Seite.

Hinweis: In Neos können wir TypoScript bzw. TypoScript2 künftig nur noch in Dateien speichern. Mit diesem Wissen empfehlen wir, sich schon jetzt an diese Regel zu halten. Sie garantiert eine sichere Versionskontrolle!

Im Ordner Layouts hinterlegen wir den generellen HTML-Aufbau des Website Templates. Der Ordner Partials beinhaltet häufig benutzte Elemente, die an mehreren Stellen im Template eingefügt werden. Die unterschiedlichen Templates werden im Unterordner Templates abgelegt.

Website Template installieren und konfigurieren

Das komplette Template installieren und konfigurieren wir in zwei simplen Schritten im TYPO3 CMS:

  1. Im Erweiterungs-Manager die Erweiterung auswählen und installieren.
  2. Im Seitenbaum bei der als Root-Seite gekennzeichneten Seite nun nur noch das TypoScript laden. Durch diesen Schritt werden alle Dateien inkludiert, die im Ordner TypoScript liegen.

TYPO3 Website Template Struktur zum Download

Zur Verdeutlichung habe ich eine Struktur eines TYPO3 Website Templates erstellt und auf GitHub zur Verfügung gestellt. Diese Vorgehensweise beim Erstellen von Templates hat sich für uns in Projekten und auch in Zusammenarbeit mit anderen Agenturen bewährt.

Jetzt downloaden!

Empfehlen Sie diesen Artikel