Designs & Ansichten
Ein Design ist der block-basierte Nachfolger eines Themes — ein Ordner unter designs/ mit einem Template je Ansicht. Das layout umschließt alle anderen; der outlet-Block markiert die Stelle, an der die jeweilige Ansicht erscheint.
designs/mein-design/ design.json # Name, Beschreibung, Design-Tokens layout.hml # Seitenrahmen (Kopf/Fuß) home.hml # Startseite single.hml # einzelner Beitrag page.hml # statische Seite archive.hml # Kategorie-Archiv 404.hml style.css # Basis-Styles des Designs
Die Ansichten
Für jede Ansicht gibt es ein Template. Das layout rahmt alle anderen ein; jede Ansicht stellt eigene Daten bereit.
| Ansicht | Wann | Verfügbare Daten |
|---|---|---|
layout | immer (Rahmen) | Kopf/Fuß, outlet |
home | Startseite | Beiträge, Seitennavigation |
single | einzelner Beitrag | Beitrag, Kategorien, Inhalt |
page | statische Seite | Seite, Inhalt |
archive | Kategorie | Überschrift, Beiträge |
404 | nicht gefunden | — |
Der outlet-Block
Das layout definiert den Seitenrahmen; outlet markiert die Stelle, an der die jeweilige Ansicht erscheint:
site-header outlet site-footer
Design-Tokens
In design.json (oder im Admin) lassen sich Farben, Schriften und Abstände als CSS-Variablen überschreiben — sie werden über die Basis-Tokens gelegt:
{
"name": "Mein Design",
"tokens": { "primary": "#0d9488", "font-display": "Georgia, serif" }
}
Im Admin bearbeiten
Unter Admin → Design lässt sich die Rendering-Engine (Themes ↔ Design-Blöcke) umschalten, ein Design aktivieren, jedes Template als HeroML live bearbeiten (mit Vorschau) und buchbare Block-Pakete freischalten. Änderungen greifen sofort.
Beiträge in HeroML schreiben
Auch einzelne Beiträge und Seiten lassen sich direkt in HeroML verfassen. Im Editor wählt das Format-Dropdown zwischen HeroML, Markdown, HTML und dem visuellen Editor. Im HeroML-Modus fügt die Schaltfläche „Block einfügen" fertige Blöcke — nach Kategorie gruppiert, inklusive Medien — an der Cursorposition ein, mit Live-Vorschau. Bei image-, gallery-, video- und audio-Blöcken öffnet sich dabei die Mediathek zur direkten Auswahl der Datei (ebenso beim Beitragsbild). Die Vorschau lässt sich per Umschalter auf Nur Code oder Vorschau stellen. So entstehen ganze Landingpages aus Blöcken, die der post-body-Block im Template an Ort und Stelle rendert.