Eigenes Frontend Template in Contao

Das Frontend Template, welches in Contao 3 mitgeliefert wird, ist bereits sehr flexibel gestaltet. Über CSS können bereits viele Anpassungen ans Design gemacht werden und die Zeilen- und Spaltenaufteilung bietet die Möglichkeit, auch die Verteilung der Inhalte gut zu individualisieren. Möchte man aber trotzdem ein eigenes Frontend Template erstellen bietet Contao auch hierzu die Möglichkeit. In diesem Artikel gebe ich eine Schritt-für-Schritt Anleitung, was dazu nötig ist.

Schritt 1 – Verzeichnisse anlegen

Bevor wir uns an die Erstellung der Templatedateien machen, legen wir zuerst die passenden Ordner für unser neues Template ein. Öffne hierzu in deinem Contao Hauptverzeichnis die Ordner files und templates und lege darunter jeweils ein Verzeichnis mit dem Namen meintemplate an.

Verzeichnis meintemplate anlegen

Verzeichnis meintemplate anlegen

In den files werden dann später die benötigten Dateien für dieses Template abgespeichert – Bilder, Icons und Scriptdateien zum Beispiel.

Im templates Verzeichnis hingegen werden die html5 Dateien mit dem HTML Gerüst für unsere Seite abgelegt.

Schritt 2 – Templatedatei anlegen

Als nächstes legen wir in unserem neuen Verzeichnis im templates Ordner die Datei fe_page.html5 an. Das Präfix fe zeigt schon an, dass es sich hierbei um ein Frontend Template handelt. Diese Templatedatei enthält den kompletten Rahmen unserer späteren Seite, in welchen dann die einzelnen Inhalte (wie z.B. Artikel, Navigation, Module etc) hineingeladen werden.

Templatedatei fe_page.html5 anlegen

Templatedatei fe_page.html5 anlegen

Möchte man nur kleine Änderungen am Standardtemplate vornehmen kann man natürlich auch die vorhandene fe_page.html5 von Contao kopieren und hier erneut einfügen.

Schritt 3 – Template befüllen

Nun, da wir unsere Templatedatei haben, können wir diese mit dem HTML Gerüst für unsere Seite befüllen. Hier müssen wir noch keine große Rücksicht nehmen, denn die passenden Variablen werden wir erst im nächsten Schritt einfügen.

Templatedatei befüllen

Templatedatei befüllen

Schritt 4 – Variablen im Template ausgeben

Damit Contao die Möglichkeit hat, im Backend angelegte Daten in unser Frontend Template einzufügen, müssen wir natürlich noch diverse Variablen in unsere Templatedatei einfügen. Je vollständiger wir die möglichen Variablen von Contao einfügen, umso flexibler ist unser Template später im Backend zu bedienen.

Eine Variable wird ganz einfach mit PHP ausgegeben. Beispielsweise mit

Eine kürzere Möglichkeit bietet die PHP Kurzschreibweise zum Ausgeben von Daten:

 

Platzhalter einfügen

Platzhalter einfügen

Eine Zusammenfassung der wichtigsten Variablen, die ich bisher gefunden habe, möchte ich hier natürlich auch noch bieten.

  • charset – Der Zeichensatz, der für die Seite eingestellt wurde
  • title – Der Titel der Seite
  • stylesheets – Alle im Backend hinzugefügten Stylesheets werden hier kombiniert ausgegeben
  • head – Kopfdaten
  • header – Der Header der Seite
  • top – Die Kopfzeile
  • bottom – Die Fußzeile
  • left – Die linke Spalte
  • right – Die rechte Spalte
  • main – Die Hauptspalte

Schritt 5 – Ein neues Theme anlegen

Themeübersicht

Themeübersicht

Nachdem wir unser Templatefile beendet haben können wir nun endlich ins Backend von Contao wechseln, ab sofort geht es hier weiter. Unter dem Menüpunkt Themes können wir am oberen Rand den Link Neues Theme auswählen und ein neues Theme mit unseren Daten anlegen.

 

 

 

Neues Theme anlegen

Neues Theme anlegen

Der Titel des Themes ist frei wählbar, in unserem Beispiel benutzen wir einfach Mein Template. Der Autor bist in diesem Fall natürlich du selbst.

Bei der Konfiguration kannst du diverse Verzeichnisse und Dateien auswählen. Ordner sind alle Verzeichnisse im files-Ordner, die zu diesem Theme gehören. In unserem Fall genügt hier der vorher angelegte meintemplate Ordner. Bei Bildschirmfoto kannst du einen Screenshot des Templates hochladen, als kleine Voransicht für die Themeliste später. Das sorgt natürlich für Übersicht und sieht gut aus. Im Dropdown unter Templates-Ordner wählst du nun wieder unser vorher angelegtes Verzeichnis meintemplate aus, in dem sich die fe_page.html5 befindet.

Nun kannst du das Theme speichern und schließen.

Schritt 6 – Stylesheets

Stylesheets bearbeiten

Stylesheets bearbeiten

Nachdem unser Theme nun in der Themeliste auftaucht können wir durch einen Klick auf das CSS Symbol dahinter (das vierte Icon) die Stylesheets für dieses Theme bearbeiten. Die Stylesheets, die wir hier importieren oder anlegen werden später von Contao automatisch zusammengefasst und mit der Variable stylesheets ausgegeben. Hast du deine gewünschten Stylesheets angelegt kannst du wieder zurück zur Themeliste wechseln.

Schritt 7 – Frontend-Module anlegen

Frontend-Module bearbeiten

Frontend-Module bearbeiten

Nachdem die Stylesheets gespeichert sind benötigt unser Template nun noch Frontend-Module, da diese später für die Anzeige der Inhalte im Frontend zuständig sind. Beispiele wären hier das Navigationsmodul, damit wir auch eine Navigation ausgeben können.

Die Verwaltung der Frontend-Module erreichst du über das Zahnrad Symbol (das fünfte Icon hinter unserem Theme). Für unser Beispiel genügt hier die Navigation erstmal, da normale Inhalte mithilfe des Artikelmoduls automatisch funktionieren.

Hast du alle benötigten Frontend-Module hinzugefügt kannst du diesen Bereich wieder schließen und zurück zur Themesliste.

Schritt 8 – Ein Layout anlegen

Layouts bearbeiten

Layouts bearbeiten

Zur Layout-Verwaltung unseres Themes gelangen wir über das rechteckige Symbol (das sechste Icon) hinter unserem Theme. Hier finden wir nun eine Auflistung aller angelegten Layouts für dieses Theme, welche momentan vermutlich noch leer ist. Daher erstellen wir uns über den Link Neues Layout ein Neues.

Im nun folgenden Bildschirm müssen wir einige Einstellungen vornehmen, um unser Theme für die Benutzung fertigzustellen. Zuerst geben wir dem Layout einen Titel, in unserem Beispiel Standard.

Layout Einstellungen vornehmen

Layout Einstellungen vornehmen

Als nächstes können wir bestimmen, wieviele Zeilen und Spalten unser Layout besitzen soll und wie hoch / breit diese sein sollen. Die Einstellungen hier legen fest, in welchen Bereichen wir später die Frontend-Module anzeigen können. Die einzelnen Bereiche haben wir vorher in unserer Templatedatei mit den Variablen (z.B. top, left, right, main) definiert.

Nach den Zeilen und Spalten können wir diverse Stylesheet– und RSS-Einstellungen für unser Frontend Template vornehmen. Hier wählen wir bei den Stylesheets die vorher angelegten Stylesheets aus.

In den Frontend-Modulen können wir nun die einzelnen Module hinzufügen und jedem Modul einen Bereich zuweisen, in dem es später angezeigt werden soll. Module können hier auch mehrfach hinzugefügt werden (zum Beispiel um Artikel sowohl im Hauptbereich als auch in einem Seitenbereich anzeigen zu lassen).

Die nächsten Punkte sollten selbsterklärend sein, wir können jQuery, MooTools und andere Bibliotheken mit einem simplen Klick einbinden, was wir aber für dieses Tutorial nicht benötigen.

Nun kannst du das Layout speichern und hast damit dein erstes eigenes Frontend Template erstellt, welches bereit zur Benutzung ist. Um es im Frontend allerdings zu sehen fehlt noch ein wichtiger Schritt.

Schritt 9 – Das Frontend Template einer Seite zuweisen

Layout zuweisen

Layout zuweisen

Damit dein neues Frontend Template auch zu sehen ist, muss es natürlich noch einer Seite zugewiesen werden. Klicke hierfür im Menü auf Seitenstruktur und wähle eine beliebige Seite aus oder lege eine neue Seite an. Unter dem Bereich Layout-Einstellungen kannst du dieser Seite nun ein Layout zuweisen. Wähle hier einfach im Dropdown unser eben eingestelltes Layout aus und speichere die Seite. Rufst du diese Seite nun im Frontend kannst du sie in deinem selbst erstellten Design mit deinem neuen Frontend Template bewundern.

6 Kommentare zu “Eigenes Frontend Template in Contao

  1. Hallo ,

    gute Informationen..

    ich hätte eine Frage über Contao…..ich möchte ein PHP Script schreiben und die MYSQL Datenbabk von contao nutzen. Was ich nicht weiss ich wie ich auf diese Datenbank zugreifen kann. ich habe mal woanders gelesen dass es ein bestimmiter CLASS gibt um mit dem DB verbindungen zu können.

    kann hier jemand mich helfen?

    Gruss,

    Felipe

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*