Eigene Demo und Export

Eine Website lässt sich als Vorlage exportieren und in eine andere Installation importieren – z. B. als Startpaket für Kundenprojekte. Die Vorlage ist ein Ordner mit einer demo.yaml und den verwendeten Dateien, derselbe Aufbau wie bei den mitgelieferten Demos.

Website exportieren

Im Backend unter Layout › Creuva › Website exportieren (nur für Administratoren) wählst du den Startpunkt und optional Titel und Ordnernamen. Darunter stehen alle Exporte mit Datum, Anzahl der Dateien und Größe; sie lassen sich als ZIP herunterladen und löschen. Auf der Konsole:

vendor/bin/contao-console creuva:export
vendor/bin/contao-console creuva:export 1 --name=kunde-x --title="Kunde X"

var/exports/kunde-x/
├── demo.yaml       Seiten, Inhalte, Module, Formulare, News, Termine, Bildgrößen, Design
└── files/          die verwendeten Dateien

Exportiert werden:

• der Seitenbaum mit Artikeln und Inhaltselementen, die darin verwendeten Module, Formulare, News und Termine
• die Bildgrößen des Themes und alle in Inhalten verwendeten Größen
• alle referenzierten Dateien mit Alt-Texten
• Header, Logos, Marke und Footer-Spalten aus den Creuva-Modulen
• Farbschema, Farbmodus, Typografie, Eckenradius und Logohöhe, außerdem Favicon und Vorschaubild des Startpunkts

Nicht exportiert werden eigene Farben des Layouts, Empfänger-Adressen von Formularen, Tabellen anderer Erweiterungen und die Styleguide-Seite (sie wird beim Import neu angelegt). Insert-Tags mit IDs wie {{insert_module::3}} und die Elemente „Inhaltselement“ und „Artikel“ (Verweise) lassen sich nicht übertragen; der Export listet sie als Warnung auf. Seiten-Links wie {{link_url::12}} werden auf Aliase umgestellt.

Eigene Demo importieren

1. ZIP entpacken und den Ordner nach files/<name> kopieren. Den Ordner nicht öffentlich schalten, sonst ist die demo.yaml im Web abrufbar.
2. Unter Layout › Creuva › Einrichten bei „Oder eigener Ordner“ files/<name> eintragen, oder:

vendor/bin/contao-console creuva:install --demo=files/kunde-x

Die Dateien werden nach files/creuva-demo/local-<ordnername>/ kopiert, der Quellordner bleibt unverändert. Mit filesFolder: inhalte in der demo.yaml landen sie stattdessen in files/inhalte/; dieser Ordner wird von creuva:reset nicht gelöscht.

Aufbau der demo.yaml

Die Definition ist YAML. Verweise schreibst du als page:<alias>, module:<key>, image_size:<key>, news_archive:<key>, calendar:<key> oder file:<pfad>. Ein Beispiel mit den wichtigsten Bereichen:

design:
  scheme: green       # Farbschema, Farbmodus, Typografie und Eckenradius des Seitenlayouts
  variant: light
  typography: modern
  radius: large
  logoHeight: 4rem
  stylesheets: ['files/design/custom.css']   # wird angelegt, falls nicht vorhanden
header:
  logo: file:design/logo.png
  search: suche       # Alias der Suchergebnisseite
brand:
  logo: file:design/logo-hell.png
bottom: ['impressum', 'datenschutz', 'sitemap']   # Links neben dem Copyright
imageSizes:
  card:
    name: Karte (4:3)
    width: 800
    height: 600
    resizeMode: crop
    densities: 400w, 600w, 800w
    sizes: '(min-width: 80rem) 384px, (min-width: 44rem) 31vw, calc(100vw - 2rem)'
    lazyLoading: true
pages:
  - title: Start
    articles:
      - elements:
          - { type: 'image', singleSRC: 'file:bilder/foto.jpg', size: 'image_size:card' }
modules:
  newslist: { name: 'News', type: 'newslist', news_archives: ['news_archive:blog'], imgSize: 'image_size:card' }
layout:
  prefooter: [partner]   # zusätzliche Module in Bereichen des Seitenlayouts
styleguide: true

Termine definierst du unter events:; das Datum ist ein strtotime()-Ausdruck ("2026-12-05", "5 December"), relative Angaben wie 'date:next saturday 15:00' sind ebenfalls möglich. Die mitgelieferten Demos im Ordner demo/ des Bundles sind die beste Vorlage.

Bildgrößen der Demos

Jede Bildgröße ist für einen Platz im Layout gedacht, damit der Browser nicht mehr lädt als nötig: