Jeder CMSwerk-Workspace hat einen eigenen templates/-Ordner mit normalen Text-/HTML-/CSS-Dateien, die du mit jedem Editor anpassen kannst. Nichts davon ist im Programmcode fest verdrahtet: neue Themes, Abschnitts-Stile und Bausteine entstehen einfach durch neue Dateien an der richtigen Stelle. Diese Seite beschreibt die Struktur im Detail. Für den schnellen Einstieg siehe die Schnellstart-Anleitung.
Innerhalb von templates/ gibt es folgende feste Bestandteile:
base.css – gemeinsame, themeübergreifende Struktur-Regeln (Grid, Buttons, Karten, Header/Footer, mobiles Menü). Die Datei selbst enthält keine Platzhalter und wird beim Export unverändert kopiert; verlinkt wird sie in page.html trotzdem über den Platzhalter {{baseCssHref}} statt eines festen href="base.css", siehe "Platzhalter in page.html".themes/<name>/ – ein Unterordner pro Theme, siehe unten.section-<stil>.html, .fields.json, .meta.json – ein Satz dieser drei Dateien pro Abschnitts-Stil (z.B. "normal", "hero", "notice").blocks/<stil>/block.json, card.html, optional grid.html – ein Unterordner pro generischem Baustein-Stil (z.B. "service" für Leistungs-Karten, "team" für Team-Kacheln).rte-buttons/<stil>/style.json – ein Unterordner pro Button-Stil, der im Freitext-Editor über den "Button"-Werkzeug wählbar ist, siehe unten.icons/ – frei wählbare SVG-Dateien für Icon-Felder.Ein Theme ist ein Unterordner templates/themes/<name>/ mit genau vier Dateien:
theme.json – Anzeigename (label), Website-Name im Header (siteName) sowie ein Satz Farben unter colors: colorPrimary, colorPrimaryDark, colorAccent, colorBg, colorBgAlt, colorText, colorTextMuted, colorBorder, colorDeco1, colorDeco2. Optional zusätzlich heroOverlayStart und heroOverlayEnd (beide als CSS-Farbe inkl. Transparenz, z.B. rgba(10,12,26,0.68)): erzeugen einen Abdunklungs-Verlauf über dem Hero-Hintergrundbild, damit heller Fließtext darüber lesbar bleibt. Fehlen beide, wird das Hero-Bild ohne Verdunklung dargestellt.style.css – setzt diese Farben (und Schriftarten, Rundungsradius, maximale Inhaltsbreite) als CSS-Variablen im :root-Block, z.B. --color-accent: {{colorAccent}};. Die Platzhalter in geschweiften Klammern werden beim Export automatisch durch die Werte aus theme.json ersetzt. Zusätzliche, themespezifische CSS-Regeln (z.B. eine größere Logo-Höhe) gehören ebenfalls hierhin.logo.svg – das Logo-Bild. Muss als SVG vorliegen; ein anderes Bildformat lässt sich als eingebettetes Base64-Bild in ein SVG verpacken.page.html – das komplette HTML-Grundgerüst der Seite: Kopfbereich mit Meta-Tags, Header mit Navigation, Platzhalter für den Seiteninhalt, Footer. Ein neues Theme beginnt meist als Kopie eines bestehenden page.html, das dann angepasst wird.Ein neues Theme steht sofort in der Theme-Auswahl beim Anlegen einer Seite zur Verfügung, sobald der Ordner mit diesen vier Dateien existiert – keine Code-Änderung nötig.
Die wichtigsten Platzhalter, die page.html nutzen kann:
{{pageTitle}}, {{metaDescription}}, {{siteName}} – Texte für Titel-Tag und Meta-Beschreibung.{{cssFileName}}, {{baseCssHref}} – href-Werte für das theme-eigene bzw. das gemeinsame Stylesheet, jeweils mit einem an den Dateiinhalt gekoppelten ?v=…-Anhang. Ohne diesen Anhang bliebe der href über mehrere Exporte hinweg identisch, und sowohl Browser als auch die WebView-Vorschau von CMSwerk selbst würden eine geänderte CSS-Datei unter Umständen weiter aus ihrem Cache bedienen statt neu zu laden – deshalb sollte ein eigenes Theme in page.html immer diese Platzhalter statt fester href-Werte verwenden.{{logoPath}}, {{hasFavicon}} – Pfad zum exportierten Logo bzw. ob ein Favicon hinterlegt ist.{{navItems}} – komplette Navigation (Seiten- und Anker-Links kombiniert). Alternativ getrennt: {{pageNavItems}} (Links zu anderen Seiten), {{anchorNavItems}} (Sprungmarken innerhalb der aktuellen Seite) und {{hasAnchorNavItems}}, falls beide Ebenen optisch getrennt dargestellt werden sollen.{{footerNavItems}} – Links der als "Footer" platzierten Seiten (z.B. Impressum, Datenschutz).{{sections}} – der gesamte gerenderte Seiteninhalt, zusammengesetzt aus allen aktivierten Abschnitten.{{localBusinessSchema}} – strukturierte Daten für Google, falls Kontaktdaten hinterlegt sind.{{siteUrl}}, {{pageUrl}}, {{socialImageUrl}} – nur befüllt, wenn in den Website-Einstellungen eine Domain hinterlegt ist (nötig, da Canonical-Link und Open-Graph-Tags laut Spezifikation eine absolute URL brauchen). {{pageUrl}} ist die absolute Adresse der aktuellen Seite, {{socialImageUrl}} die absolute Adresse des hinterlegten Teaser-Bilds.{{ogTags}}, {{ogDescription}} – eigene, flache Bedingungswerte statt verschachtelter {{#if}}-Blöcke (siehe Hinweis zu {{#if}} unten): {{ogTags}} ist gesetzt, sobald {{siteUrl}} vorhanden ist, {{ogDescription}} zusätzlich nur, wenn auch eine Meta-Beschreibung gepflegt ist.Innerhalb einer section-<stil>.html stehen zusätzlich bereit: {{idAttr}} (fertiges id="anker"-Attribut für Sprungmarken), {{sectionClasses}}, {{blocks}} (die enthaltenen Bausteine), {{headingTag}} (automatisch h1 beim Stil "hero", sonst h2), {{sectionHeader}} (vorformatierter Kopfbereich aus Eyebrow/Überschrift/Text, nur befüllt wenn ein Text- oder Freitext-Feld nicht leer ist) sowie – sofern ein Feld backgroundImagePath existiert – {{heroStyleAttr}}, ein fertiges style="background-image: …"-Attribut inklusive optionalem Abdunklungs-Verlauf aus heroOverlayStart/heroOverlayEnd (siehe "Ein Theme aufbauen").
Bedingte Blöcke werden mit {{#if bedingung}}…{{/if}} geschrieben, z.B. {{#if hasFavicon}}<link rel="icon" href="favicon.ico">{{/if}}. Wichtig: diese Blöcke dürfen NICHT ineinander verschachtelt werden – die Auswertung ist nicht rekursiv und würde die Struktur zerreißen. Mehrere {{#if}}-Blöcke nacheinander sind dagegen problemlos möglich.
Ein Abschnitts-Stil (z.B. "hero" für eine große Kopfzeile oder "notice" für einen Hinweis-Balken) besteht aus drei Dateien mit demselben Namen:
section-<stil>.fields.json – Liste der Eingabefelder, die im Editor für diesen Stil erscheinen. Jedes Feld hat einen key (Platzhalter-Name), ein label (Beschriftung im Editor) und einen type: TEXT für einzeilige Texte, RICHTEXT für den WYSIWYG-Editor, IMAGE für ein Bild, LINK für ein Verlinkungsziel.section-<stil>.meta.json – zusätzliche Einstellungen, aktuell altBackground (true/false): ob aufeinanderfolgende Abschnitte dieses Stils automatisch zwischen normalem und leicht abgesetztem Hintergrund wechseln.section-<stil>.html – das HTML-Grundgerüst des Abschnitts. Nutzt dieselben {{key}}-Platzhalter wie in fields.json definiert, plus {{idAttr}} (Sprungmarke), {{sectionClasses}} und {{blocks}} (die enthaltenen Bausteine) – siehe vorheriger Abschnitt für die vollständige Liste.Zwei Feld-Namen werden unabhängig von fields.json immer besonders behandelt, sofern sie in der Section vorkommen: ein Feld bodyHtml (Freitext) durchläuft automatisch die Bild-/Download-Auflösung für darin eingefügte RTE-Inhalte (siehe "Bilder & Downloads"), und ein Feld backgroundImagePath speist den oben beschriebenen {{heroStyleAttr}}-Platzhalter für Hero-artige Stile.
Ein neuer Stil steht im Editor zur Auswahl, sobald alle drei Dateien mit demselben Namen existieren.
Neben Fließtext, Bildern, Tabellen und Galerien gibt es generische Bausteine mit frei definierbaren Feldern – z.B. die Leistungs-Karten ("service") oder Team-Kacheln ("team"). Ein solcher Blockstil liegt in einem eigenen Unterordner templates/blocks/<stil>/:
block.json – label (Anzeigename im Editor) und fields (dieselbe Struktur wie bei Abschnitts-Stilen: key, label, type – zusätzlich verfügbar ist ICON für Icon-Bilder). Optional ownGridTemplate, wenn mehrere Bausteine desselben Stils in einem Grid ein eigenes Kartenlayout statt des generischen Rasters nutzen sollen.card.html – das HTML für eine einzelne Karte, mit denselben {{key}}-Platzhaltern wie in block.json definiert.grid.html – nur nötig, falls ownGridTemplate gesetzt ist: das umschließende Grid-Layout mehrerer Karten dieses Stils.Ein neuer Blockstil steht im Grid-Editor zur Auswahl, sobald block.json und card.html existieren.
Bilder aus einem IMAGE- oder ICON-Feld sowie direkt in den Freitext eingefügte Bilder landen beim Export gesammelt in output/images/, referenziert per relativem Pfad images/<dateiname> im generierten HTML – unabhängig davon, wo die Quelldatei ursprünglich im Workspace lag. Über den "Datei einfügen…"-Dialog im Freitext-Editor verlinkte Downloads (z.B. ein PDF-Prospekt) landen analog dazu in output/files/. Ein eigenes Theme sollte daher keine festen Pfade zu Bildern/Downloads außerhalb dieser beiden Ordner erwarten. Ein LINK-Feld ist davon zu unterscheiden: sein Wert ist bereits der fertige, klickbare href (interne Seite/Anker oder externe Adresse) und wird beim Export unverändert übernommen, ohne Dateien zu kopieren.
Nach jeder Änderung an templates/ reicht ein Klick auf "Speichern & Generieren" oder die Vorschau, um das Ergebnis zu sehen – ein Neustart des Programms ist nicht nötig. Ein fehlerhaftes {{#if}} oder ein fehlender Platzhalter führt in der Regel nicht zu einem Absturz, sondern dazu, dass der entsprechende Text unverändert (mit den geschweiften Klammern) im HTML erscheint – ein guter Hinweis beim Fehlersuchen.