documentation

Sie definieren Komponenten. Komponenten sind die Datenschicht, die mit der Benutzeroberfläche verknüpft ist.

**Benutzerdefinierte Komponenten **sind Blogbeiträge, Autoren, Adressen, benutzerdefinierte Rohdaten usw. **UI-Komponenten **sind einfach benutzerdefinierte Komponenten, die als UI-Elemente gekennzeichnet sind, etwa Footer, Header, Hero usw. **Systemkomponenten **sind vom CMS vordefiniert, beispielsweise Land und Sprache.

Was sind UI-Komponenten?

Seiten bestehen aus mehr als einer UI-Komponente.

Beispiele:

hero-block
feature-block
image-carousel
header/footer

Jede UI-Komponente stellt einen Abschnitt Ihrer Seite dar.

Workflow für UI-Komponenten

Definieren Sie eine Komponente (Struktur des Blocks) im Komponenten-Builder
Erstellen Sie die UI-Komponente
Weisen Sie die UI-Komponente einer Seite zu
Rendern Sie sie auf dem Client mit dem entsprechenden Block in der Block-Registry und der Renderer-Konfiguration

Beispiel: Hero-Block-Schema

Ein Hero-Block kann Folgendes enthalten:

Bild
Überschrift
Untertitel

JSON-Schema im Editor

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

Einrichtung des Admin-Panels

Erstellen Sie einen neuen Block
Verknüpfen Sie das Schema (HeroSchema)
Benennen Sie den Block (z. B. hero-block)

Block einer Seite zuweisen

Navigieren Sie im Admin-Panel zu einer Route
Klicken Sie auf Assign Page
Fügen Sie den neu erstellten Block hinzu

Rendering auf dem Client

Sobald er zugewiesen wurde, kann der Block auf der Clientseite mit Ihrer Renderer-Konfiguration abgerufen und gerendert werden.

Zusammenfassung

Schemas definieren die Struktur von Blöcken
Blöcke definieren Abschnitte einer Seite
Seiten bestehen aus mehreren Blöcken
Vollständig anpassbar und wiederverwendbar

Komponententypen