Komponenten-Typen

Sie definieren Komponenten. Komponenten sind die Datenschicht, die sich mit der Benutzeroberfläche verbindet.

Benutzerdefinierte Komponenten sind Blogbeiträge, Autoren, Adressen, benutzerdefinierte Rohdaten usw.

UI-Komponenten sind lediglich benutzerdefinierte Komponenten, die als UI-Elemente, Fußzeile, Kopfzeile, Hero usw. markiert sind.

Systemkomponenten werden vom CMS als Land und Sprache vordefiniert.

Was sind UI-Komponenten?

Seiten bestehen aus mehr als einer UI-Komponente.

Beispiele:

• Hero-Block
• Feature-Block
• Bildkarussell
• Kopfzeile/Fußzeile

Jede UI-Komponente repräsentiert einen Abschnitt Ihrer Seite.

Arbeitsablauf für UI-Komponenten

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

Beispiel: Hero-Block-Schema

Ein Hero-Block könnte 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-Bereichs

• Erstellen Sie einen neuen Block
• Hängen Sie das Schema (HeroSchema) an
• Benennen Sie den Block (z. B. hero-block)

Block einer Seite zuweisen

• Navigieren Sie im Admin-Bereich 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 Client-Seite mit Ihrer Renderer-Konfiguration abgerufen und gerendert werden.

Zusammenfassung

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