Statamic : blueprints et fieldsets (cas concret page « Ressources »)
Collections, navigations, assets… tout ce contenu a besoin de champs définis clairement : titre, prix, bouton, image, etc. C’est le rôle des blueprints — et, pour ne pas tout recréer à chaque page, des fieldsets réutilisables.
Dans ce volet, on construit ensemble un blueprint réaliste pour une page type « Ressources LinkedIn » sur un site de formation : section héros, introduction riche, onglet « liste d’articles » — le tout illustré en vidéo.
Statamic : blueprints et fieldsets en pratique
Dans la vidéo précédente, on a parcouru le tableau de bord : collections, navigations, taxonomies, assets, globales. Chaque type de contenu doit maintenant préciser quels champs il possède — c’est exactement le travail des blueprints.
Ici, on le fait sur un cas concret : une page « Ressources » sur un site de formation (posts LinkedIn listés plus tard côté code ; l’objectif de cette étape est surtout le modèle de contenu dans Statamic). Références : Blueprints et Fieldsets.
Le projet : une page « Ressources »
L’idée : une page avec
- une section héros (titre, description courte, bouton optionnel, image) ;
- une introduction plus riche (texte formaté) ;
- une section liste d’articles (titre de bloc) — sans aller jusqu’à l’intégration API LinkedIn (sujet Laravel pour une autre vidéo).
On attache le blueprint à la collection pages, avec un handle du type ressources.
Créer le blueprint dans le Control Panel
- Blueprints → créer un blueprint lié à la collection Pages.
- Le nommer (ex.
ressources). - Statamic propose par défaut un champ title (souvent réutilisé pour le slug automatique).
Section héros
- Renommer / organiser la zone en « Section héros » (groupe de champs ou section).
- Titre du héros (texte).
- Description courte : un champ Markdown suffit si vous n’avez pas besoin de mise en forme avancée dans le CP.
- Instructions : utiles pour les clients (« texte affiché dans le héros », etc.).
- Validation et conditions : possibles sur chaque champ (règles Laravel) — on les simplifie ici pour rester lisible.
Image
- Champ Assets : une image, éventuellement obligatoire, choix du conteneur (voir la doc Assets).
Fieldset « bouton » : ne pas dupliquer les champs
Sur un site, le même motif revient souvent : afficher ou non un bouton, libellé, URL (externe ou entrée interne). Plutôt que de recréer ces trois champs sur chaque blueprint, on crée un fieldset (groupe de champs réutilisable).
Exemple de fieldset btn :
| Champ | Type | Rôle |
|---|---|---|
| Afficher le bouton | Toggle | Active / désactive le bloc |
| Label du bouton | Text | Texte du bouton |
| URL du bouton | Link | URL libre ou entrée d’une collection (ex. cours) |
Sur le type Link, Statamic permet de restreindre les cibles : URL en dur, pages, entrées d’une collection donnée, etc.
Conditions d’affichage
Configurez des conditions : le label et l’URL ne s’affichent dans le CP que lorsque « Afficher le bouton » est à true. Sans condition, les champs restent visibles mais vides — moins clair pour l’éditeur.
Enregistrez le fieldset, rechargez le blueprint (F5 dans le CP si besoin), puis importez le fieldset existant (« link existing ») dans la section héros.
Préfixe de handles : éviter les conflits
Chaque champ a un handle unique dans l’entrée (comme une colonne en base : pas deux colonnes du même nom sur la même « table »).
Si vous importez deux fois le même fieldset sur une page (deux boutons), les handles se marchent dessus. Statamic propose un préfixe à l’import : par ex. hero_ → hero_afficher_bouton, hero_label_bouton, hero_url_bouton.
Même logique pour deux champs « description » : un dans le héros, un dans l’intro → préfixer (hero_description, intro_description) ou renommer les handles. Le CP signale l’erreur si un handle est en double.
Section introduction : Markdown ou Bard
Deuxième bloc : texte plus long pour l’introduction.
- Markdown : simple, peu visuel pour des rédacteurs non techniques.
- Bard : éditeur WYSIWYG (titres, gras, listes…) — pratique pour du contenu riche. Voir Bard.
Nommez le handle de façon explicite (intro_description, etc.) pour rester cohérent avec le préfixe de section.
Onglet « Liste articles »
Pour les grosses pages, Statamic permet des onglets dans le formulaire d’édition : l’éditeur passe d’une section à l’autre au lieu de tout faire défiler.
Créez un onglet (ex. « Liste articles ») avec au minimum un champ titre pour intituler le bloc qui listera les posts (le listing viendra dans le template Antlers / la logique Laravel).
Créer une entrée et vérifier le formulaire
Collections → Pages → Nouvelle entrée : choisissez le blueprint Ressources.
Vous devez voir les groupes configurés (héros, intro, onglet liste), le fieldset bouton avec toggle + champs conditionnels, et l’asset image. Testez : activer le bouton → les champs label / URL apparaissent.
Exemple de contenu : titre « Mes ressources LinkedIn », bouton « Suivez-moi sur LinkedIn » avec URL externe ou lien vers une entrée cours si le champ Link le permet.
L’affichage public de la page n’est pas couvert ici : il faudra une vue Antlers (ou équivalent) qui lit ces variables — sujet de la vidéo suivante de la série.
Côté fichiers : où tout est stocké
Le blueprint génère un YAML, typiquement sous :
resources/blueprints/collections/pages/ressources.yaml
Vous y retrouvez la définition de tous les champs, imports de fieldsets et préfixes. Les fieldsets vivent dans resources/fieldsets/ (ex. btn.yaml).
Vous pouvez éditer ces YAML à la main ou via le CP ; les deux restent synchronisés. Certains équipes passent aussi par l’IA pour générer des blueprints à partir d’un brief — le format reste le même.
À retenir : blueprint = structure du type de contenu ; field = colonne ; handles uniques ; fieldsets = blocs répétés (bouton, SEO, encart, etc.).
Vidéo : blueprint et fieldsets pas à pas
Conclusion
Vous savez maintenant modéliser une page dans Statamic : sections, types de champs, fieldset bouton avec conditions, préfixes de handles, onglets pour le CP, et fichiers YAML dans resources/blueprints/ et resources/fieldsets/.
Suite de la série : Statamic : Antlers ou Blade pour afficher le contenu.
