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:

1. Sachverhalt prüfen
2. Im Vorstand abstimmen
3. 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:

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 Themenseiten
• description: "Kurze Zusammenfassung" — taucht in Google-Suchergebnissen und beim Teilen in WhatsApp auf
• tags: ["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.