Der Seiten-Editor
Aufbau
- Kopfzeile: Titel, Pfad (Klick öffnet die Seite), Veröffentlicht, Vorschau ein/aus, Speichern.
- Tabs: HTML · Blöcke (nur bei Seiten aus Blöcken, siehe 7.6) · CSS · JS · Head · Einstellungen.
- Live-Vorschau rechts. Die Trennlinie lässt sich ziehen (Doppelklick setzt sie zurück, mit Fokus auch per Pfeiltasten). Oben wählst du Desktop, Tablet oder Mobil.
Die Vorschau zeigt ungespeicherte Änderungen – auch an CSS- und JS-Dateien. Sie läuft in einer abgeschotteten Umgebung: Skripte werden ausgeführt, können aber nicht auf den Admin oder die API zugreifen. Bei Catch-All-Seiten gibt es ein Feld Unterpfad, um z. B. mein-artikel zu simulieren.
Template-Daten: Unter der Vorschau lässt sich das Panel Template-Daten aufklappen (es startet eingeklappt; die Höhe lässt sich an der Kante ziehen). Es zeigt, was Templates dieser Seite sehen: die Variablen (page, site, route, today …), das Ergebnis von nav() und children(), alle Collections mit ihren Feldern und den ersten 20 Einträgen von data("slug") sowie die REST-Datenquellen, deren Daten du per Abrufen lädst. Objekte und Listen klappst du Ebene für Ebene auf. Beim Überfahren einer Zeile fügt {{ }} den passenden Ausdruck in den HTML-Tab ein, etwa {{ nav().0.title }}. Bei Listen fügt {% for %} eine Schleife darüber ein. Das Panel folgt ungespeichertem Titel, SEO-Titel und Unterpfad. Lokale Variablen aus Schleifen, {% set %} oder Komponenten-Parametern entstehen erst beim Rendern und fehlen deshalb. Für sie hilft {{ wert|json }} in der Vorschau.
HTML-Tab
Das HTML der Seite – ohne <html>, <head> und <body>; das Gerüst setzt das CMS selbst (inklusive Zeichensatz, Viewport, Titel, Beschreibung, CSS und JS). Schreibst du doch ein komplettes Dokument mit <html>, wird es unverändert übernommen und CSS/JS werden vor </head> bzw. </body> eingefügt.
Werkzeugleiste:
| Button | Funktion |
|---|---|
| Snippet | Snippet einfügen: als Inhalt (Kopie), als Include (Verweis) oder – bei Snippets mit Slots – als Komponente mit vorbereiteten fill-Blöcken. |
| Bild | Bild aus der Dateiverwaltung wählen, Alt-Text, sizes und CSS-Klasse setzen → fertiges <img> mit srcset. Alternativ als Template-Tag {{ image(…) }}, das immer den aktuellen Alt-Text verwendet. |
| Datei-Link | Link auf eine Datei einfügen (z. B. PDF). |
| Daten | Schleife über eine Collection oder REST-Quelle einfügen – mit allen Feldern vorbereitet. |
| Formatieren | Code ordentlich einrücken (Prettier). Template-Tags bleiben exakt erhalten. |
| Template-Hilfe | Spickzettel aller Template-Funktionen. |
Emmet
Im HTML- und CSS-Editor ist Emmet eingebaut. Beim Tippen wird eine erkannte Abkürzung gepunktet unterstrichen und darunter eine Vorschau gezeigt:
| Eingabe + Tab | Ergebnis |
|---|---|
ul>li.item*3 |
Liste mit drei <li class="item"> |
section.hero>h1+p{Text} |
verschachtelte Elemente mit Inhalt |
a[href=/kontakt]{Kontakt} |
Link mit Attribut |
m10 (CSS, innerhalb einer Regel) |
margin: 10px; |
bgc#f00 (CSS) |
background-color: #ff0000; |
Ohne erkannte Abkürzung rückt Tab ganz normal ein. Esc verwirft eine Markierung, wenn du gar keine Abkürzung tippen wolltest. Weitere Kürzel: Strg+E (erweitern), Strg+⇧+A (Auswahl mit Abkürzung umschließen), Strg+⇧+D (umgebendes Tag auswählen). Benennst du ein öffnendes Tag um, zieht das schließende mit.
Formatieren
Formatieren (oder Shift+Alt+F) bringt den Code in eine lesbare Form – ideal für importierte Seiten, die oft in einer einzigen Zeile stehen. Strg+Z macht es in einem Schritt rückgängig.
- Template-Tags (
{{ … }},{% … %}) werden vorher geschützt und exakt wieder eingesetzt. - Wo zusätzlicher Leerraum sichtbar wäre (z. B. zwischen direkt aneinander stehenden Links), bricht Prettier anders um, etwa
</a\n><a. Das sieht ungewohnt aus, verändert aber die Darstellung nicht. - Ist das HTML fehlerhaft (z. B. ein nicht geschlossenes Tag), erscheint eine Meldung mit Zeile und Spalte – der Code bleibt unverändert.
Head-Tab
Zusätzlicher Inhalt für <head>: Meta-Tags, Open-Graph-Angaben, Fonts, Analytics. Template-Syntax ist möglich:
<meta property="og:title" content="{{ page.meta_title }}">
<link rel="canonical" href="https://www.firma.de{{ page.path }}">