# CHAPITRE 18 — Annoter un template avec des slots Le slot est l'unité de base du module. Ce chapitre vous montre comment transformer un HTML statique en HTML annoté, prêt à être édité par le client. Il s'agit de l'opération la plus fréquente dans votre travail d'intégrateur. ### Le principe en deux phrases 1. Vous écrivez votre HTML normalement, comme vous le feriez sans le module. 2. Aux endroits que vous voulez rendre éditables, vous remplacez le contenu en dur par un token `{{slot:...}}`. C'est tout. Le module se charge du reste : détection automatique, persistance, rendu, interface d'édition. ### Premier exemple complet ##### **Avant — page non éditable** ```

Bienvenue chez Keatic

Votre partenaire numérique de confiance depuis 2010.

Nous contacter
``` ##### **Après — page éditable via le Studio** ```

{{slot:hero_title|type=text|default=Bienvenue chez Keatic|label=Titre du hero|group=hero}}

{{slot:hero_lead|type=textarea|default=Votre partenaire numérique de confiance depuis 2010.|label=Accroche|group=hero}}

{{slot:hero_cta_label|type=text|default=Nous contacter|label=Libellé du bouton|group=hero}}
```

**Résultat —** Le client voit dans le Studio un panneau « Hero » comportant quatre champs (titre, accroche, URL du bouton, libellé du bouton). Aucun HTML à modifier de son côté.

### Anatomie d'un token de slot ``` {{slot:|type=|attribut1=valeur1|attribut2=valeur2}} ```
Élément Obligatoire Description
`{{slot:` Oui Préfixe fixe qui déclare un slot.
Identifiant Oui Unique par page. Caractères acceptés : minuscules, chiffres, tiret bas. 64 caractères maximum.
`type=` Oui text, textarea, richtext, image, url, number, select, bool, icon, color.
`default=` Recommandé Valeur de repli si le slot n'est pas encore édité.
`label=` Recommandé Libellé affiché à l'éditeur dans le Studio.
`group=` Facultatif Regroupe les slots dans une section de l'interface.
`help=` Facultatif Aide affichée sous le champ.
`maxlength=` Facultatif Limite de caractères pour text et textarea.
`options=` Si type=select Liste CSV des valeurs possibles.
**Conseil —** La grammaire complète est détaillée au Chapitre 19. ### Où placer un slot Un slot peut être placé à de nombreux endroits dans votre HTML. ##### **Dans le contenu d'une balise (cas le plus fréquent)** ```

{{slot:title|type=text|default=Bienvenue}}

``` ##### **Dans un attribut HTML** ``` ... ...
``` ##### **Dans une chaîne de classes CSS** ``` ```

**À ne pas faire —** Ne placez pas un slot dans un commentaire HTML, dans un bloc `