Beispielseite für Editoren
Diese Seite zeigt, was beim Bearbeiten von Inhalten über Sveltia CMS möglich ist. Sie ist absichtlich öffentlich erreichbar unter /test/, damit Editoren live sehen können, wie sich Eingaben auswirken.
Zwei Editor-Modi in Sveltia
Im Editor gibt es oben rechts in der Werkzeugleiste den Knopf m↓. Damit wechselt ihr zwischen:
- WYSIWYG (Standard) — wie ein Office-Programm, mit Knöpfen für Fett, Kursiv, Link usw.
- Markdown-Quelltext — Rohtext mit Auszeichnungssymbolen. Hier funktionieren auch fortgeschrittene Sachen, die die Knöpfe nicht abdecken.
Die meisten Dinge unten gehen über die WYSIWYG-Knöpfe. Punkte 6–9 brauchen den Quelltext-Modus.
1. Überschriften
Die Seitenüberschrift kommt automatisch aus dem Feld „Titel" oben im Editor — nicht als H1 in den Inhalt schreiben.
Innerhalb des Inhalts dann mit absteigender Wichtigkeit:
Zweite Ebene
Dritte Ebene
Vierte Ebene
(Im WYSIWYG: Dropdown ganz links in der Werkzeugleiste, das mit dem ¶-Symbol.)
2. Textauszeichnung
Fett gedruckt für wichtige Begriffe, kursiv für Hervorhebungen, durchgestrichen für Überholtes, und Code für technische Begriffe oder Dateinamen.
3. Listen
Aufzählung:
- Sachstandsinformation für die Eigentümer
- Stellungnahmen zum Hochwasserschutz-Konzept der Stadt
- Dokumentation der Dammvermessung
- Verschachtelung ist möglich
- Einfach Tab drücken
Nummerierte Liste:
- Sachverhalt prüfen
- Im Vorstand abstimmen
- Stellungnahme erarbeiten und einreichen
4. Links
Externer Link: Stadt Hennef
Interner Link zur Startseite: zur Startseite
(Tipp: bei internen Links nur den Pfad ab / angeben, ohne https://ig-buelgenauel-unterdorf.de davor.)
5. Bilder
Über das Bild-Icon in der Werkzeugleiste hochladen. Sveltia legt die Datei automatisch in static/uploads/ ab und bindet sie ein:

Wenn unter /uploads/ noch nichts liegt, erscheint hier ein gebrochener Bildlink — das ist Absicht in dieser Demo.
6. Zitate (Markdown-Modus)
Einen halben Meter Damm aufzufahren ist das mildere Mittel, als rund 70 Gebäude abzureißen.
In Markdown geschrieben mit einem > am Zeilenanfang. Gut geeignet für Kernaussagen oder Auszüge aus Stellungnahmen.
7. Tabellen (Markdown-Modus)
Beispiel — die baurechtliche Verfahrenshistorie als Tabelle:
| Datum | Instanz | Ergebnis |
|---|---|---|
| 01.09.2022 | VG Köln | zugunsten der Eigentümer |
| 26.07.2024 | OVG Münster | Berufung der Stadt erfolgreich |
| 05.05.2025 | BVerwG | Beschwerde nicht zugelassen |
Im Markdown-Modus geschrieben — die Striche | trennen Spalten, die Linie aus --- markiert die Kopfzeile.
8. Code-Blöcke mit Hervorhebung (Markdown-Modus)
# Beispiel-Frontmatter für eine neue Seite
title: "Mein Beitrag"
date: 2026-06-15T18:00:00
draft: false
Drei Backticks ` ``` davor und danach, optional die Sprache dahinter (yaml, bash, python, html`, …) für farbige Hervorhebung.
9. Theme-Tricks: Hugo Shortcodes (Markdown-Modus)
Shortcodes sind kleine Bausteine, die Hugo beim Bauen der Seite zu fertigem HTML expandiert. Sie sehen so aus: {{< name parameter >}}.
YouTube-Video einbetten
{{< youtube w7Ft2ymGmfc >}}
Ersetzt die ID am Ende der YouTube-URL (https://www.youtube.com/watch?v=**w7Ft2ymGmfc**) und das Video erscheint als Player auf der Seite.
Bild mit Bildunterschrift
{{< figure src="/uploads/damm.jpg" title="Hochwasserschutz-Damm an der Sieg" caption="Westabschnitt des Damms im Bereich des Polders" >}}
Wesentlich schöner als der einfache Bild-Knopf in der Toolbar, weil Bildunterschrift, Titel und ggf. Link gesetzt werden können.
Trennlinie
Drei Bindestriche allein in einer Zeile:
10. Was im Frontmatter geht (vorerst nur über Patrick)
Ananke unterstützt einige spezielle Felder im Frontmatter, die das Layout der Seite beeinflussen:
featured_image: "/uploads/damm.jpg"— Hero-Bild ganz oben, halb über die Bildschirmbreite, sehr stimmungsvoll für Themenseitendescription: "Kurze Zusammenfassung"— taucht in Google-Suchergebnissen und beim Teilen in WhatsApp auftags: ["Hochwasserschutz", "Verfahren"]— Schlagworte zum Filtern
Diese Felder sind derzeit nicht über die Sveltia-Oberfläche editierbar. Falls Bedarf besteht, kann Patrick die config.yml entsprechend erweitern — sagt einfach Bescheid.
11. Speichern und Veröffentlichen
- Oben rechts der blaue Save-Knopf → Commit auf GitHub.
- Cloudflare baut die Seite automatisch neu (~30 Sekunden) und veröffentlicht sie live.
- Mit Häkchen bei Entwurf in den Seiten-Metadaten wird die Seite nicht veröffentlicht — gut zum Vorbereiten.
- Eine Seite löschen: in der Seitenliste den Eintrag öffnen, dann rechts im Drei-Punkte-Menü „Delete".
Bei Fragen oder Wünschen (z. B. Menüstruktur, weitere Felder, andere Layouts) → Patrick anpingen.