Templates & Themes bauen

Ein Orblio-Theme ist ein Ordner voller Vue-3-Vorlagen. Du gestaltest damit das komplette Aussehen einer Webseite und definierst die Block-Elemente, die Redakteure später zusammenstecken. Dieses Kapitel erklärt Struktur, Datei-Aufbau und die verbindlichen Regeln.

Was ist ein Theme?

Ein Theme (technisch: ein Template-Ordner) bestimmt Farben, Schriften, Kopf- und Fusszeile sowie den gesamten Satz an Block-Elementen. Orblio nutzt dafür ein mehrschichtiges, Gutenberg-artiges System. Wichtig: Das Design muss handwerklich gut sein und die Orblio-Datenstruktur exakt einhalten — ein optisch perfektes Template, das die Verdrahtung verletzt, rendert nicht.

Ordnerstruktur eines Templates

Jedes Theme liegt unter templates/<NAME>/ und hat diese verbindliche Struktur:

templates/<NAME>/
├── components/              Block-Elemente (component1.vue, component2.vue, …)
├── files/                   Datei-Icons fürs Theme
│   ├── default.svg          Standard-Datei-Icon
│   ├── doc.svg  pdf.svg  ppt.svg  xls.svg  zip.svg
│   ├── icons/               SVG-Icon-Bibliothek für <oicon> (neu)
│   └── font/                (optional) eingebundene Schriften
├── cookies.vue              Cookie-Banner (neu)
├── dynamiclists.vue         Vorlagen für den "Dynamische Liste"-Block
├── emptycomp.vue            Anzeige für Seiten ohne Blöcke
├── langswitcher.vue         Sprachumschalter
├── lightbox.vue             Lightbox / Galerie
├── navigation.vue           Navigation (ID-basiert)
├── search.vue               Seitensuche
└── theme.vue                Theme-Wrapper (Header/Main/Footer)

Anatomie einer .vue-Vorlage

Jede Vorlagedatei besteht aus drei Blöcken — immer in dieser Reihenfolge:

<config>
    { "name": { "default": "Hero" }, "dbKeys": { "title": "text" } }
</config>
<script>
orblio.NAME = Vue.defineComponent({
    props: [[orblio_inject_props]],   /* vom System ersetzt — NIE selbst füllen */
    template: ` … `,
    /* data / computed / methods / mounted nach Bedarf */
});
</script>
<style>
    /* Nested CSS mit & — KEIN SASS/SCSS */
</style>

NAME ist der Dateiname ohne Endung (theme, navigation, component5 …). Block-Komponenten registriert das System als orblio.componentN.

System-Platzhalter

Diese Platzhalter ersetzt das System zur Laufzeit — sie bleiben wörtlich stehen:

Der <config>-Block

Jede Datei braucht einen <config>-Block, und er muss gültiges JSON sein: doppelte Anführungszeichen, keine Kommentare, kein Komma am Ende. Bei Blöcken meldet erst dbKeys den Block in der Block-Auswahl an. Fehlt dbKeys oder ist das JSON fehlerhaft, taucht der Block dort einfach nicht auf.

Theme (theme.vue):

{ "name": "Mein Theme", "description": "Kurzbeschreibung", "author": "...", "date": "2026-05-24" }

Block-Komponente (components/componentN.vue):

{
    "name": { "default": "Hero", "en": "Hero" },
    "description": { "default": "Titel, Text, Bild" },
    "author": "...",
    "date": "2026-05-24",
    "dbKeys": { /* deklariert die DB-Struktur — siehe Content-Elemente */ }
}

Sub-Templates (navigation, search, langswitcher, lightbox, cookies, emptycomp, dynamiclists) haben eine einfache <config> mit name und description, ohne dbKeys.

Die harten Regeln

Diese Punkte sind nicht verhandelbar — verletzt eine Vorlage sie, rendert sie nicht oder zerstört das Layout:

1. Kommentare nur /* */ — niemals //, weder in JS noch in CSS.
2. CSS (darf auch nested sein mit &), kein SASS/SCSS. Nur natives verschachteltes CSS plus Custom-Properties (--token).
3. Vue 3 Options API über Vue.defineComponent({…}). Kein <script setup>, keine import/export, keine Composition-API.
4. Zentrale Elemente sind unveränderlich: vtext, htmltext, oimage, ovideo, oicon, ofolder, repeatable, repeatcontents, fromdatabase exakt wie dokumentiert verwenden.
5. vtext für designfixe Texte, htmltext nur für freien Fliesstext. Überschriften, Labels, Button-Beschriftungen immer mit vtext.
6. Jedes Tag auf eine Zeile. Orblio entfernt beim Bauen alle Zeilenumbrüche und Tabs. Attribute, die über mehrere Zeilen verteilt sind, kleben danach zusammen. Darum: ein Tag mit allen Attributen auf eine Zeile, nur Leerzeichen zum Einrücken.
7. Kein ": " in sichtbarem Template-Text. Orblio macht daraus ":". Texte mit Doppelpunkt gehören als Inhalt ins Feld, nicht ins Markup.
8. Externe Dienste nur über das Cookie-Banner. Videos über ovideo. Karten und fremde Skripte mit data-orb-cc="medien" (bzw. statistik, marketing) und data-src statt src — Orblio lädt sie erst nach der Zustimmung.

Naming-Konventionen

Sub-Templates & der $root-Vertrag

Neben Blöcken hat ein Theme feste Sub-Templates, die das Laufzeitsystem ansteuert. Ihre Logik (Menüeinträge auflösen, suchen, Sprache wechseln, Lightbox bedienen, Zustimmung speichern) liefert Orblio selbst: Über [[orblio_inject_props]] wird sie automatisch angehängt. In der Datei stehen also nur Markup und CSS.

Der $root-Zustandsvertrag

Sub-Templates lesen und schreiben nur diese dokumentierten Felder:

Kompilierung

Deine .vue-Quelldateien werden von Orblio zu ausgelieferten Bundles kompiliert. Bearbeite immer die Quelldateien im Template-Ordner, nie die generierten Bundle-Dateien (z. B. *.foot.js unter defs/) — die sind reine Artefakte und werden beim nächsten Build überschrieben.