Une page modulaire est une collection de pages empilées les unes sur les autres pour créer une seule page unique. Cela vous permet de créer des structures complexes de page, comme une construction en briques de LEGO, a partir de petites pages simples.
Vous pouvez trouver en exemple le thème One-Page Skeleton. Dans un premier temps nous utiliserons cet exemple pour expliquer plus en détail comment les pages modulaires fonctionnent, puis comment en créer une sur le le thème antimatter.
Structure des répertoires thème One-Page Skeleton
La Page modulaire elle-même est assemblé à partir de pages qui existent dans les sous-répertoires trouvés dans le dossier principal de la page. Dans le cas de notre One-Page Skeleton, cette page est situé dans le répertoire 01.home. Dans ce répertoire, nous avons un fichier modular.md qui indique à Grav quelles sous-pages à utiliser pour assembler la page modulaire ainsi que l'ordre. La dénomination de ce fichier est importante parce que, à son tour, elle indique à Grav d'utiliser le fichier modular.html.twig du thème actuel pour rendre la page.
Ces sous-pages sont dans des dossiers dont les noms commencent par un underscore (_). En utilisant un underscore, Grav sait que ce sont des pages modulaires et non autonomes. Par exemple, les dossiers de sous-pages peuvent être nommés _features ou _showcase. Ces pages sont pas routable (ne peut être pointé directement dans un navigateur) et ne sont pas visibles (ne pas apparaître dans un menu).
Dans le cas de notre One-Page Skeleton, nous avons la structure de répertoires ci-dessous :
Chaque sous-dossier contient un fichier markdown (.md) qui agit comme une page unique.
Les données contenues dans ces répertoires (y compris les fichiers markdown, images, etc.) sont alors affichés sur la page modulaire. Voici un exemple d'une page modulaire, soulignant les différents répertoires qui sont utilisés.
Configuration de la page primaire
Comme vous pouvez le voir, chaque section tire le contenu d'un répertoire modulaire différent. Le fichier primaire markdown détermine donc quels dossiers modulaires sont utilisés, et l'ordre. Voici le contenu du fichier modular.md dans le répertoire 01.home.
---
title: One Page Demo Site
menu: Home
onpage_menu: true
body_classes: "modular header-image fullwidth"
content:
items: @self.modular
order:
by: default
dir: asc
custom:
- _showcase
- _highlights
- _callout
- _features
---Il n'y a donc aucun contenu dans ce fichier. Les informations nécessaires sont dans le "Header" du fichier markdown (YALM front matter) : Le titre de la page, le menu et d'autres paramètres que vous trouveriez dans une page classique se trouvent donc ici. Le contenu dit à Grav de créer un contenu global basé sur une collection de pages modulaires (peut gérer aussi un ordre manuel des pages).
Pages modulaires
On trouve un fichier markdown (ici text.md) pour chaque page modulaire. Chaque fichier peut avoir son propre template, ses paramètres, etc. Ce fichier possède la plupart des caractéristiques d'une page classique. L'équipe Grav recommande de gérer les paramètres généraux, comme la largeur de pages, dans le le fichier markdown principal qui contrôle toute la page.
Exemple du fichier text.md fichier page _callout (qui apparaît dans le milieu de la page modulaire).
---
title: Homepage Callout
image_align: right
---
## Content Unchained
No longer are you a _slave to your CMS_. Grav **empowers** you to create anything from a [simple one-page site](#), a [beautiful blog](#), a powerful and feature-rich [product site](#), or pretty much anything you can dream up!Comme vous pouvez le voir, l'en-tête de la page contient des informations de base que vous pourriez trouver sur une page régulière. Elle a son propre titre qui peut être référencé sur le frontend. En outre, les options de page personnalisées, telles que l'alignement de l'image peuvent être réglés ici, tout comme on le ferait sur une autre page.
Le fichier template de text.md se trouve dans le répertoire / templates / modular de votre thème et s'appelle text.html.twig.Ce fichier, comme tout fichier .twig pour toute autre page, définit les paramètres uniques ainsi que des différences de style entre elle et la page de base.
<div class="modular-row callout">
{% set image = page.media.images|first %}
{% if image %}
{{ image.cropResize(400,400).html('','align-'~page.header.image_align) }}
{% endif %}
{{ content }}
</div>
Généralement, les pages modulaires sont très simples. Vous avez juste à vous habituer à l'idée que chaque section de votre page provient d'une autre page, et affiche tout à la fois à l'utilisateur.
Création d'une page modulaire dans antimatter avec le plugin admin
Le thème One-Page Skeleton est un site complet avec seulement une page modulaire. Le menu principal vous permet de naviguer d'un bloc à l'autre de la page. Avec le thème de base Grav, antimatter, c'est différent, la navigation se fait classiquement par page qui sont au même niveau que la page d'accueil (root).
Le plugin admin est donc installé sur votre site (voir installation du plugin). Vous avez donc accès a l'administration de votre site pour gérer vos pages via l'adresse monsite/admin.
Si vous venez juste d'installer Grav, vous n'avez qu'une page sur votre site, la page d'accueil.
Donc j'ajoute une page 'Page modular" : Pages/Add page
Vous nommez votre page, Page Modular, choisissez le type de page, Modular, puis "Continue" et vous sauvegardez.
Vous avez donc créée une nouvelle page, le fichier markdown, modular.md, se trouve à la racine du nouveau répertoire 02.page-modular.
En éditant votre nouvelle page, onglet "Content", vous pouvez sélectionner l'ordre des pages qui seront associées a votre page principale (Titre, Ascendant)
Vous remarquez que sous l'onglet "advanced" , la classe de la page est Modular.
Si vous éditez modular.md, vous avez les codes suivants
---
title: 'Page Modular'
body_classes: modular
content:
order:
dir: desc
by: title
items: This email address is being protected from spambots. You need JavaScript enabled to view it. '
---
On va maintenant créer 3 pages qui seront associées à la page principale
Page 1
Nom: 1_showcase
Folder name : _1_showcase
Page (page modulaire de base): Page Modular
Modular template: Showcase
Puis "Continue". On rajoute du texte et on sauvegarde.
Page 2
Nom: 2_features
Folder name : _2_features
Page (page modulaire de base) : Page Modular
Modular template : Feature
Page 3
Nom: 3_text
Folder name : _3_text
Page (page modulaire de base) : Page Modular
Modular template : Text
On a donc toutes nos pages
Sur notre site test, au niveau menu cela semble OK. 2 liens de menu, la page d’accueil et notre page modulaire.
Mais quand on clique sur "Page Modular" petit soucis : la page d’accueil disparaît et on retrouve nos 3 pages modulaires.
Il y a un paramètre à rajouter à notre fichier modular.md : onpage_menu: false
Vous pouvez éditer votre fichier et rajouter la ligne de code ou utiliser le mode expert dans l'édition de votre page
Tout est en place, le résultat est :
C'est pas très beau, il faut jouer maintenant sur les feuilles de styles mais aussi sur le fichier user/themes/antimatter/templates/modular/showcase.html.twig
1) Ajouter les classes header-image et fullwidth sur la page principale
2) Charger une image de fond sur la page 1_showcase
3) Modification showcase.html.twig
Par défaut le fichier showcase.html.twig, ligne 1, apporte un effet sur votre image (coloration en bleu)
{% set showcase_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colorize(-35,81,122) %}
Il faut donc modifier ce fichier. Nous utiliserons la méthode - Tuto Grav - Customiser votre thème (template) avec Inheritance.
Une copie du fichier showcase.html.twig est donc placé dans le répertoire /user/themes/mytheme/templates/modular
mytheme
├── templates
│ └── modular
│ └── showcase.html.twig
└── mytheme.yamlModification de la ligne 1
{% set showcase_image = page.media.images|first.contrast(0).brightness(0) %}
Et le tour est joué
