1. Twig-Template-Logik

Diese Sektion wird nur auf der Route /de/childtheme-demo eingeblendet — gesteuert durch Twig if-Bedingung im default.html.twig.

Aktuelle Route:{{ page.route }}
Template-Datei:user/themes/splexus-custom/templates/default.html.twig
Partial:templates/partials/childtheme-demo.html.twig

2. Frontmatter-Variablen in Twig

Werte aus dem Seiten-Frontmatter (YAML-Header der .md-Datei) koennen direkt im Template ausgelesen werden:

page.header.demo_titelMein Demo-Titel aus dem Frontmatter
page.header.demo_farbe#8428DF
page.header.demo_zahl42
page.titleChild-Theme Demo

3. Eigenes CSS

Alle Styles auf dieser Seite kommen aus user/themes/splexus-custom/css/custom.css — komplett frei gestaltbar, ueberschreibt Quark 2.

CSS Gradient
Glassmorphism (backdrop-filter)
Neon-Text-Effekt
3D-Card mit transform

4. Eigenes JavaScript

Die JS-Datei demo-feature.js wird nur auf dieser Seite geladen (route-spezifisch, siehe splexus-custom.php).

Diese Box wird durch JS ein/ausgeblendet.
Aktuelle Zeit: --:--:--

5. Taxonomien & Collections

Twig kann auf alle Grav-Daten zugreifen — Seiten, Taxonomien, Collections:

Seiten-Sprache:{{ grav.language.getActive }}
Site-Titel:{{ site.title }}
Seiten-Tags:gravchild-themetwigcssjavascript
Alle Seiten (top 5):

    6. Theme-Settings aus YAML

    Das Child-Theme erbt alle Quark-2-Settings und kann eigene hinzufuegen:

    theme_var('accent-color')#8428DF
    theme_var('theme-mode')auto

    7. Partials & Includes

    Jedes Partial kann ueber {% include 'partials/...' %} eingebunden werden — sowohl vom Parent-Theme als auch eigene:

    Verfuegbare Partials (Quark 2): base, navigation, footer, logo, breadcrumbs, hero, pagination, messages, metadata, theme-toggle, sidebar, archives, taxonomylist

    Eigene Partials (splexus-custom): childtheme-demo.html.twig (dieses Partial hier)

    Splexus-Partials (bereits vorhanden): splexus-banner, splexus-form, splexus-svgs, splexus-tabellen, splexus-kalender, splexus-animationen, splexus-diagramme, splexus-flex-objects

    8. Security-Gate & HTML/JS in Twig

    Im Markdown-Content werden <script>, <iframe>, <style> vom Grav-Security-Gate escaped. Im Twig-Partial sind sie erlaubt:

    Regel: Alles was HTML/JS/CSS enthaelt → ins Twig-Partial, nicht ins Markdown.
    Ausnahme:<video> und <audio> werden direkt gerendert.
    Code-Beispiele: In Markdown als [text] mit eckigen Klammern statt Twig-Syntax schreiben.

    9. Mehrsprachigkeit

    Grav unterstuetzt Mehrsprachigkeit. Twig kann die aktive Sprache abfragen:

    Aktive Sprache:{{ grav.language.getActive }}
    Default-Sprache:{{ grav.config.site.default_lang }}
    Unterstuetzte Sprachen:{{ grav.config.languages.supported|join(', ') }}

    Zusammenfassung

    FeatureMoeglich?Wo?
    Twig-Templatesjatemplates/*.twig
    Eigenes CSSjacss/custom.css oder inline in Twig
    Eigenes JavaScriptjajs/*.js oder inline in Twig
    Route-spezifische Includesja{% if page.route == '...' %}
    Frontmatter-Variablenja{{ page.header.feld }}
    Taxonomien/Collectionsja{{ page.taxonomy }}, {{ pages.children }}
    Theme-Settings (YAML)ja{{ theme_var('setting') }}
    Partials/Includesja{% include 'partials/...' %}
    Mehrsprachigkeitja{{ grav.language.getActive }}
    CDN-Frameworks (React, Vue, Tailwind)jaueber <script> im Twig-Template
    Child-Theme-Inheritancejaconfig.yaml stream prefixes

    Child-Theme „splexus-custom" — alle Möglichkeiten

    Diese Seite demonstriert, was mit dem Grav Child-Theme splexus-custom (basierend auf Quark 2) möglich ist. Das Theme erbt alle Funktionen von Quark 2 und fügt eigene Templates, CSS, JavaScript und Partials hinzu.

    Was ist ein Child-Theme?

    Ein Child-Theme erbt alle Dateien vom Parent-Theme (Quark 2) — Templates, CSS, JS, Fonts, Bilder. Nur die Dateien, die du im Child-Theme-Ordner ablegst, überschreiben die Parent-Version. Das macht Updates sicher: Quark 2 kann aktualisiert werden, ohne dass deine Anpassungen verloren gehen.

    Datei-Struktur

    user/themes/splexus-custom/
├── splexus-custom.php          ← PHP-Klasse (erbt von Quark2)
├── splexus-custom.yaml         ← Theme-Settings
├── blueprints.yaml             ← Admin-Konfiguration
├── config.yaml                 ← Stream-Prefixe (Vererbung)
├── css/
│   └── custom.css              ← Eigene Styles (überschreibt Quark 2)
├── js/
│   └── demo-feature.js         ← Eigenes JavaScript
├── templates/
│   ├── default.html.twig       ← Haupt-Template (überschreibt Quark 2)
│   └── partials/
│       └── childtheme-demo.html.twig  ← Eigenes Partial
└── images/                     ← Eigene Bilder

    Was wird unten auf dieser Seite gezeigt?

    Die interaktive Demo unten wird durch ein Twig-Partial gerendert (childtheme-demo.html.twig), das nur auf dieser Route geladen wird. Es zeigt:

    1. Twig-Template-Logik — Route-spezifische Includes
    2. Frontmatter-Variablen — Werte aus dem YAML-Header in Twig auslesen
    3. Eigenes CSS — Gradients, Glassmorphism, Neon-Effekte, 3D-Cards
    4. Eigenes JavaScript — Counter, Toggle, Live-Clock, Scroll-Observer
    5. Taxonomien & Collections — Zugriff auf Seiten, Tags, Kategorien
    6. Theme-Settings — YAML-Konfiguration in Twig verwenden
    7. Partials & Includes — Wiederverwendbare Template-Blöcke
    8. Security-Gate — Wie man HTML/JS/CSS in Twig statt Markdown einbindet
    9. Mehrsprachigkeit — Sprachabfragen in Twig
    10. Zusammenfassung — Tabelle aller Features

    Alle interaktiven Elemente unten sind live ausprozierbar — klicke die Buttons, beobachte die Uhr, scrolle durch die Sektionen.