CMF bedienen: Anleitung für Menschen

Den Admin erreichst du unter /admin.php mit „User“ und „Passwort“.

Beim ersten Mal meldest du dich mit admin / admin an. CMF verlangt dann sofort ein eigenes Passwort: Unter „Eigenes Passwort festlegen“ gibst du es bei „Neues Passwort“ und „Neues Passwort wiederholen“ ein (mindestens 8 Zeichen) und klickst „Passwort speichern“.

Nach Fehlversuchen wartet der Login jedes Mal länger, bis zu einer Stunde.

• Seiten – Seiten anlegen und bearbeiten
• Blog – Beiträge und Blog-Einstellungen
• Header/Footer – Kopf- und Fußbereich aller Seiten
• Theme – Farben, Schriften, Abstände, Custom CSS
• Media – Bilder und Dateien
• Einsendungen – Nachrichten aus Formularen
• Benutzer – Zugänge, Passwörter, API-Zugänge
• Einstellungen – System-Update, Export, Import

Dazu „Frontend“ (öffnet die Website in einem neuen Tab) und „Logout“.

1. Seiten → „+ Neue Seite“
2. „Titel“ und „Slug“ eintragen
3. Die Überschrift (h1) ist schon angelegt – Text anpassen
4. „+ Text“ für einen Absatz
5. „Status“ auf published stellen
6. „Speichern“, dann „Öffnen“

• „Titel“ – Name der Seite, zugleich Seitentitel im Browser
• „Slug“ – URL-Teil (kontakt → /kontakt). Umlaute werden umgeschrieben (ä → ae), ein vergebener Slug bekommt -2. Der Slug home ist die Startseite.
• „Status“ – draft (nur im Admin) oder published
• „Navigation“ – „anzeigen“ oder „verstecken“
• „Nav-Order“ – Reihenfolge im Menü, kleinere Zahl weiter vorn
• „Nav-Label“ – anderer Menütext, leer = Titel
• „Unterpunkt von“ – Auswahlfeld mit allen Seiten; „— Hauptebene —“ heißt: kein Untermenü
• „Robots“ – „index, follow (Standard)“, „noindex“ oder „noindex, nofollow“

Oben stehen „← Zur Liste“, „Speichern“ und „Öffnen“.

Meta-Beschreibung: Dafür gibt es kein eigenes Feld. Du trägst sie in der Ansicht „JSON“ unter meta.description ein.

Unter Seiten stehen alle Seiten in Menü-Reihenfolge, Unterseiten eingerückt. Unter jedem Titel steht klein der Slug.

Reihenfolge ändern: Zeile ziehen oder die Pfeile ▲ und ▼ nutzen – das setzt „Nav-Order“ neu.

Aktionen je Seite: „Bearbeiten“, „Duplizieren“ (legt eine Kopie mit „(Kopie)“ im Titel als Entwurf an) und „Löschen“.

Untermenüs: Im Editor bei „Unterpunkt von“ die Elternseite auswählen. Würde die Zuordnung eine Schleife bilden, verwirft CMF sie und sagt es dir. Löschst du eine Elternseite, rücken ihre Unterseiten auf die Hauptebene.

Überschrift mit „Level“ (h1 bis h6) und „Text“. Pro Seite genau ein h1, darunter h2 und h3.

Feld „HTML-Text“ für Absätze. Erlaubt sind nur einfache Tags wie p, strong, em, a, ul und li – alles andere entfernt CMF bei der Ausgabe.

Felder „Bildpfad“, „Alt-Text“, „Bildunterschrift“ und „Loading“ (lazy oder eager). „Bild auswählen“ übernimmt ein hochgeladenes Bild. Breite und Höhe lassen sich nur per JSON oder API setzen; sie bleiben beim Speichern erhalten, solange das Bild gleich bleibt.

„Typ“ ungeordnet oder geordnet, Einträge über „+ Eintrag“.

Je Button „Button-Text“ und „Button-Link“, weitere über „+ Button“. Die farbige Hervorhebung (primary) setzt du in der JSON-Ansicht.

Zeigt veröffentlichte Beiträge als Karten. „Kategorie-Filter“ leer lassen = alle Beiträge.

Felder „Titel (optional)“, „Button-Text“, „Einleitungstext (optional)“, „Danke-Meldung“, „E-Mail-Empfänger (optional)“, „Einsendungen speichern“ und „Bestätigungsmail an Absender“. Formularfelder fügst du mit „+ Feld“ hinzu: Beschriftung, Typ (Text, E-Mail, Telefon, Mehrzeilig, Auswahl, Checkbox, Radio) und „Pflicht“. Was danach passiert: Einsendungen.

Bei „Spalten“ wählst du 2 bis 5. Jede Spalte hat eine eigene Schaltfläche „+ Block in diese Spalte“ und nimmt normale Blöcke auf. Mit ← und → verschiebst du eine Spalte, ✕ leert sie.

Auf kleinen Bildschirmen stehen die Spalten automatisch untereinander.

Das Feld „HTML-Code“ wird ungefiltert ausgegeben – für alles, was die anderen Blöcke nicht können: Karten, Tabellen, Zeitleisten, eingebettete Videos. Verwende nur Code, dem du vertraust.

Eingebettete Videos über HTTPS funktionieren direkt. Externe Skripte, Schriften oder Verbindungen blockiert die Content-Security-Policy, bis sie in config/site.json unter csp erlaubt sind (siehe Installationsanleitung).

Tipp: Eigene Klassen unter Theme → Custom CSS anlegen und hier per class="…" verwenden, statt Inline-Styles.

In jeder Spalte dürfen normale Blöcke liegen: Überschriften, Text, Listen, Bilder oder Buttons.

Die Spalten passen sich auf kleinen Bildschirmen automatisch untereinander an – von fünf nebeneinander bis zu einer einzigen Spalte auf dem Smartphone.

Spalten eignen sich besonders für Vergleiche, Feature-Listen oder Inhalte, die nebeneinander besser wirken als untereinander.

Buttons funktionieren auch innerhalb von Spalten. So entstehen kompakte Call-to-Action-Bereiche direkt neben erklärendem Text oder Bildern.

Der Style primary hebt den Button farblich hervor. Ohne Style wird er dezent dargestellt.

Normale Textblöcke zeigen, dass auch längere Absätze in schmalen Spalten gut lesbar bleiben.

Das System bricht den Text automatisch um. Schriftgröße und Zeilenabstand werden vom Theme gesteuert – hier muss nichts manuell angepasst werden.

• Listen in Spalten
• Funktionieren genauso
• Wie außerhalb

Unter Media wählst du eine Datei aus und klickst „Upload“ – eine Datei pro Durchgang, Drag & Drop gibt es nicht.

Uploads landen unter /media/JJJJ/MM/. Der Dateiname bekommt immer einen Zufallsanhang, aus bild.jpg wird etwa bild-3f9a1c2e.jpg.

Erlaubt: jpg, jpeg, png, webp, gif, svg, pdf, mp4, mp3, wav. SVG-Dateien werden bereinigt: Unsichere Teile entfernt CMF, ablehnen muss es nur Dateien, die kein lesbares SVG sind.

Tipp: CMF verkleinert Bilder nicht. Bring sie vorher auf die benötigte Größe.

Im Bild-Block öffnet „Bild auswählen“ die hochgeladenen Bilder – ein Klick übernimmt den Pfad in „Bildpfad“.

Beim Blog-Beitrag steht neben „Bild (Pfad)“ eine eigene Schaltfläche „Bild auswaehlen“.

Die Spalte „Einbindung“ zeigt für jede Datei, wo sie verwendet wird: auf Seiten, in Beiträgen, als Beitragsbild, im Header/Footer, im Custom CSS oder in site.json.

Verwendete Dateien sind „gesperrt“. Nur Dateien mit „nicht eingebunden“ haben „Löschen“.

„Auf Einbindung prüfen“ listet alle unbenutzten Dateien auf einer eigenen Seite.

Das Menü baut CMF selbst aus deinen Seiten:

• Es erscheinen Seiten mit „Status“ published und „Navigation“ „anzeigen“.
• Sortiert nach „Nav-Order“ – kleinere Zahl weiter vorn.
• „Nav-Label“ ersetzt den Menütext.
• „Unterpunkt von“ macht aus einer Seite einen Eintrag im Klappmenü.

Tipp: Neue Seiten stehen auf „anzeigen“. Versteckte Seiten sind weiter erreichbar, nur nicht im Menü.

Unter Header/Footer klickst du bei „Header“ oder „Footer“ auf „Bearbeiten“. Du arbeitest mit denselben Blocktypen wie auf Seiten, auch das Umschalten auf „JSON“ funktioniert gleich.

Header und Footer erscheinen auf allen Seiten und Beiträgen.

Unter Theme stellst du das Design per Formular ein, JSON brauchst du dafür nicht. Die Seite ist in Gruppen geteilt:

• Layout – „Container-Breite“, „Innenabstand“, „Spaltenabstand“
• Ecken – drei Rundungen von klein bis groß
• Farben – acht Farben von „Hintergrund“ bis „Links“, jeweils mit Farbwähler und Textfeld für den Hex-Wert
• Schriftgrößen – „Body“ und „H1“ bis „H5“
• Schriftarten – „Body-Font“, „Body-Gewicht“, „Heading-Font“, „Heading-Gewicht“; Gewicht light, regular oder bold

„Theme speichern“ macht die Änderung sofort sichtbar, „Frontend prüfen“ öffnet die Website.

Schriften: 10 Familien sind dabei – Inter, Lato, Merriweather, Montserrat, Nunito, OpenSans, PTSerif, PlayfairDisplay, Raleway und Roboto. Alle gibt es in Light, Regular und Bold, PTSerif nur in Regular und Bold.

Ganz unten auf der Theme-Seite steht das Feld „Custom CSS“. Es wird mit „Theme speichern“ gesichert und nach der Theme-CSS geladen – es kann also alles ergänzen oder überschreiben.

Eigene Klassen dort anlegen und in HTML-Blöcken per class="…" verwenden, statt Inline-Styles.

Unter Blog legt „+ Neuer Beitrag“ einen Entwurf an. Neue Beiträge stehen oben.

• „Titel“ und „Slug“ – leerer Slug = aus dem Titel
• „Status“ – draft oder published
• „Kategorie“ – „— Keine —“ oder eine der Kategorien aus den Blog-Einstellungen
• „Robots“ – wie bei Seiten
• „Bild (Pfad)“ mit „Bild auswaehlen“ – Bild der Karte und Vorschaubild beim Teilen
• „Beschreibung“ – Text auf der Karte, im Feed, in der llms.txt und als Meta-Beschreibung

Reihenfolge: Zeilen ziehen oder ▲ und ▼ nutzen. Die Reihenfolge gilt für die Übersicht.

Aktionen: „Bearbeiten“, „Duplizieren“, „Löschen“.

Unter der Liste stehen die „Blog-Einstellungen“:

• „Blog-URL-Prefix“ – Teil der Beitrags-URL, Standard blog. Mit news liegen Beiträge unter /news/beitrag-slug.
• „Kategorien (kommagetrennt)“ – z. B. Neuigkeiten, Tutorials, Updates

„Einstellungen speichern“ übernimmt beides, Sitemap und Feed ziehen die neuen Adressen nach.

Blog-Übersicht einrichten: Leg eine normale Seite an und füge den Block „+ Blog-Uebersicht“ ein. Er zeigt alle veröffentlichten Beiträge als Karten mit Bild, Datum, Titel und Beschreibung, auf Wunsch gefiltert nach einer Kategorie.

Einzelne Beiträge liegen unter /prefix/beitrag-slug, z. B. /news/mein-beitrag.

Heißt die Übersichtsseite genauso wie der Prefix (etwa Slug news), erscheint sie auch im Brotkrumen-Pfad der Beiträge.

Steht ein Formular-Block auf „Einsendungen speichern: ja“, landen die Nachrichten unter Einsendungen. Die Liste zeigt je Formular die Spalten „Einsendungen“ und „Neu“. „Ansehen“ öffnet sie, die neueste steht oben.

• „Alle als gelesen“ – markiert alle Einsendungen des Formulars als gelesen
• „Löschen“ – entfernt eine einzelne Einsendung
• „Alle löschen“ – leert das Formular komplett
• „CSV-Export“ – Tabelle für Excel oder LibreOffice

Mit einem „E-Mail-Empfänger“ bekommst du jede Einsendung zusätzlich per Mail. Spam-Schutz ist eingebaut, ohne Cookie (unsichtbares Fangfeld und signierte Zeitfalle). Pro Absender-IP gehen höchstens 10 Einsendungen je Stunde durch.

Datenschutz: Nimm eine Einwilligungs-Checkbox ins Formular und lösche Einsendungen, die du nicht mehr brauchst.

Unter Benutzer steht links die Tabelle mit „Benutzername“ und „Typ“ („Login“ oder „Login + API“).

„Neuen Zugang anlegen“: „Benutzername“, „Passwort“ (mindestens 8 Zeichen), optional das Häkchen „API-Zugang anlegen“, dann „Benutzer anlegen“. Ein API-Token erscheint danach genau einmal – sofort kopieren.

„Passwort ändern“: Benutzer auswählen, „Neues Passwort“ eintragen, „Passwort speichern“.

Rollen gibt es nicht: Jeder Zugang ist voller Admin, auch ein API-Zugang. Zugänge lassen sich nicht bearbeiten, nur löschen. Der letzte Benutzer kann nicht gelöscht werden.

Per Häkchen wählst du, was ins ZIP-Backup kommt:

• Header und Footer
• Seiten – alle Seiten samt Seitenliste
• Medien – alle hochgeladenen Dateien
• Blog – Beiträge, Prefix und Kategorien
• Theme und Custom CSS

„ZIP exportieren“ lädt cmf-backup-JJJJ-MM-TT.zip herunter.

Nicht im Backup: Benutzer, site.json und Formular-Einsendungen.

1. ZIP-Datei auswählen und „ZIP analysieren“ klicken.
2. Unter „ZIP-Inhalt“ zeigt CMF, was drin ist: Header, Footer, Seiten mit Titeln, Mediendateien, Blog-Beiträge, Theme und Custom CSS. Häkchen setzen oder entfernen.
3. „Import starten“ – oder „Abbrechen“.

Wichtig: Seiten und Beiträge mit gleicher ID werden überschrieben, neue kommen dazu, gelöscht wird nichts. Medien behalten ihre Pfade. Theme und Custom CSS werden durch die Fassung aus dem ZIP ersetzt.

Oben im Bereich „System-Update“ steht die „Installierte Version“ neben der verfügbaren. Gibt es eine neuere, erscheint „Update auf … installieren“; der Changelog lässt sich darunter aufklappen.

Vor dem Austausch sichert CMF die Systemdateien automatisch. Inhalte, Medien, Benutzer und Design bleiben unangetastet. Nach dem Update stehen unter „Hinweise zum letzten Update“ eventuell angepasste Dateien, die nicht ersetzt wurden.

Läuft etwas schief: „Rollback zur vorherigen Version“. Mehr dazu in der Installationsanleitung.

• Pro Seite genau ein h1
• Logische Überschriften-Hierarchie (h2, h3, …)
• Bilder mit aussagekräftigem Alt-Text – leer nur bei reiner Dekoration
• Eine Meta-Beschreibung je Seite
• Im Text-Block nur einfaches HTML
• HTML-Block nur für Sonderfälle

Diese Regeln prüft CMF bei Änderungen über die API. Der Admin prüft beim Speichern nur, ob das JSON gültig ist und Blöcke enthält – ein unvollständiger Block, etwa ein Bild ohne Pfad, wird dort gespeichert, aber nicht angezeigt.

• Der Seitentitel (meta.title) darf nicht leer sein
• Jeder Block braucht id, type und data; IDs sind eindeutig, auch in Spalten
• Nur die 9 bekannten Blocktypen
• Heading: Level 1 bis 6 und ein Text
• Bild: Bildpfad Pflicht, das Alt-Text-Feld muss vorhanden sein
• Liste: ordered als true oder false, Einträge als Text
• Buttons: mindestens ein Button, jeder mit Text und Link
• Spalten: 2 bis 5, mit genau so vielen Spalten-Inhalten
• Formular: mindestens ein Feld; jedes Feld braucht name, label und type. Der name besteht aus a–z, 0–9 und _ und ist eindeutig. Auswahl und Radio brauchen Optionen, der E-Mail-Empfänger eine gültige Adresse.

Wie veröffentliche ich eine Seite?
„Status“ auf published stellen und „Speichern“. Seiten mit draft siehst nur du im Admin.

Wie erstelle ich ein Untermenü?
Im Seiten-Editor bei „Unterpunkt von“ die Elternseite auswählen.

Muss jede Seite ein h1 haben?
Ja, genau eins. Neue Seiten bringen es schon mit.

Wo trage ich die Meta-Beschreibung ein?
In der Ansicht „JSON“ unter meta.description. Bei Blog-Beiträgen im Feld „Beschreibung“.

Wie lösche ich einen Block?
Mit ✕ am Block. Ein Rückgängig gibt es nicht – solange du nicht gespeichert hast, kannst du die Seite aber verlassen und die Änderung verwerfen (der Browser fragt nach).

Wie verschiebe ich einen Block?
Mit ↑ und ↓ am Block.

Kann ich zwischen Editor und JSON wechseln?
Ja, mit „Block-Editor“ und „JSON“ über den Blöcken. Änderungen werden beim Wechsel übernommen.

Darf ich eigene Felder im JSON ergänzen?
Nein. Unbekannte Felder werden ignoriert.

Wie lade ich Bilder hoch?
Media → Datei auswählen → „Upload“. Dann im Bild-Block über „Bild auswählen“ einbinden.

Warum hat mein Bild einen anderen Dateinamen?
CMF hängt beim Upload immer einen Zufallsanhang an. Nutze den Pfad, den Media anzeigt.

Wie ändere ich Schrift und Farben?
Theme → „Body-Font“ oder „Heading-Font“ wählen, Farben per Farbwähler setzen, dann „Theme speichern“.

Kann ich eigenes CSS schreiben?
Ja, im Feld „Custom CSS“ unten auf der Theme-Seite.