Les préréglages de mise en page sont des éléments de base que le Layout Manager utilise comme point de départ pour vous permettre de personnaliser la mise en page de votre site. Chaque preset vous donne une nouvelle série de sections, chacune liée à un style, affirmant l'aspect et la convivialité du site. Vous pouvez ensuite placer des particules et positions dans ces sections, ajouter des lignes, et organiser la page de la façon dont vous voulez qu'elle ressorte.
Si vous ne trouvez pas un preset qui réponde à vos besoins, vous pouvez en créer un nouveau.
C’est très facile pour un développeur qualifié de créer un Preset de mise en page. Il s’agit soit de prendre un Preset de mise en page existante et de lui ajouter ou supprimer des sections, soit de construire une toute nouvelle disposition prédéfinie à partir de zéro, si vous y êtes disposé.
Contrairement à l'ajout de lignes dans une section, la création d'une nouvelle section (soit de manière autonome ou comme une barre latérale) vous donne la possibilité de créer du style CSS personnalisé qui affecte la nouvelle zone de la page.
Il est important de noter qu’il s’agit d’une action pointue, et les thèmes Gantry 5 ne comprennent généralement la pas prise en charge intégrée de style pour les nouvelles sections. Vous devrez ajouter vous-même le style, soit en le reliant à une section existante soit en le créant de toutes pièces dans votre fichier custom.scss
situé dans THEME_DIR/custom/scss
.
Images des Presets
Il y a une section des fichiers YAML pour les préréglages de mise en page qui s’occupe de l'image du preset. C’est est une part importante du fichier parce qu'il crée l'image d'aperçu que vous voyez lorsque vous naviguez sur l'interface d'administration Outlines. Il peut servir de référence rapide pour l’outline, vous donnant un coup d'oeil rapide sur ce à quoi le template ressemble sans avoir à visiter le gestionnaire de mise en page.
Gantry comprend un jeu de ces images parmi lesquelles vous pouvez choisir. Ils sont situés dans le répertoire SITE_ROOT/administrator/components/com_gantry5/images/layouts/
et peut être facilement référencé avec un lien de flux. Par exemple, si vous voulez faire un lien vers le fichier 2-col-left.png
dans ce dossier, vous pouvez utiliser URL: gantry-admin://images/layouts/2-col-left.png
comme l’image du preset.
Vous pouvez également ajouter des images personnalisées. Par exemple, disons que nous avons example.png
et que nous voulons l’utiliser comme l’image du preset. Nous le placerons dans /templates/TEMPLATE_DIR/custom/images/admin/layouts
et le référencerons dans le fichier YAML comme gantry-media://admin/layouts/example.png
.
Création d'un nouveau Preset de mise en page
La création d'une nouvelle mise en page préréglée est assez simple. La première chose que vous devez faire est de créer un nouveau fichier YAML dans THEME_DIR/custom/layouts
. Pour notre exemple, nous allons nommer ce fichier example1.yaml
.
Voici l'exemple de code qui sera dans notre nouveau fichier YAML:
version: 2 preset: image: gantry-admin://images/layouts/default.png layout: /header/: - - menu /main/: - - position-breadcrumbs - - system-messages - - system-content /mainbottom/: - - position-mainbottom /footer/: - - position-footer - - copyright 40 - spacer 30 - branding 30 offcanvas: - - mobile-menu
Ceci est une mise en page prédéfinie de base, comportant trois sections comprises dans le style d'origine du thème (header
, main
, et footer
) avec une section supplémentaire ajoutée (mainbottom
) qui n’est pas inclus dans le thème original. Nous ne recommandons pas l'ajout de nouvelles sections si vous ne devez pas le faire, mais cela peut être fait en l'ajoutant dans une mise en page Preset personnalisée.
Une fois que vous avez ajouté une nouvelle section, elle s'affichera sans style en dehors des valeurs par défaut du modèle. Pour ajouter votre propre style, vous pouvez le faire via le fichier custom.scss
situé dans THEME_DIR/custom/scss
. Par exemple, si vous vouliez que la balise H1 soit rendue rouge, vous devez ajouter la ligne #g-mainbottom h1 {color: red;}
.
Les sections Gantry apparaissent dans SCSS sous la balise g- (nom de la section). La section main
serait g-main
, par exemple. Ceci est fait pour séparer les noms de votre section d’autres affectations de style tierces potentiellement conflictuelles.
Comment créer une Section de barre latérale (Sidebar)
Dans cette section, nous allons expliquer comment créer une nouvelle disposition prédéfinie avec double barre latérale. Chaque section de barre latérale représente un block à l’intérieur du conteneur grid qui composent les sections Main, Sidebar 1, et Sidebar 2. Vous pouvez trouver plus d’informations sur le fonctionnement des sidebars dans le Guide du gestionnaire de mise en page.
La première chose que vous aurez à faire est de créer un nouveau fichier YAML dans THEME_DIR/custom/layouts
. Pour notre exemple, nous allons nommer ce fichier example2.yaml
.
Voici l'exemple de code qui sera dans notre nouveau fichier YAML:
version: 2 preset: image: gantry-media://images/admin/layouts/3-col-right.png layout: /header/: - - menu /container-main/: - - main 60: - position-breadcrumbs - system-messages - system-content - sidebar1 20: - social - position-sidebar - position-right - sidebar2 20: - social - position-sidebar - position-right /footer/: - - position-footer - - copyright 40 - spacer 30 - branding 30 offcanvas: - - mobile-menu structure: sidebar1: subtype: aside block: fixed: 1 sidebar2: subtype: aside block: fixed: 1
Il s’agit d’une présélection de mise en page très simple, donnant à l’utilisateur les sections Header, Main, et Footer en plus de deux sections indépendantes Sidebar. Chaque section obtient son propre style de base qui fournit la base sur laquelle Particles et Positions ajoutées seront placées.
Chaque ligne horizontale doit être égale à 100% de la largeur. Dans l'exemple ci-dessus, vous remarquerez que main
a une largeur de 60 %, suivie de deux barres latérales chacune d’une largeur de 20%. Il est également très important de se rappeler que les fichiers YAML ne prennent en charge que des espaces divisibles par 2, et non pas les onglets.
Étendre une barre latérale à travers plusieurs Sections
Dans cette partie, nous allons montrer deux fichiers YAML créant une ou deux sections de barre latérale qui s’étendront sur plusieurs sections du site. Ceci est utile dans les cas où vous voulez que des sections supplémentaires, tels que votre en-tête et pied de page, partagent l’espace horizontal avec la barre latérale.
version: 2 preset: image: gantry-admin://images/layouts/2-col-right.png layout: /container-main/: - - header: - - position-header navigation: - - menu messages: - - system-messages main: - - system-content footer: - - copyright 40 - spacer 30 - branding 30 - aside: - - position-aside offcanvas: - - mobile-menu structure: aside: block: fixed: 1
Comme vous pouvez le voir dans l'exemple ci-dessus, Nous avons plusieurs sections imbriquées comprenant header, navigation, messages, et footer dans le même espace horizontal que la section aside, qui agit comme une barre latérale.
Dans l’exemple ci-dessous, vous pouvez voir un fichier YAML d’un layout préréglé avec deux barres latérales à gauche et une section aside à droite de plusieurs sections.
version: 2 preset: image: gantry-admin://images/layouts/3-col.png layout: /container-main/: # main container - # grid (row 1) - # block (column 1) sidebar: # section - # grid - position-sidebar # block - # block (column 2) header: # section - # grid - position-header # block navigation: # section - # grid - menu # block main: # section - # grid - system-messages # block - # grid - system-content # block footer: # section - # grid - copyright # block - # block (column 3) aside: # section - # grid - position-aside # block offcanvas: # offcanvas - # grid - mobile-menu # block structure: aside: block: fixed: 1
Guide de syntaxe
Il y a cinq règles principales à prendre en considération lors de la création d’une mise en page prédéfinie.
-
Le contenu est ordonné par
grid - block - grid - block - grid - block
. Grid est une ligne et block est une colonne. Voir les exemples précédents. -
foo:
crée une section.wrapper-foo:
crée un wrapper.container-foo:
crée un conteneur. Le Nom doit être unique pour la mise en page. -
Ajout de slashes (example:
/foo/:
) vous permet de tirer parti des paramètres de mise en page de section pour une meilleure flexibilité de style. -
De multiples particules dans une rangée peuvent également être mises à l'intérieur de crochets
[ ]
. Exemple:- [logo, menu]
-
Vous n’avez pas besoin de crochets ou de tirets supplémentaires pour les lignes avec une seule particule. Exemple:
- menu
est le raccourci de- [menu]
Éléments communs de YAML
Élément |
Description |
---|---|
system-messages |
Insère une position System Messages qui affiche les messages du système en frontend. |
system-content |
Cette ligne affiche sur la page le contenu fourni par le CMS. C’est le corps de contenu. |
position- |
Suivi directement par un nom de position (exemple: position-header ) il crée une position et lui attribue le nom donné. |
version |
Ceci indique la version Gantry YAML utilisée. Version 2, par exemple, a été introduit dans Gantry 5.2. |
Ajout d'une section à une mise en page de Preset existant
Il y a deux façons d'aller ajouter une section à une présélection de mise en page existante. Le premier s’applique aux préréglages de mise en page qui sont déjà présents dans votre répertoire THEME_DIR/custom
.
Vous pouvez y modifier le préréglage personnalisé directement, ou dupliquer son fichier YAML et modifiez la copie si vous voulez garder le preset courant et en avoir un autre avec un changement mineur.
Donc, disons que vous avez un fichier nommé example1.yaml
dans votre répertoire THEME_DIR/custom
. Et ce fichier contient les éléments suivants:
version: 2 preset: image: gantry-media://images/admin/layouts/default.png layout: /header/: - - menu /main/: - - position-breadcrumbs - - system-messages - - system-content /footer/: - - position-footer - - copyright 40 - spacer 30 - branding 30 offcanvas: - - mobile-menu
Cette disposition prédéfinie établit les sections header, main, et footer.Mais, supposons que vous vouliez ajouter un nouveau morceau entre main et le footer nommé mainbottom
. Faire cela est incroyablement facile. Il suffit d’ajouter ce qui suit entre les sections main
et footer
dans le fichier:
/mainbottom/: - - position-mainbottom
Une fois que c’est fait et que le fichier est enregistré, actualisez votre gestionnaire de configuration et chargez le preset. Votre changement devrait apparaître.
Vous pouvez également ajouter une section à une mise en page existante en utilisant un procédé très similaire.
Il suffit de copier le fichier YAML à partir de son emplacement d'origine et de le placer dans votre répertoire /custom
. Par exemple, vous pouvez copier THEME_DIR/layouts/default.yaml
et placer la copie dans le répertoire THEME_DIR/xxx/default.yaml
et de faire vos changements sur copie.
Structure
Il y a une autre section dans le fichier YAML d'un préréglage de mise en page qui définit la structure de la mise en page. Il s’agit de la section structure. Cette section définit les propriétés structurelles de votre mise en page. Ce sont les morceaux qui ne peuvent pas définis dans la principale zone de mise en page où vous créez initialement vos sections et assignez des particules.
La structure d'un YAML laisse beaucoup de place pour que de nouvelles propriétés puissent être affectées à pratiquement tout élément dans la structure de la mise en page. Par exemple, vous pouvez modifier le comportement d'une section en utilisant les propriétés structurelles, telles que la modification du type d'une section pour div plutôt que de garder son comportement par défaut: section.
Il existe cinq types de propriétés différentes. id, title, type, subtype, et attributes. Un Id assigné d’une section détermine ses balises. Par exemple, un id
de foo
apparaîtra comme <section
id="foo">
dans la partie frontale. Le id est une fonction utilisée en interne qui ne devrait pas être modifié manuellement.
La propriété title vous permet de définir un titre pour la section, tel qu’il apparaît sur la partie backend. Par exemple, vous pouvez configurer la section comme suit :
structure: mainbottom: title: Main
Et cela apparaîtra comme Main dans le back-end comme illustré ci-dessous:
attributes sont les modifications apportées dans les paramètres de la section dans l'administrateur Gantry. Par exemple, si vous définissez les paramètres de section dans l'admin Gantry comme suit:
Cela apparaîtra dans le fichier YAML personnalisé comme suit:
navigation: attributes: boxed: '0' class: foo extra: - data-foo: foo
Voici une liste des propriétés structurelles que vous pouvez utiliser pour définir le type et le sous-type d'une section:
Type |
Description |
---|---|
block | Ceci est le conteneur de la particule. Dans admin, il est visible en tant qu’onglet Block dans les paramètres de chaque particule. |
container | Un conteneur est utilisé pour loger plusieurs sections, comme le mainbody et la barre latérale / côté. |
grid | Une grille est essentiellement la rangée. Chaque ligne peut contenir plusieurs blocs. Cela définit les propriétés d'une ligne spécifique. |
offcanvas | Offcanvas décrit la zone qui abrite le menu mobile. |
section | Une section contient des lignes (grids), qui contiennent des blocs de particules. Ce sont les grands blocs blancs qui apparaissent dans l'admin. Souvent avec des noms comme Header, Footer, Mainbody, et Sidebar. |
wrapper | Un wrapper n’est pas visible dans l’admin. Ce n'est pas oblgatoire dans la mise en page, mais cela peut être utilisé éventuellement pour aider à la stylisation. Par exemple, si vous avez plusieurs sections où vous souhaitez un même arrière-plan tout du long, vous pouvez le faire en utilisant un wrapper. |
Sous-types
-
article
-
aside
-
div
-
footer
-
header
-
main
-
nav
-
section
Les Sous-types (subtypes) sont essentiellement des balises HTML qui définissent le contenu de votre page. Ce sont des regroupements thématiques qui disent aux navigateurs et aux moteurs de recherche web ce que des morceaux de contenu sont. Par exemple, un article sera défini dans les balises <article></article>
.
Les sous-types sont utilisés uniquement pour la section. Si vous avez une section définie comme section
, alors les autres sous-types ne sont pas utilisés.
Voici un petit exemple d’une section utilisant ces propriétés structurales pour personnaliser davantage la section.
structure: header: title: Main Header navigation: subtype: nav title: Main Navigation
Dans l’exemple ci-dessus, nous voyons deux sections: header
et navigation
. Le header
a reçu le titre alternatif Main Header
. Il apparaîtra dans le code HTML comme <header>
. Nous n'avons pas besoin d'attribuer le subtype
header parce que le nom de la section est déjà header
. Il le fait automatiquement pour nous.
On a donné le sous-type nav
à la section navigation
. Nous avons aussi changé son titre, comme nous l'avons fait dans la section header
, ainsi cela apparaîtra comme Main Navigation dans l'admin Gantry. Les balises frontal HTML apparaissent sous la forme <nav id="g-navigation">
qui utilise le sous-type défini et l’id par défaut.
Contenu
La zone content
du fichier YAML est principalement le lieu de stockage de tous les attributs de particules. A titre d'exemple, nous avons créé une particule date et ajusté ses paramètres Particle et Block:
Voici comment cela est représenté dans la section du contenu du fichier YAML:
content: date-1446: title: 'My Date' attributes: css: class: foo date: formats: 'l, d F' block: variations: box2
Notez que vous pouvez mettre tous les paramètres de bloc à l’intérieur de l’attribut block
.
Blocs et grilles nommés
Parfois, il est nécessaire d'ajouter une grille nommée ou un bloc pour lui attacher un identifiant ou une classe.
version: 2 preset: image: gantry-media://images/admin/layouts/default.png layout: /header/: grid-menu: - menu 1: - logo 2: - position-menu structure: grid-menu: attributes: id: my-menu-id class: menu-grid
Notez que vous ne pouvez pas mélanger des tirets et clés nommées, alors, si vous ne souhaitez pas citer toutes les grilles, utilisez des nombres entiers uniques (ou croissants) comme les autres clés à la place.
Vous pouvez également faire la même chose avec des blocs, mais c'est rarement nécessaire comme vous pouvez insérer les attributs de bloc dans une section et une particule.
Héritage
A partir de Gantry 5.3 il y a un nouvel attribut inherit
pour les sections et les particules.
L'héritage des sections est un peu plus simple, ayant juste des attributs outline
et include
:
structure: navigation: type: section inherit: outline: default include: - attributes - block - children
l'héritage des particules a des paramètres supplémentaires pour spécifier les particules à hériter:
content: logo-5216: inherit: outline: default include: - attributes - block particle: logo-4270
Versions YAML
Comme Gantry 5 a évolué, nous avons voulu rendre sa mise en page YAML fichiers plus facile à lire et à utiliser. En simplifiant la syntaxe, en supprimant les balises de particules, et en simplifiant la façon dont les sections sont gérées, nous avons pu créer une meilleure expérience utilisateur. Ces changements ont été mis en œuvre dans Gantry 5.2 et versions ultérieures.
Parce que cette mise à jour casserait les fichiers YAML créés avec le style YAML original, nous avons opté pour ajouter une désignation version
qui permet à Gantry de savoir quel style YAML est utilisé dans un fichier donné.
En bref, tout fichier preset YAML créé après Gantry 5.2 en utilisant le nouveau style de YAML (en cours) devrait avoir version: 2
en première ligne. Sinon, Gantry utilisera par défaut la syntaxe YAML originale.