Seiten verwalten
Die folgenden Kapitel erklären, wie man Seiten in Contao verwaltet. Da Contao ein Seiten-basiertes CMS ist, sind Seiten und die Seitenstruktur die zentralen Elemente Ihrer Webseite und jeder Inhalt, der nicht mit einer Seite assoziiert ist, erscheint auch niemals im Frontend.
Komponenten
Das Zusammenspiel von Seiten, Artikeln, Inhaltselementen und Modulen zu verstehen, ist der Schlüssel zum Erlernen von Contao. Wie bereits erwähnt, ist die Seitenstruktur das zentrale Element der Webseite. Besucher rufen grundsätzlich immer Seiten auf und niemals einzelne Artikel, wie es in einem Node-basierten Content Management System der Fall ist.
Das Diagramm verdeutlicht, dass Artikel und Layouts die beiden wichtigsten Komponenten einer Seite sind. Während Artikel die Inhalte einer Seite speichern, legt das Seitenlayout fest, wie diese auf der Webseite dargestellt werden. Layouts in Contao sind natürlich CSS-basiert und verwenden keine Layout-Tabellen. Auf den folgenden Seiten wird erklärt, wie man Stylesheets und Frontend-Module anlegt, sie zu einem Layout kombiniert und sie anschließend einer neu erstellten Seite zuweist.
Themes
Obwohl der Theme-Manager eine neue Funktion der Version 2.9 ist, handelt es sich dabei eigentlich nur um ein erweitertes Interface für etwas, das es in Contao schon immer gegeben hat. Das Design einer Webseite besteht normalerweise aus Stylesheets, Frontendmodulen, Seitenlayouts, Dateien und Templates, die Sie im Contao-Backend verwalten können. Der Theme-Manager ändert diesen Ansatz nicht, er fügt lediglich eine Möglichkeit hinzu, die Ressourcen zu exportieren und wieder zu importieren (Video-Einführung ansehen).
Themes versus Frontend-Templates
Der Hauptunterschied zwischen Themes und Frontend-Templates ist, dass ein Frontend-Template eine vollständig vorkonfigurierte Beispielwebseite mit einer beispielhaften Seitenstruktur, Artikeln, Inhaltselementen und sogar Benutzern und Gruppen enthält. Ein Theme enthält dagegen nur das eigentliche Design der Webseite und kann deswegen importiert werden, ohne dass bestehende Daten verloren gehen.
Theme-Bestandteile
Ein Theme ist eine Gruppe von Stylesheets, Frontend-Modulen und Seitenlayouts, die alle in der Datenbank gespeichert sind und automatisch vom Theme Exporter erkannt werden. Sie werden diese Elemente in den nächsten Abschnitten näher kennenlernen. Ein Theme beinhaltet darüber hinaus meistens auch Bilder und andere Dateien aus dem Files-Verzeichnis sowie optional angepasste Templates aus dem Templates-Verzeichnis. Diese Ressourcen sind jedoch nicht automatisch mit dem Theme verlinkt und müssen deswegen in den Theme-Einstellungen hinzugefügt werden, damit sie beim Theme-Export berücksichtigt werden.
Theme-Export und -Import
Um ein Theme zu exportieren, klicken Sie einfach auf die Export-Schaltfläche und speichern Sie die .cto-Datei auf Ihrem lokalen Computer. Obwohl .cto eine proprietäre Dateiendung für Contao-Themes ist, handelt es sich dabei eigentlich um ZIP-Archive, die Sie mit jedem Programm entpacken können, das .zip-Dateien unterstützt. Um ein Theme zu reimportieren, übertragen Sie die .cto-Datei auf Ihren Webserver, öffnen Sie den Theme-Manager im Contao-Backend und klicken Sie auf "Theme importieren". Sie können mehrere Themes auf einmal importieren. Nachdem der Import abgeschlossen ist, können Sie das Seitenlayout des neuen Themes in der Seitenstruktur zuweisen.
Stylesheets
Barrierefreie Webseiten sollten immer mit CSS formatiert werden, daher enthält Contao ein "Stylesheets"-Modul, mit dem Sie Formatdefinitionen bequem im Backend verwalten können. Um die verschiedenen Contao-Elemente und -Module in einem Stylesheet zu referenzieren, müssen Sie deren Klassennamen kennen. Inhaltselement-Klassen beginnen mit "ce" (z.B. "ce_text") und Modul-Klassen mit "mod" (z.B. "mod_search"). Falls Sie sich nicht sicher sind, sehen Sie einfach im Quelltext der Webseite nach.
Jedes Stylesheet kann auf einen oder mehrere Medientypen und/oder eine bestimmte Version des Internet Explorers beschränkt werden, falls Sie einen der vielen darin enthaltenen Fehler gesondert beheben müssen. Achten Sie dabei auf die Reihenfolge der Formatdefinitionen, da frühere Anweisungen von späteren überschrieben werden können.
/* Zuerst den generellen Abstand setzen */
.mod_search {
margin:24px;
}
/* Danach die spezielle IE7-Anweisung */
*:first-child+html .mod_search {
margin:18px;
}
Wäre die Reihenfolge umgekehrt, würde der allgemeine Abstand den IE-spezifischen Wert überschreiben.
Module
Mit Hilfe von Frontend-Modulen können Sie Ihre Webseite um fast jede erdenkliche Funktionalität erweitern. Der Contao-Core enthält Module, um verschiedene Navigationsmodule zu erstellen, die Benutzerregistrierung und -anmeldung zu ermöglichen, die Webseite zu durchsuchen, RSS-Feeds zu importieren und vieles mehr. Module können im Backend unter "Themes" -> "Frontend-Module" konfiguriert werden.
| Modul | CSS-Klasse | Beschreibung |
|---|---|---|
| Navigationsmenü | mod_navigation | Erzeugt ein Navigationsmenü aus der Seitenstruktur. |
| Individuelle Navigation | mod_customnav | Erzeugt ein individuelles Navigationsmenü. |
| Navigationspfad | mod_breadcrumb | Erzeugt einen Navigationspfad (Breadcrumb). |
| Quicknavigation | mod_quicknav | Erzeugt ein Drop-Down-Menü aus der Seitenstruktur. |
| Quicklink | mod_quicklink | Erzeugt ein individuelles Drop-Down-Menü. |
| Buchnavigation | mod_booknav | Erzeugt ein Buchnavigationsmenü. |
| Artikelnavigation | mod_article_nav | Erzeugt ein Seitenumbruch-Menü zur Artikelnavigation. |
| Sitemap | mod_sitemap | Erzeugt eine Liste aller Seiten aus der Seitenstruktur. |
| Login-Formular | mod_login | Erzeugt ein Anmeldeformular (Login). |
| Automatischer Logout | - | Meldet einen Benutzer automatisch ab (Logout). |
| Persönliche Daten | member_default | Erzeugt ein Formular zur Bearbeitung der Benutzerdaten. |
| Registrierung | member_default | Erzeugt ein Formular zur Benutzerregistrierung. |
| Passwort vergessen | mod_password | Erzeugt ein Formular zur Passwort-Anforderung. |
| Formular | mod_form | Fügt der Seite ein Formular hinzu. |
| Suchmaschine | mod_search | Fügt der Seite ein Suchfomular hinzu. |
| Artikelliste | mod_article_list | Erzeugt eine Liste aller Artikel einer Spalte. |
| Eigener HTML-Code | - | Erlaubt das Hinzufügen von eigenem HTML-Code. |
| Flash-Film | mod_flash | Bindet einen Flash-Film in eine Seite ein. |
| Zufallsbild | mod_random_image | Fügt der Seite ein zufällig ausgewähltes Bild hinzu. |
| Auflistung | list_default | Listet die Daten einer beliebigen Tabelle auf. |
| RSS-Reader | rss_default | Fügt der Seite einen RSS-Feed hinzu. |
Zugriffsschutz
Jedes Frontend-Modul kann geschützt werden, so dass es nur Gäste oder Benutzer einer bestimmten Mitgliedergruppe sehen können.
Seitenlayouts
Seitenlayouts definieren den grundsätzlichen Aufbau einer Seite, wie z.B. die Anzahl der Spalten oder die Gesamtbreite, und sie legen fest, welche Frontend-Module in welcher Spalte angezeigt werden. Sie ermöglichen zudem das Einbinden von Stylesheets und RSS- bzw. Atom-Feeds sowie das Einfügen einer Google Analytics ID oder beliebigem JavaScript-Code, der für die Steuerung interaktiver Elemente und Plugins benötigt wird. Das Contao CSS-Framework teilt das Browserfenster automatisch in mehrere Layoutbereiche auf.
Das impliziert, dass Sie zum Zeitpunkt der Erstellung eines Seitenlayouts bereits die benötigten Stylesheets und Frondend-Module angelegt haben müssen. Daher wird folgende Reihenfolge beim Anlegen von Ressourcen empfohlen:
- Erstellen der benötigten Stylesheets
- Erstellen der benötigten Frontend-Module
- Optionale Erstellung von Nachrichtenarchiven oder Kalendern
- Erstellen eines neuen Seitenlayouts und Einbindung der Komponenten
Seitentypen
Der Typ einer Seite legt fest, ob sie statische Inhalte ausgibt, zu einer anderen Seite weiterleitet oder den Startpunkt einer Webseite innerhalb der Seitenstruktur markiert. Contao unterstützt folgende 6 Seitentypen:
| Seitentyp | Beschreibung |
|---|---|
| Reguläre Seite | Eine reguläre Seite enthält Artikel und Inhaltselemente. Sie verhält sich wie eine statische HTML-Seite. |
| Externe Weiterleitung | Diese Seite leitet Besucher automatisch zu einer externen Webseite um (entspricht einem Hyperlink). |
| Interne Weiterleitung | Diese Seite leitet Besucher automatisch zu einer anderen Seite innerhalb der Seitenstruktur um. |
| Startpunkt einer Webseite | Diese Seite kennzeichnet den Startpunkt einer neuen Webseite innerhalb der Seitenstruktur. |
| 403 Zugriff verweigert | Beim Aufruf einer geschützten Seite ohne Zugriffsrechte wird stattdessen die 403-Fehlerseite geladen. |
| 404 Seite nicht gefunden | Beim Aufruf einer nicht vorhandenen Seite wird stattdessen die 404-Fehlerseite geladen. |
Multidomain-Betrieb
Contao unterstützt mehrere Webseiten innerhalb der Seitenstruktur und leitet Besucher je nach DNS- und Spracheinstellungen automatisch auf einen bestimmten Startpunkt einer Webseite weiter. Nehmen wir an, Sie betreiben eine zweisprachige Firmenwebseite unter "www.example.com" und eine kleine private Webseite unter der Domain "www.personal.example.org". Sie benötigen dafür drei Startpunkte:
| Typ | DNS | Sprachenkürzel | Fallback-Sprache |
|---|---|---|---|
| Deutsche Firmenseite | keine | de | nein |
| Englische Firmenseite | keine | en | ja |
| Private Webseite | www.personal.example.org | de | ja |
Die folgende Tabelle zeigt, zu welcher Seite ein Besucher abhängig von der Domain und seiner Browsersprache weitergeleitet wird.
| Domain | Browsersprache | Weiterleitung |
|---|---|---|
| www.example.com | Englisch | Englische Firmenseite |
| www.example.com | Deutsch | Deutsche Firmenseite |
| www.example.com | Spanisch | Englische Firmenseite |
| www.personal.example.org | egal | Persönliche Webseite |
Beachten Sie, dass die persönliche Webseite ohne die Option "Sprachen-Fallback" nur für deutsche Benutzer sichtbar wäre!
Zugriffsrechte
Zugriffsrechte legen fest, was Backend-Benutzer mit einer Seite und ihren Artikeln machen dürfen. Sie haben nichts mit dem Zugriffsschutz zu tun, der den Zugriff auf eine Seite im Frontend limitiert! Ähnlich dem Unix-Rechtesystem gibt es drei Zugriffsebenen:
- Zugriff als Besitzer einer Seite
- Zugriff als Mitglied der Gruppe einer Seite
- Zugriff als unprivilegierter Benutzer
Für jede Zugriffsebene können gesonderte Rechte vergeben werden. Standardmäßig darf der Besitzer einer Seite sowohl die Seite selbst, als auch die damit verbundenen Artikel bearbeiten. Ein Mitglied der Gruppe einer Seite darf hingegen nur die Artikel bearbeiten und ein unprivilegierter Benutzer hat überhaupt keine Schreibrechte.
