Types of Components

Definisci i componenti. I componenti sono il livello di dati che si connette con l'interfaccia utente.

Componenti personalizzati sono articoli del blog, autori, indirizzi, dati grezzi personalizzati, ecc.

Componenti UI sono semplicemente componenti personalizzati contrassegnati come elementi dell'interfaccia utente, come footer, header, hero, ecc.

Componenti di sistema sono predefiniti dal CMS come Paese e Lingua.

Che cosa sono i componenti UI?

Le pagine sono composte da più di un componente UI

Esempi:

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

Ogni componente UI rappresenta una sezione della tua pagina.

Flusso di lavoro dei componenti UI

1. Definisci un componente (struttura del blocco) nel builder dei componenti
2. Crea il componente UI
3. Assegna il componente UI a una pagina
4. Renderizzalo lato client con il blocco appropriato nel registro dei blocchi e nella configurazione del renderer

Esempio: Schema del blocco hero

Un blocco hero può contenere:

• Immagine
• Intestazione
• Sottotitolo

Schema JSON nell'editor

[
  {
    "name": "intestazione",
    "type": "stringa",
    "required": false,
    "displayName": "intestazione"
  },
  {
    "name": "sottotitolo",
    "type": "stringa",
    "required": false,
    "displayName": "sottotitolo"
  },
  {
    "name": "immagine_hero",
    "type": "immagine",
    "required": false,
    "displayName": "immagine_hero"
  }
]

Configurazione del pannello di amministrazione

• Crea un nuovo blocco
• Allega lo schema (HeroSchema)
• Assegna un nome al blocco (ad es., hero-block)

Assegna il blocco alla pagina

• Vai a un percorso nel pannello di amministrazione
• Fai clic su Assign Page
• Aggiungi il blocco appena creato

Rendering lato client

Una volta assegnato, il blocco può essere recuperato e renderizzato lato client utilizzando la tua configurazione del renderer.

Riepilogo

• Gli schemi definiscono la struttura dei blocchi
• I blocchi definiscono le sezioni di una pagina
• Le pagine sono composte da più blocchi
• Completamente personalizzabile e riutilizzabile