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
│   └── font/                (optional) eingebundene Schriften
├── dynamiclists.vue         Vorlagen für den "Dynamische Liste"-Block
├── 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>
    { /* JSON — Theme vs. Block unterscheiden */ }
</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

Theme (theme.vue):

{ "title": "Mein Theme", "author": "...", "lastupdate": "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 */ }
}

navigation, search und langswitcher nutzen die einfache Block-Form ohne dbKeys. lightbox und dynamiclists haben keinen <config>-Block.

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, 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.

Naming-Konventionen

Sub-Templates & der $root-Vertrag

Neben Blöcken hat ein Theme feste Sub-Templates, die das Laufzeitsystem ansteuert. Ihre Skript-Logik ist System-Plumbing — übernimm sie unverändert aus den Skeletten und gestalte nur Markup-Klassen 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.