Erste Schritte / Die erste Site einrichten

05 — Die erste Site einrichten

Die Extension zu installieren gestaltet noch nichts. Drei Dinge müssen geschehen: Die Site muss das Set des Themes verwenden, die Lizenz muss gültig sein, und der Seitenbaum braucht eine Wurzelseite mit einem Layout.

1. Die Site-Konfiguration anlegen oder öffnen

Site-Management → Sites. Entweder eine Site für die eigene Wurzelseite anlegen oder die vorhandene öffnen. Mindestens setzen:

Feld	Anmerkung
Einstiegspunkt / Base	z. B. `https://example.com/`
Sprachen	Jede Sprache braucht ein Locale; das Theme übersetzt seine Beschriftungen über XLIFF.
Fehlerbehandlung	404 → eine Seite im Baum, nicht die Vorgabe von TYPO3.

2. Das Set aktivieren

Site-Management → Sites: hier muss das Set des Themes aktiv sein

Das ist der Schritt, den man vergisst.

Im Reiter Sets der Site-Konfiguration aktivieren:

text

yavi-lucerne/full        ← das Theme

Nicht yavi-core/full. Das Set des Themes hängt bereits von dem des Core ab:

yaml

# yavi_lucerne/Configuration/Sets/Full/config.yaml
name: yavi-lucerne/full
label: 'Yavi Lucerne'
dependencies:
  - yavi-core/full

und das des Core wiederum von dem des Bootstrap Package:

yaml

# yavi_core/Configuration/Sets/Full/config.yaml
name: yavi-core/full
dependencies:
  - bootstrap-package/full
  - yavi-core/content_elements

Das Set des Core direkt zu aktivieren liefert das Framework ohne das Design — die Site rendert, aber grau.

In YAML (config/sites/<id>/config.yaml) sieht dasselbe so aus:

yaml

dependencies:
  - yavi-lucerne/full

Die verfügbaren Sets

Set	Enthält
`yavi-core/full`	Framework + Bootstrap Package + Inhaltselemente. Kein Design.
`yavi-core/content_elements`	Nur die Definitionen der Inhaltselemente. Wird von `full` mitgezogen.
`yavi-lucerne/full`	Das Lucerne-Design auf dem Core. Dieses ist gemeint.

3. Den Lizenzschlüssel eintragen

Yavi Theme → Licence:

Feld	Beispiel
Licence Key	aus der E-Mail zur Kaufbestätigung
Product Code	`yavi-lucerne`

Beide Felder zählen, der Produktcode ebenso wie der Schlüssel. Ohne gültige Lizenz arbeitet die Extension nicht. Einzelheiten in 11 — Lizenz.

Speichern. Die Seite lädt neu und zeigt den Lizenzstatus.

4. Der Wurzelseite ein Backend-Layout geben

Das ist der Schritt, den man am leichtesten überspringt und am schwersten erkennt. Ohne Backend-Layout hat eine Seite keine Spalten, in die Inhalte gehören: Der Element-Assistent bietet eine einzige unbenannte Spalte an, die Container des Themes werden nie adressiert, und das Frontend rendert einen leeren Rahmen. Nichts meldet ein Problem — es sieht aus, als sei das Theme kaputt und nicht bloß unkonfiguriert.

Die Wurzelseite öffnen, zu Seiteneigenschaften → Erscheinungsbild gehen und beide Felder setzen:

Feld	Wert	Wirkung
Backend-Layout (nur diese Seite)	Yavi Core – Standard	die Wurzelseite selbst
Backend-Layout (Unterseiten dieser Seite)	Yavi Core – Standard	jede Seite darunter, sofern sie es nicht überschreibt

Das zweite Feld sorgt dafür, dass die Einstellung vererbt wird — man setzt sie also einmal statt auf jeder Seite. Die Wurzelseite der Demo ist genau so konfiguriert.

Das Theme liefert drei Layouts:

Layout	Verwendung
Yavi Core – Standard	Standardseite: Kopfbereich + Inhalt
Yavi Core – ohne Kopfbereich	Landingpages, die ihren eigenen Hero mitbringen
Yavi Core – Fußbereich	Die vier Spalten des Footers

Auf einzelnen Seiten, wo es nicht passt, wird das geerbte Layout überschrieben — die Demo verwendet ohne Kopfbereich auf ihren zwanzig Element-Demoseiten und Fußbereich auf dem Ordner mit den Footer-Spalten.

In zwei Fällen entfällt dieser Schritt. Bei den Demo-Inhalten trägt die Wurzelseite beide Einstellungen bereits. Und init-static-elements.php, das die Installationen ohne Demo-Inhalte ausführen, setzt sie auf der Wurzelseite, die es anlegt — und auf einer bestehenden Wurzelseite, die keine hat. Von Hand nötig ist er immer dann, wenn die Wurzelseite selbst angelegt wurde, im Backend oder in einer bestehenden Installation.

Die Layouts kommen aus page.tsconfig. Bietet das Auswahlfeld Backend-Layout nichts außer Standard an, fehlt diese Datei im Ordner der Site-Konfiguration — siehe 04 — Installation in ein bestehendes TYPO3.

5. Erste Inhalte

Eine Seite anlegen, ein Inhaltselement einfügen und das Frontend prüfen. Sieht die Seite nicht aus wie erwartet, hilft 17 — Fehlerbehebung weiter — in neun von zehn Fällen ist es das Set oder die Lizenz.

6. Die Marke setzen

Jetzt — und nicht früher — ist die Zeit für Farben und Typografie:

07 — Design / Farben — Primär, Sekundär, Verläufe.
08 — Layout — Logohöhe, Containerbreite, Abstände, Schriften.
09 — Config — Navigationsvariante, Kontaktdaten, Tracking.

Entwicklungs-Setup (DDEV)

Das Entwicklungs-Repository liefert init-yavi.sh mit, das eine vollständige lokale Site erzeugt: Es fragt nach der env-Datei, dem DDEV-Projektnamen, dem Site-Identifier und dem Projekttitel, startet dann DDEV, installiert TYPO3, importiert den Demo-Dump und legt einen Administrator an.

Zwei Warnungen vor dem Ausführen:

RESET_DB in .env / .env.local: Steht es auf 1, löscht das Skript das gesamte DDEV-Projekt samt Datenbank und ohne Snapshot. Auf einer Site, die erhalten bleiben soll, auf 0 setzen.
Das Skript überschreibt config/sites/<id>/ mit der Vorlage aus Initialisation/Site/yavitheme/. Auf einer bestehenden Site ist die eigene Site-Konfiguration danach weg. Ein zweiter Lauf ist kein „Update“.