Types of Components

Du definierar komponenter. Komponenter är datalagret som kopplar till UI.

Anpassade komponenter är blogginlägg, författare, adresser, anpassade rådata osv.

UI-komponenter är bara anpassade komponenter markerade som UI-element, footer, header, hero osv.

Systemkomponenter är fördefinierade av CMS:et som Country och Language.

Vad är UI-komponenter?

Sidor består av mer än en UI-komponent

Exempel:

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

Varje UI-komponent representerar en sektion av din sida.

Arbetsflöde för UI-komponenter

1. Definiera en komponent (strukturen för blocket) i komponentbyggaren
2. Skapa UI-komponenten
3. Tilldela UI-komponenten till en sida
4. Rendera den på klienten med lämpligt block i blockregistret och konfigurationen för din renderer

Exempel: Schema för hero-block

Ett hero-block kan innehålla:

• Bild
• Rubrik
• Underrubrik

JSON-schema i redigeraren

[
  {
    "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"
  }
]

Konfiguration i adminpanelen

• Skapa ett nytt block
• Koppla schemat (HeroSchema)
• Namnge blocket (t.ex. hero-block)

Tilldela block till sida

• Gå till en rutt i adminpanelen
• Klicka på Assign Page
• Lägg till det nyskapade blocket

Rendering på klienten

När blocket har tilldelats kan det hämtas och renderas på klientsidan med din renderarkonfiguration.

Sammanfattning

• Scheman definierar strukturen för block
• Block definierar sektioner av en sida
• Sidor består av flera block
• Fullt anpassningsbara och återanvändbara