TYPO3 Template: Backend und Frontend einrichten

Backend und Frontend in TYPO3 gestalten

Wenn Sie Ihren Server für TYPO3 eingerichtet haben und ein neues Projekt starten möchten, ist der nächste Schritt das Templating. Darunter versteht man drei Schritte, mit denen man das Grundgerüst für eine Webseite erzeugt:

  • Erstellung eines Root Templates in TypoScript und mindestens eines Backend Layouts
  • Kopplung der Inhalte des Backend Layouts an das Frontend über ein Setup und Konfiguration mittels TypoScript
  • Erstellung und Anbindung eines Frontends als Fluid Template

Auf den folgenden Seiten erklären wir Ihnen die Schritte zur Gestaltung Ihrer Webseite. 

Root Template für Webseite anlegen

Root Template in TYPO3 anlegen und konfigurieren

Der erste Schritt zur Anlage einer neuen Webseite mit TYPO3 ist die Anlage eines Root Templates, auch Basis Template oder Wurzeltemplate genannt. Erfahren Sie mehr über die Konfiguration der grundlegenden Vorlage Ihrer Webseite!

Backend Layout erstellen

Backend Layout für TYPO3 Template und Setup - Konfiguration Backend Layout

Ein Backend Layout in TYPO3 legt fest, an welchen Stellen im Backend redaktionelle Inhalte eingegeben werden können. Damit geben Sie redaktionelle arbeitenden Personen die Möglichkeit, Inhalte in TYPO3 einzugeben.

Syntax zur Einbindung von TypoScript

TYPO3 Konfiguration als Datei in Webseite einbinden: TypoScript Syntax

Typoscript (TS) ist die TYPO3 eigene Programmiersprache, mit der man Konfigurationen in TYPO3 schreibt. Die Einrichtung einer Webseite mit TypoScript kann man in einer Textdatei ablegen, was viele Vorteile mit sich bringt. In diesem Kapitel beschreiben wir Ihnen die verschiedenen Wege, eine TypoScript Datei in Ihre TYPO3-Webseite einzubinden.

Setup mit TypoScript

Setup TYPO3 TypoScript: PAGE Objekt, Fluid Templates, CSS und JavaScript

Sobald man das Root Template der Webseite angelegt hat, kann man mit der Einbindung des Setup der Webseite in TypoScript beginnen. In diesem Setup der Seite wird das PAGE Objekt erzeugt, das für den Aufbau des Quelltextes der Seite sorgt. Dabei ist es notwendig, ein HTML-Template für die Seite einzubinden. Zudem werden Suchpfade für das Layout und Partials vorgegeben. Schließlich werden die Inhalte des Backend Layouts mit Objekten in den HTML-Templates verknüpft.

Konfiguration mit TypoScript

Config TYPO3 TypoScript ✔ Werte für gesamte Webseite konfigurieren

Die Konfiguration bestimmter Werte für den Betrieb einer TYPO3 Webseite erledigt man am besten, ebenso wie im Setup, durch das Einbinden einer eigenen Datei. Diese sollte ebenfalls im Verzeichnis einer Provider Extension enthalten sein.

Fluid Templates

Fluid Templates ✔ HTML-Templates TYPO3 ✔ Layout, Partials. Suchpfade

Um die Inhalte einer Webseite generieren zu können, braucht TYPO3 mindestens eine HTML-Vorlage, die das Grundgerüst des Quellcodes einer Webseite bereitstellt. Es ist zweckmäßig, nicht nur eine einzige Datei als ein solches Gerüst zu definieren, sondern dieses in mehrere einzelne Dateien zu zerlegen, die dann unterschiedliche Bestandteile der Webseite aufbauen.