Types of Components

Vous définissez des composants. Les composants constituent la couche de données qui se connecte à l'interface utilisateur.

Composants personnalisés correspondent à des articles de blog, des auteurs, des adresses, des données brutes personnalisées, etc.

Composants d'interface utilisateur sont simplement des composants personnalisés marqués comme éléments d'interface utilisateur, pied de page, en-tête, héros, etc.

Composants système sont prédéfinis par le CMS, comme Pays et Langue.

Que sont les composants d'interface utilisateur ?

Les pages sont composées de plusieurs composants d'interface utilisateur

Exemples :

• hero-block
• feature-block
• image-carousel
• en-tête/pied de page

Chaque composant d'interface utilisateur représente une section de votre page.

Flux de travail des composants d'interface utilisateur

1. Définir un composant (structure du bloc) dans le générateur de composants
2. Créer le composant d'interface utilisateur
3. Attribuer le composant d'interface utilisateur à une page
4. Le rendre côté client avec le bloc approprié dans le registre des blocs et la configuration du moteur de rendu

Exemple : schéma de bloc Hero

Un bloc hero peut contenir :

• Image
• Titre
• Sous-titre

Schéma JSON dans l'éditeur

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

Configuration du panneau d'administration

• Créer un nouveau bloc
• Associer le schéma (HeroSchema)
• Nommer le bloc (par exemple, hero-block)

Affecter le bloc à une page

• Aller sur une route dans le panneau d'administration
• Cliquer sur Assign Page
• Ajouter le bloc nouvellement créé

Rendu côté client

Une fois attribué, le bloc peut être récupéré et rendu côté client en utilisant votre configuration de moteur de rendu.

Résumé

• Les schémas définissent la structure des blocs
• Les blocs définissent les sections d'une page
• Les pages sont composées de plusieurs blocs
• Entièrement personnalisable et réutilisable