So erstellen Sie eine benutzerdefinierte Seitenvorlage in TYPO3

Typo3

Mit TYPO3 können Sie das Aussehen und die Funktionsweise Ihrer Website selbst bestimmen. Eine der besten Möglichkeiten, diese Flexibilität zu nutzen, ist die Erstellung einer eigenen Seitenvorlage. Mit einer benutzerdefinierten Vorlage können Sie eine Seite ganz nach Ihren Wünschen gestalten, anstatt ein Standardlayout zu verwenden, das nicht zu Ihrer Marke oder Ihren Inhalten passt.

In dieser Anleitung wird der TYPO3-Prozess Schritt für Schritt in einfacher Sprache erklärt.

Was ist eine Seitenvorlage eigentlich?

Stellen Sie sich eine Seitenvorlage wie einen Bauplan für ein Haus vor. Sie legt fest, wo sich die einzelnen Elemente auf einer Seite befinden: die Kopfzeile oben, das Menü an der Seite, der Hauptinhalt in der Mitte und die Fußzeile unten. Sobald Sie diesen Bauplan erstellt haben, nutzt TYPO3 ihn, um Ihre Inhalte auf Ihrer gesamten Website einheitlich darzustellen.

Anforderung

Bevor Sie beginnen, vergewissern Sie sich, dass Sie Folgendes zur Hand haben:

  • Zugriff auf das TYPO3-Backend (den Administrationsbereich)
  • Ein Basis-Site-Paket oder ein Erweiterungsordner, in dem Ihre Vorlagendateien gespeichert werden
  • Ein Texteditor zum Schreiben einfacher Codezeilen (HTML und ein wenig TypoScript)

Sie müssen kein Programmierprofi sein. Grundkenntnisse in HTML reichen aus, um loszulegen.

Schritt 1: Erstellen Sie ein Website-Paket

TYPO3 speichert Vorlagen in einem sogenannten „Site-Paket“. Dabei handelt es sich lediglich um einen Ordner, der alle Ihre Designdateien enthält: Layouts, Vorlagen und Teilvorlagen.

Erstellen Sie in Ihrem Erweiterungsordner einen neuen Ordner für Ihr Site-Paket. Eine typische Struktur sieht wie folgt aus:

my_sitepackage/
├── Configuration/
├── Resources/
│   ├── Private/
│   │   ├── Layouts/
│   │   ├── Templates/
│   │   └── Partials/
│   └── Public/

Diese Struktur sorgt für Ordnung. Layouts enthalten die allgemeine Seitenstruktur, Vorlagen das Design für eine bestimmte Seite und Teilvorlagen kleine Elemente, die Sie wiederverwenden, wie beispielsweise eine Kopf- oder Fußzeile.

Schritt 2: Erstellen der Layout-Datei

Im Layout legen Sie das Grundgerüst der Seite fest. Dies ist der gemeinsame Rahmen, in den jede Seite eingebettet wird, daher behalten wir es als Standardlayout bei. Erstellen Sie im Ordner „Layouts“ eine Datei mit dem Namen „Default.html“. Diese Datei enthält in der Regel die grundlegende HTML-Struktur sowie Platzhalter für die Kopfzeile, den Hauptinhalt und die Fußzeile.

Hier ist ein einfaches Beispiel:

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

  <main>
    <f:render section="Main" />
  </main>

  <f:render partial="Footer" arguments="{_all}" />
</body>
</html>

Das sagt TYPO3: „Zeige zuerst die Kopfzeile an, dann den Inhalt des Hauptbereichs und schließlich die Fußzeile.“

Schritt 3: Erstellen Sie Ihre eigene Seitenvorlage

Wechseln Sie nun in den Ordner „Templates“. Anstatt einfach nur eine weitere leere Seite zu erstellen, erstellen wir eine Seite für einen bestimmten Zweck, beispielsweise eine benutzerdefinierte Landingpage oder eine Serviceseite. Erstellen Sie eine Datei mit dem Namen „CustomPage.html“. Hier wird der eigentliche Inhalt dieser Seite untergebracht, und sie wird mit dem Layout verknüpft, das Sie in Schritt 2 erstellt haben.

<f:layout name="Default" />

<f:section name="Main">
  <h1>{data.title}</h1>
  <p>{data.bodytext}</p>
</f:section>

Diese Vorlage weist TYPO3 an, für den Rahmen das Layout „Default“ zu verwenden, und füllt den Hauptbereich mit dem Seitentitel und dem Fließtext. Sie können diese Datei entsprechend der Art der Seite, die Sie erstellen, umbenennen, beispielsweise in „LandingPage.html“ oder „ServicePage.html“, damit sie sich später leicht von anderen Vorlagen unterscheiden lässt.

Schritt 4: Wiederverwendbare Teilvorlagen hinzufügen

Teilvorlagen sind kleine Codeabschnitte, die Sie in verschiedenen Vorlagen immer wieder verwenden können, beispielsweise eine Kopf- oder Fußzeile. Erstellen Sie im Ordner „Partials“ Dateien mit den Namen „Header.html“ und „Footer.html“. Diese bleiben auf Ihrer gesamten Website unverändert, auch wenn Sie später weitere benutzerdefinierte Seitenvorlagen hinzufügen.

<header>
  <h1>My Website</h1>
  <nav>
    <!-- your menu here -->
  </nav>
</header>

Durch die Verwendung von Partials müssen Sie denselben Code nicht immer wieder neu schreiben. Sollten Sie jemals Änderungen an Ihrer Kopfzeile vornehmen müssen, müssen Sie diese nur an einer Stelle aktualisieren, und jede Seite, die diese Kopfzeile verwendet, wird ebenfalls aktualisiert.

Schritt 5: TypoScript einrichten

TypoScript ist die Konfigurationssprache, die TYPO3 im Hintergrund verwendet. Sie teilt TYPO3 mit, welche Layout-, Template- und Partial-Ordner verwendet werden sollen und welche Template-Datei für diese benutzerdefinierte Seite geladen werden soll. Erstellen Sie in Ihrem Site-Paket eine TypoScript-Konfigurationsdatei und fügen Sie etwa folgenden Code hinzu:

page = PAGE
page {
  10 = FLUIDTEMPLATE
  10 {
    templateRootPaths.0 = EXT:my_sitepackage/Resources/Private/Templates/
    layoutRootPaths.0 = EXT:my_sitepackage/Resources/Private/Layouts/
    partialRootPaths.0 = EXT:my_sitepackage/Resources/Private/Partials/
    templateName = CustomPage
  }
}

Beachten Sie, dass „templateName“ auf „CustomPage“ verweist und nicht auf „Default“. Dadurch wird TYPO3 angewiesen, Ihre benutzerdefinierte Seitenvorlage zu laden, während weiterhin das Standardlayout sowie die darunter liegenden gemeinsamen Teilvorlagen für Kopf- und Fußzeile verwendet werden.

Schritt 6: Binden Sie Ihr Site-Paket in TYPO3 ein

Rufen Sie das TYPO3-Backend auf, öffnen Sie das Modul „Template“ und fügen Sie die TypoScript-Konfiguration Ihres neuen Site-Pakets ein. Mit diesem Schritt wird alles, was Sie erstellt haben, mit der Live-Website verknüpft.

Schritt 7: Die Vorlage einer Seite zuweisen

Öffnen Sie nun die Seite, deren Design Sie anpassen möchten, rufen Sie die Seiteneigenschaften auf und wählen Sie Ihre benutzerdefinierte Vorlage aus, falls Sie mehr als eine eingerichtet haben. Wenn Sie bisher nur eine erstellt haben, wird TYPO3 diese automatisch verwenden, sobald das TypoScript aktiv ist.

Schritt 8: Vorschau und Anpassungen

Sobald alles miteinander verbunden ist, öffnen Sie die Seite im Frontend und sehen Sie sich Ihre Vorlage in Aktion an. Es ist ganz normal, dass einige kleine Änderungen erforderlich sind – Elemente verschieben, Abstände anpassen, Farben korrigieren –, bis alles richtig aussieht.

Bitte kontaktieren Sie uns unter wargis@bay20.com/manish@bay20.com oder rufen Sie uns unter +91-9582784309 oder +91-8800519180 an, wenn Sie Unterstützung im Zusammenhang mit Typo3 benötigen. Sie können auch unsere Website besuchen, um sich über unser Leistungsangebot zu informieren.