Erste Schritte / Yavi Theme — Dokumentation

Yavi Theme — Dokumentation

Vollständige Dokumentation der Yavi-Theme-Familie für TYPO3 v14: yavi_core (das Framework) und das darauf aufbauende Theme yavi_lucerne.

Geschrieben für drei Arten von Leserinnen und Lesern, in dieser Reihenfolge:

Integratoren, die eine Site installieren und konfigurieren.
Redaktion, die täglich mit den Inhaltselementen arbeitet.
Entwicklung, die das Theme erweitert oder ein eigenes baut.

Inhalt

Erste Schritte

#	Kapitel	Für
01	Einführung und Architektur	alle
02	Voraussetzungen	Integratoren
03	Installation mit DDEV — neues Projekt, mit Demo-Inhalten	Integratoren
04	Installation in ein bestehendes TYPO3 — ohne Demo-Inhalte	Integratoren
05	Die erste Site einrichten	Integratoren

Konfiguration

#	Kapitel	Für
06	Das Backend-Modul Yavi Theme	Integratoren, Redaktion
07	Design / Farben	Integratoren
08	Layout	Integratoren
08b	Die Seite Navigation	Integratoren
09	Config: Site, Kontakt, Tracking	Integratoren
10	Eigene CSS-Klassen	Integratoren
11	Lizenz	Integratoren
—	Referenz aller Einstellungen (alle 100 Felder)	Integratoren

Mit Inhalten arbeiten

#	Kapitel	Für
12	Inhaltselemente	Redaktion
13	Hero und Karussell	Redaktion
14	Navigation	Integratoren, Redaktion
—	Referenz der Inhaltselemente (alle Typen)	Redaktion

Erweitern

#	Kapitel	Für
15	Theming: Tokens, SCSS, eigenes Theme	Entwicklung
17	Fehlerbehebung	alle
18	Entwicklung und Tests	Entwicklung

Erst einmal ansehen

Zweieinhalb Minuten darüber, was `yavi_core` und `yavi_lucerne` tun — der schnellste Weg herauszufinden, ob diese Dokumentation das Richtige behandelt.

Zwei weitere Rundgänge stehen in den Kapiteln, in die sie gehören: die Installation mit Installer und DDEV sowie das Hero-Karussell vom Verlaufs-Overlay bis zur Textanimation. Alle liegen auf dem Yavi-Themes-Kanal.

Die Fassung in 30 Sekunden

Yavi Lucerne: der Fullscreen-Hero mit wechselnder Überschrift, transparenter Header über dem Bild und dem Scroll-Indikator

bash

# packages/yavi-core und packages/yavi-lucerne aus dem ZIP entpackt,
# ./packages/* in composer.json als path-Repository eingetragen
composer require webagentur-yahya/yavi-core:dev-main \
                 webagentur-yahya/yavi-lucerne:dev-main
vendor/bin/typo3 extension:setup
vendor/bin/typo3 cache:flush

Die Version lautet dev-main, weil die Pakete aus einem ZIP kommen und nicht aus einem getaggten Repository — das Installationskapitel zeigt die vollständige composer.json.

Danach im Backend:

Site Management → Sites → die eigene Site → Sets: yavi-lucerne/full aktivieren.
Yavi Theme → Licence: den Lizenzschlüssel eintragen. Ohne gültige Lizenz arbeitet die Extension nicht.
Yavi Theme → Design / Colors: die eigenen Markenfarben setzen.

Alles andere ist Detail — und um dieses Detail geht es im Rest der Dokumentation.

Konventionen in dieser Dokumentation

yavi_core ist der Extension Key, webagentur-yahya/yavi-core der Composer-Name.
Pfade, die mit packages/ beginnen, meinen eine Installation im Composer Mode mit den Extensions im Verzeichnis packages/ des Projekts — genau das Layout, das das ausgelieferte ZIP bereits mitbringt.
Die Extensions werden als ZIP über licence.yavithemes.com ausgeliefert, nicht über Packagist und nicht über eine Composer-Registry. Updates kommen von derselben Stelle.
Befehle sind für DDEV geschrieben (ddev exec …); auf einem normalen Server entfällt das Präfix.
„Theme“ meint immer eine Extension wie yavi_lucerne. yavi_core ist kein Theme — es ist das Framework, auf dem die Themes aufsetzen.
Das Backend-Modul Yavi Theme ist durchgehend englisch beschriftet. Seiten-, Reiter- und Feldnamen stehen deshalb auch hier auf Englisch, so wie sie im Backend erscheinen. Die Felder der Inhaltselemente sind dagegen übersetzt — dort steht der deutsche Name, bei Bedarf mit dem englischen in Klammern.

Eindrücke

Das Theme auf einer Case-Study-Seite — Eine Case-Study-Seite

Eine Inhaltsseite mit Karten und Textelementen — Eine Inhaltsseite: Karten, Textelemente, Abstände zwischen den Sections

Alle Screenshots stammen aus einer laufenden Installation (TYPO3 14.3, Yavi Lucerne), aufgenommen bei 1600 CSS-px — 390 px bei den mobilen — mit doppelter Pixeldichte, damit sie auf Retina-Displays scharf bleiben.

Die Screenshots zeigen ein Backend in englischer Sprache. Das Theme-Modul ist ohnehin englisch beschriftet; bei den Inhaltselementen weicht das Bild von den deutschen Feldnamen im Text ab.

Diese Dokumentation lesen

Zwei Formate, eine Quelle:

Markdown — die .md-Dateien in diesem Ordner, lesbar in jedem Editor und auf jedem Git-Host.
HTML — index.html öffnen. Dunkles Leselayout, Seitenleiste, Inhaltsverzeichnis je Seite und eine Suche, die auch dann arbeitet, wenn die Datei direkt aus dem Ordner geöffnet wird (kein Server nötig).

Oben rechts schaltet EN / DE zwischen den beiden Sprachfassungen um, jeweils auf dasselbe Kapitel.