Introduction
Configurer les layouts de Sonata Page est une étape cruciale pour créer un site web bien structuré et visuellement attrayant. Ce guide vous aidera à comprendre le processus de configuration de la mise en page dans Sonata Page.
Prérequis
Avant de continuer, assurez-vous d'avoir lu la documentation principale de SonataPage : Lire la documentation de SonataPage
Étapes de configuration
Étape 1 : définir la configuration de votre mise en page
Commencez par définir votre mise en page dans un fichier de configuration YAML. Voici un exemple :
partitech_index:
path: 'demo_index.html.twig'
name: 'Partitech Index'
containers:
logo:
name: Logo
header:
name: Header
recherche:
name: Recherche
content:
name: Contenu
footer:
name: Footer
matrix:
layout: |
LLHHHHHHHHHHHHHHHHRR
CCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCC
CCCCCCCCCCCCCCCCCCCC
FFFFFFFFFFFFFFFFFFFF
mapping:
L: logo
H: header
R: recherche
C: content
F: footer
Étape 2 : configurer le template principal
Définissez le chemin vers votre modèle principal. Ce modèle sera utilisé pour rendre toute la page :
- Chemin :
layout_partitech_index.html.twig
Étape 3 : configurer les conteneurs
Définissez les conteneurs dans la configuration. Les conteneurs sont des segments dans votre mise en page tels que le logo, l’en-tête, le contenu, etc.
- Conteneurs : Définissez les conteneurs et attribuez-leur des noms pour les identifier facilement.
Étape 4 : rendre les conteneurs dans le template
Placez ces conteneurs dans votre template principal en utilisant la syntaxe suivante :
{{ sonata_block_render_event('breadcrumb', { 'context': 'logo', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'header', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'recherche', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'content', 'current_uri': app.request.requestUri }) }}
{{ sonata_block_render_event('breadcrumb', { 'context': 'footer', 'current_uri': app.request.requestUri }) }}
Étape 5 : configurer la matrice et le mapping
Configurez la matrice pour représenter la disposition du contenu et mappez les codes de disposition (L, H, R, C, F) aux conteneurs respectifs.
- Matrice : Il s'agit de la représentation visuelle de la disposition de votre modèle, ce qui aide à sélectionner les conteneurs dans l'interface d'administration Sonata.
- Mapping : Aide à relier les codes de disposition de la matrice aux conteneurs définis.
Conclusion
En suivant ces étapes, vous aurez une configuration de mise en page bien structurée pour votre SonataPage. Cette configuration rendra non seulement vos pages visuellement cohérentes, mais rationalisera également votre flux de travail dans la gestion du contenu et de la mise en page des pages.
Conseil de maintenance
Nommez les conteneurs selon leur rôle éditorial plutôt que leur position visuelle. Une matrice stable (header, main, aside, footer) résiste mieux aux évolutions graphiques et facilite la réutilisation des blocs entre pages.