Kurz bevor wir die Installation von TYPO3 in Teil 1 abgeschlossen haben, fragte uns das Installationstool, ob wir eine leere Startseite erstellen wollen. Indem wir diese Option auswählten, fügte das Installationstool eine neue Root-Seite in den Seitenbaum ein.

Was sind Root-Seiten? Eine einzige TYPO3-Installation kann mehrere Websites unterstützen, jede mit ihrer eigenen Domain, ihren eigenen Vorlagen und Inhalten. Jede Website benötigt eine eigene Root-Seite, von der aus Sie Ihre untergeordneten Seiten und Inhalte hinzufügen können. Beachten Sie, dass eine Root-Seite immer ein Globus-Symbol neben sich hat.

In unserem Beispiel haben wir also eine einzige Website mit einer einzigen Root-Seite. Wenn wir jedoch in Zukunft eine zweite Website erstellen möchten, brauchen wir nur eine zweite Root-Seite zu erstellen und ihr eine Domain zuzuweisen.

Um eine neue Seite in der Seitenstruktur zu erstellen, ziehen wir das Seitensymbol und platzieren es innerhalb unserer Root-Seite.

• Wir müssen ihr einen Namen geben.
• Sie ist standardmäßig deaktiviert (rotes Symbol) und kann mit einem Rechtsklick und der Auswahl von Aktivieren aktiviert werden, sobald Sie bereit sind, die Seite der Welt zu zeigen.
• Wenn wir mehrere Seiten in der Struktur haben, können wir ihre Reihenfolge ändern und sie sogar verschachteln, indem wir jede Seite an die gewünschte Stelle ziehen.

In meinem Beispiel habe ich insgesamt drei Seiten. Meine Stammseite, die ich Home genannt habe, dann eine About-Seite und eine Contact-Seite.

Mehr über die Arbeit mit Seiten erfahren Sie im Abschnitt Seiten im TYPO3 Editors Guide.

Sobald wir die Seiten unserer Website erstellt und konfiguriert haben, möchten wir als Nächstes Inhalte hinzufügen.

Inhalte können viele verschiedene Formen annehmen – etwa Textabsätze, Bilder, ein Webformular oder ein Plugin aus einer Drittanbieter-Erweiterung.

Inhaltselemente sind jedoch mehr als nur Inhalte: Sie sind Objekte, die wir übersetzen können, für die wir Veröffentlichungs- und Ablaufdaten festlegen können und die wir sogar an mehreren Stellen innerhalb unserer TYPO3-Website referenzieren können.

Um Inhalte zu einer Seite hinzuzufügen, wählen Sie zunächst die gewünschte Seite im Seitenbaum aus und klicken anschließend auf „Create new content“. Daraufhin wird eine Auswahl verschiedener Inhaltselemente angezeigt, die wir zu unserer Seite hinzufügen können.

In meinem Beispiel wähle ich das Inhaltselement „Regular Text“ aus und füge einen einfachen „Hello World!“-Text hinzu.

Wenn wir uns nun die Seite im Frontend anschauen (durch Rechtsklick auf die Seite im Seitenbaum und Auswahl von "Show"/"Anzeigen"), werden wir leider enttäuscht sein.

Der Grund dafür ist, dass wir noch keine Frontend-Templates installiert haben. TYPO3 zeigt stattdessen die standardmäßige „Willkommen bei TYPO3“-Nachricht an – mit meinem „Hello World!“-Inhaltselement darunter.

Wir haben das Bootstrap-Package installiert, als nächstes müssen wir es in unsere Website laden.

Wählen Sie auf der linken Seite:

TypoScript > Root Page > Edit TypoScript Record > Edit the whole TypoScript record

Entfernen Sie auf der Registerkarte "General" das TypoScript im Feld "Setup". Dieses TypoScript erzeugt die Nachricht "Welcome to TYPO3" und wird nicht benötigt.

Wählen Sie dann die Registerkarte Advanced Options.

• Bootstrap-Paket vollständig laden
• Stellen Sie sicher, dass sowohl Fluid Content Elements als auch Fluid Content Elements CSS NICHT ausgewählt sind.

Kehren Sie zum Seitenmodul zurück, wählen Sie die Seite "About" und dann "Edit page properties".

Wählen Sie die Registerkarte "Appearance". Wir haben jetzt eine ganze Reihe von verschiedenen Backend-Layouts zur Auswahl. Weitere Informationen über Backend-Layouts finden Sie in der Anleitung zum Site-Package.

Für den Moment werde ich jedoch das Standard-Backend-Layout auswählen und meine Seite noch einmal im Frontend betrachten.

Wir haben jetzt ein funktionierendes Frontend für unsere Website und alles, was wir sehen, kann geändert oder sogar entfernt werden.

• Das TYPO3 CMS Bootstrap Package-Logo kann durch Ihr eigenes Logo ersetzt oder entfernt werden
• Unsere beiden Seiten "About" und "Contact" sind sichtbar (vergessen Sie nicht, eine Verknüpfung "Home" hinzuzufügen, damit die Benutzer zur Startseite zurückkehren können)
• Mein Hello-World-Content ist sichtbar
• In der Fußzeile steht "Englisch". Das liegt daran, dass die Standardsprache meiner Website auf Englisch eingestellt ist, und wenn ich weitere Sprachen hinzufüge, kann ich mit dem Sprachwähler im Footer zwischen ihnen wechseln. Ich kann den Schalter auch entfernen, wenn ich weiß, dass ich keine weiteren Sprachen hinzufügen werde.
• Der Footer mit der Meldung "Running with TYPO3 ..." kann ebenfalls entfernt oder geändert werden.
• Schließlich kann auch die Schriftart geändert werden.

Aber wie kann man diese Werte ändern?

Gehen Sie zurück zum TypoScript-Modul auf der linken Seite.

TypoScript > Root Page > Constant Editor

Von hier aus können wir das Bootstrap-Paket anpassen und eine Reihe von Dingen ändern, darunter das Logo, das Farbschema, die Schriftart und vieles mehr.

Jede Einstellung hat eine eigene Kategorie. Wenn ich zum Beispiel das Farbschema meiner Website ändern möchte, muss ich "Styling" aus der Dropdown-Liste auswählen.

Vergessen Sie nicht, auf Speichern zu klicken, wenn Sie alle Änderungen vorgenommen haben.

Wir haben das Bootstrap-Package installiert und verfügen nun über ein responsives Frontend für unsere Website.