# 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.

[So funktioniert es](/de/how-it-works)

## Feature-Raster

### Titel und Text

Jede Karte ist ein verschachtelter Feature-Block mit Titel und kurzem Text.

### Optionaler Link

Mit einem Pfad wird die ganze Karte zum Link.

[Optionaler Link](/de/how-it-works)

## Schritte

Nummeriert in der Reihenfolge, die die Redaktion festlegt.

1. **Zum Sortieren ziehen**
   
   Wird ein Schritt in Storyblok verschoben, ändert sich die Nummerierung.

2. **Eine Datei verlinken**
   
   Ein Schritt kann die Datei nennen, die ihn umsetzt.
   
   [src/components/Steps.tsx](https://github.com/marcop135/nextstory/blob/main/src/components/Steps.tsx)

## 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
- [die Rich-Text-Dokumentation](https://www.storyblok.com/docs/concepts/fields/rich-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.

![Aquarellierte Website-Skizzen mit wiederverwendbaren Seitenabschnitten](https://images.unsplash.com/photo-1522542550221-31fd19575a2d?auto=format&fit=crop&w=1600&h=840&q=85)

Hal Gatewood / Unsplash: https://unsplash.com/photos/watercolor-wireframe-sketches-of-website-layouts-tZc3vjPCk-Q

[So funktioniert es](/de/how-it-works)

## 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.

> Ein Block nach dem anderen. Jeder mit einem konkreten Beispiel.

Der Ansatz hinter diesem Projekt

## 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.

Verantwortung für Inhalte und Komponenten

| 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 |

## 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.

```TypeScript
export function registerStoryblokComponents(): void {
  setComponents(storyblokComponents);
}
```

Die Registrierungsfunktion, die der Server-Renderer verwendet.

[src/lib/storyblok.ts](https://github.com/marcop135/nextstory/blob/main/src/lib/storyblok.ts)

## Quellcode ansehen

Die Komponenten und Content-Modelle hinter dieser Seite stehen auf GitHub.

[Auf GitHub ansehen](https://github.com/marcop135/nextstory)

## Notizen zur Umsetzung

[Inhalte verknüpfen](/de/content-relationships)

Eine Story auf mehreren Seiten verwenden

[Cache-Invalidierung](/de/cache-invalidation)

Einmal veröffentlichen, abhängige Seiten aktualisieren

Canonical: https://nextstory.marcopontili.com/de/blocks
Content source: storyblok; published representation.