Titel und Text
Jede Karte ist ein verschachtelter Feature-Block mit Titel und kurzem Text.
Block-Bibliothek
Jeder Block dieser Site
Diese Seite besteht aus denselben Blöcken wie der Rest der Site. Das Label über jedem Abschnitt ist sein Storyblok-Komponentenname.
- Definieren
- Registrieren
- Zusammenstellen
- Rendern
feature_grid
Feature-Raster
Optionaler Link
Mit einem Pfad wird die ganze Karte zum Link.
steps
Schritte
Nummeriert in der Reihenfolge, die die Redaktion festlegt.
Zum Sortieren ziehen
Wird ein Schritt in Storyblok verschoben, ändert sich die Nummerierung.
Eine Datei verlinken
Ein Schritt kann die Datei nennen, die ihn umsetzt.
rich_text
Rich Text
Storyblok Rich Text wird auf dem Server mit StoryblokServerRichText gerendert. Unterstützt werden Fettdruck, Links und Listen:
Absätze und Überschriften
Inline-Code und Links
image_text
Eine Seite aus Blöcken
Bild und Text gehören zu einem Abschnitt. Die Redaktion kann beides ändern, die Bildposition wechseln und das Linkziel festlegen.
So funktioniert esaccordion
Die Blöcke im Detail
Was kann die Redaktion ändern?
Die Felder in Storyblok bestimmen den Inhalt. Die Redaktion kann Abschnitte umsortieren, Texte bearbeiten und alle Blöcke hinzufügen, die das Seitenmodell zulässt.
Braucht diese Interaktion JavaScript?
Nein. Dieses Akkordeon verwendet die nativen HTML-Elemente details und summary. Es lässt sich mit der Maus, per Touchbedienung oder mit der Tastatur öffnen, auch bevor JavaScript geladen ist.
pull_quote
Ein Block nach dem anderen. Jeder mit einem konkreten Beispiel.
comparison_table
Was sich im CMS ändert und was im Code
Die Redaktion arbeitet mit den Blöcken, die die Entwicklung bereitstellt. Das Content-Modell verbindet beide Seiten.
| Aufgabe | Redaktion in Storyblok | Entwicklung im Repository |
|---|---|---|
| Texte und Übersetzungen | Felder bearbeiten und veröffentlichen | Kein Deployment nötig |
| Abschnitte anordnen | Vorhandene Blöcke umsortieren | Erlaubte Blöcke im Schema festlegen |
| Einen neuen Block hinzufügen | Den bereitgestellten Block verwenden | Schema, React-Komponente und Tests ergänzen |
code_example
Die Schema-Namen werden React-Komponenten zugeordnet
Der Server registriert die Komponenten-Zuordnung, bevor er eine Story rendert. Jeder Blockname im CMS verweist auf seine Implementierung.
export function registerStoryblokComponents(): void {
setComponents(storyblokComponents);
}cta_band
Quellcode ansehen
Die Komponenten und Content-Modelle hinter dieser Seite stehen auf GitHub.
related_content