Types de composants

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

**Composants personnalisés **sont des articles de blog, des auteurs, des adresses, des données brutes personnalisées, etc. **Composants d'interface utilisateur **ne sont que des composants personnalisés marqués comme éléments d'interface utilisateur, pied de page, en-tête, hero, etc. **Composants système **prédéfinis par le CMS comme le pays et la 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
• header/footer

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

Flux de travail des composants d'interface utilisateur

1. Définissez un composant (structure du bloc) dans le constructeur de composants
2. Créez le composant d'interface utilisateur
3. Assignez le composant d'interface utilisateur à une page
4. Rendez-le côté client avec le bloc approprié dans le registre de 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éez un nouveau bloc
• Associez le schéma (HeroSchema)
• Nommez le bloc (par exemple, hero-block)

Assigner le bloc à une page

• Accédez à une route dans le panneau d'administration
• Cliquez sur Assigner la page
• Ajoutez le bloc nouvellement créé

Rendu côté client

Une fois assigné, le bloc peut être récupéré et rendu côté client à l'aide de 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 personnalisables et réutilisables