Contao (Teil 6): Seiten anlegen

Nun wird es Zeit, erste Inhalte im Backend anzulegen. Denn das ist es natürlich, worauf es letztendlich ankommt. Die Basis bilden dabei die Seiten. Ihr werdet in diesem Tutorial eure ersten Seiten anlegen und diese im Frontend veröffentlichen. Diese Seiten werden dann im weiteren Verlauf dieser Reihe nach und nach mit Inhalten gefüllt.

Wir empfehlen:
Contao CMS-Training

Ruft man momentan das Frontend der Seite auf, ist der Anblick wenig erbaulich. Wurden nämlich keine Beispieldatensätze installiert, gibt Contao lediglich die Meldung No root page found aus.

Die Meldung ist in dieser Form zum jetzigen Zeitpunkt natürlich absolut korrekt, schließlich wurde im Backend noch keine Seite, geschweige denn die Root-Seite, angelegt. Das wird jetzt nachgeholt. Bei der Root-Seite handelt es sich übrigens nicht um die Frontend-Startseite. Tatsächlich taucht die Root-Seite im Frontend überhaupt nicht auf, sie dient vielmehr als Ausgangspunkt für die interne Verwaltung der Seiten.

Um die Root-Seite anzulegen, ruft man Layout>Seitenstruktur auf und klickt auf Neue Seite. Daraufhin könnt ihr die Position wählen, an der die Seite eingefügt werden soll. Im Fall der Root-Seite klickt ihr direkt auf den Pfeil neben dem Titel der Webseite.

Nun können die notwendigen Angaben zur Root-Seite gemacht werden. Angegeben werden muss in jedem Fall der Seitenname. Tragt hier beispielsweise Startpunkt von PSD-Tutorials.de ein. Das Feld Seiten-Alias müsst ihr nicht selbst ausfüllen, das wird automatisch von Contao gemacht, wenn ihr die Seite speichert.

Der Wert von Seitentyp bleibt unangetastet.

Im Bereich Meta-Informationen gibt es das Feld Seitentitel. Der hier eingetragene Name wird im Frontend dem title-Element zugewiesen. Wenn ihr an dieser Stelle nichts angebt, wird dafür der unter System>Einstellungen vergebene Titel genommen.

Weiter geht es im Bereich DNS-Einstellungen mit dem Feld Sprache.

Tragt hier de ein und aktiviert außerdem die Option Sprachen-Fallback. Diese Option ist wichtig, wenn es um den Aufbau mehrsprachiger Webseiten geht. Einige Hinweise zu dieser Funktion: Ruft ein Browser die Webseite auf, teilt er dem Server mit, welche Sprache er bevorzugt. Würde nun ein Browser mit einer anderen eingestellten Sprache als z.B. Deutsch kommen, wird ihm die Meldung No Root Page found angezeigt, da für die gewünschte Sprache kein Startpunkt vorhanden ist. Das gilt dann in gleicher Weise übrigens auch für Suchmaschinen. Aktiviert man nun die Fallback-Option, werden die Seiten auch dann ausgeliefert, wenn sie nicht in der gewünschten Sprache vorliegen.

Aktiviert im unteren Seitenbereich das Kontrollkästchen Seite veröffentlichen. Mit Speichern und schließen werden die Einstellungen übernommen.

Ihr landet daraufhin in der Übersichtsseite, auf der sämtliche Seiten zu sehen sind. (Wobei es momentan ja nur den Startpunkt gibt).

Der Startpunkt existiert also. Ruft man nun die Seite im Frontend auf, macht sich allerdings wiederum Ernüchterung breit.

Die angeforderte Seite ist offensichtlich nicht vorhanden. Genau die muss jetzt noch angelegt werden. Ruft dazu Layout>Seitenstruktur auf und klickt auf Neue Seite. Anschließend muss man die Zielposition der neuen Seite festlegen. Klickt dazu in der Zeile Startpunkt von PSD-Tutorials.de auf den Pfeil, der nach rechts zeigt.

Dadurch wird die neue Seite zur Unterseite vom Startpunkt gemacht. Natürlich sind bei der Seite wieder einige Pflichtangaben nötig. Als Seitenname bietet sich Startseite an. Der Seitentyp kann auf Reguläre Seite eingestellt bleiben. Aktiviert jetzt noch die Option Seite veröffentlichen und übernehmt das Ganze mit Speichern und schließen.

Daraufhin landet man erneut in der Seitenübersicht. Und hier ist jetzt auch gut die bisher angelegte Seitenstruktur zu erkennen.

Die Seitenstruktur definieren

Die erste "echte" Seite wurde angelegt. Selbstverständlich braucht man aber noch einige mehr. Und diese Struktur definiert man jetzt. Ich gehe an dieser Stelle von folgenden zusätzlichen Seiten aus:

Kontakt
Impressum
Über uns
Downloads

Diese Seiten werden auf derselben Ebene wie die Startseite erstellt. Ruft dazu Layout>Seitenstruktur auf und klickt auf Neue Seite. Jetzt muss man die richtige Position wählen. Die aufgeführten Seiten sollen sich auf derselben Ebene wie die Startseite befinden. Klickt dazu in der Zeile Startseite auf das Symbol mit dem Pfeil nach unten.

Anschließend können die Daten für die Seite angegeben werden. Weist ihr in jedem Fall einen Titel zu und veröffentlicht die Seite. Mit Speichern und schließen werden die Einstellungen übernommen.

Auf diese Weise könnt ihr alle Seiten anlegen, die in eurem Projekt relevant sind. (Wobei später natürlich noch beliebig viele Seiten hinzugefügt werden können).

Mit den erstellten Seiten lassen sich zahlreiche Aktionen durchführen. So könnt ihr diese beispielsweise unter Layout>Seitenstruktur jederzeit aktivieren und deaktivieren. Eine deaktivierte Seite ist im Frontend nicht zu sehen. Um Seiten zu deaktivieren, klickt man auf das grüne Augensymbol. Dieses verwandelt sich daraufhin in ein graues Auge. Ein erneuter Klick auf dieses graue Auge schaltet die Seite wieder frei.

Ebenso lassen sich Seiten auch verschieben. Klickt dazu unter Layout>Seitenstruktur bei der betreffenden Seite auf den blauen Pfeil.

Anschließend kann man die neue Position der Seite angeben.

Solltet ihr eine Seite nicht mehr benötigen, könnt ihr diese ganz einfach löschen. Klickt dazu in der Seitenübersicht bei der betreffenden Seite auf das rote Kreuz. Contao fragt noch einmal nach, ob die Seite tatsächlich gelöscht werden soll. Erst wenn man die Abfrage mit OK bestätigt, wird die Seite entfernt.

Der Blick ins Frontend der Seite

Ihr habt erfolgreich die ersten Seiten im Backend angelegt. Jetzt sollte der Fehler No root page found im Frontend nicht mehr zu sehen sein. Und tatsächlich: Ruft man das Frontend der Seite auf, ist diese Meldung verschwunden.

Stattdessen wird nun No layout specified angezeigt. Das ist zwar optisch auch nicht sonderlich wertvoll, stellt aber immerhin schon einmal einen gewissen Fortschritt dar. Hintergrund der Meldung ist schlichtweg, dass für die aufgerufene Seite noch kein Seitenlayout angegeben wurde.

Ein solches Seitenlayout unterteilt die jeweiligen Seiten in verschiedene Layoutbereiche. Ausführliche Informationen zu den Seitenlayouts gibt es natürlich im weiteren Verlauf dieser Tutorial-Reihe. Im nächsten Tutorial werdet ihr dann gleich das erste Theme erstellen. Das ist nämlich die Voraussetzung, um Seitenlayouts zuweisen zu können und somit schlussendlich auch eine entsprechende Ausgabe im Frontend zu erzielen.

Wir empfehlen:
HTML5- & CSS3-Video-Training

Unsere Empfehlung für dich

Contao-CMS-Training

Contao-CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • Über 8 Stunden Video-Trainings zum beliebten CMS Contao
  • 40 Praxis-Lektionen in Text/Bild als PDF (über 470 Seiten)
  • Blog, Newsletter, Google Maps, Formulare, Suchmaschinenoptimierung, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training