Ajouter des pages classiques et un menu au CMS Wagtail

Après avoir mis en place la page d’accueil de notre site basé sur le CMS Wagtail, nous allons voir dans cet article comment ajouter des pages classiques à notre site et ajouter un menu pour pouvoir accéder à ces pages.

Dans mon précédent article sur Débuter avec le CMS Wagtail, nous avons créé un modèle de page pour la page d’accueil de notre site. Nous pourrions utiliser ce même modèle pour créer les autres pages de notre site, mais comme nous le verrons plus tard lors de l’ajout d’un blog à notre site, ce modèle sera complété pour afficher les derniers articles de blog sur la page d’accueil. Il nous faut donc créer un nouveau modèle pour les pages classiques.

Avant cela, nous allons ajouter le simple code suivant dans notre modèle HomePage, à la suite du content_panels, de manière à ne pouvoir créer qu’une seule page d’accueil à notre site.

mon_site/app/home/models.py

max_count = 1

Le code de notre modèle est désormais le suivant :

mon_site/app/home/models.py

from django.db import models

from wagtail.core.models import Page
from wagtail.core.fields import StreamField
from wagtail.core import blocks
from wagtail.admin.edit_handlers import FieldPanel, StreamFieldPanel
from wagtail.images.blocks import ImageChooserBlock

from .blocks import TwoColumnBlock, ThreeColumnBlock


class HomePage(Page):
    body = StreamField([
        ('paragraph', blocks.RichTextBlock(
            label='Paragraphe', features=['h1', 'h2', 'h3', 'bold', 'italic', 'link', 'hr']
        )),
        ('image', ImageChooserBlock()),
        ('two_columns', TwoColumnBlock()),
        ('three_columns', ThreeColumnBlock()),
    ], verbose_name='Contenu', null=True)

    content_panels = Page.content_panels + [
        StreamFieldPanel('body', classname="full"),
    ]

    max_count = 1

    class Meta:
        verbose_name = "page d'accueil"

Créer le modèle de page classique

Le code de notre modèle de page classique est quasi identique à celui de notre page d’accueil. Pour l’instant la seule différence est que nous ne limitons pas le nombre de pages qui peuvent être créées avec ce modèle.

Voici le code à ajouter dans le fichier models.py de notre app Home :

mon_site/app/home/models.py

class ClassicPage(Page):
    body = StreamField([
        ('paragraph', blocks.RichTextBlock(
            label='Paragraphe', features=['h1', 'h2', 'h3', 'bold', 'italic', 'link', 'hr']
        )),
        ('image', ImageChooserBlock()),
        ('two_columns', TwoColumnBlock()),
        ('three_columns', ThreeColumnBlock()),
    ], verbose_name='Contenu')

    content_panels = Page.content_panels + [
        StreamFieldPanel('body', classname="full"),
    ]

    class Meta:
        verbose_name = "Page classique"

Ensuite nous devons créer la migration de la base de données et l’appliquer pour pouvoir utiliser ces nouvelles pages dans l’interface d’administration de Wagtail.

python manage.py makemigrations home
python manage.py migrate home

Ajouter une page classique à notre site

Un site Wagtail ne peut avoir qu’une seule page d’accueil par site (la seule exception étant avec un multi-sites), et toutes les autres pages ou sous-pages seront rattachées à cette page d’accueil.

Une fois la migration de la base de données effectuée, nous pouvons créer nos nouvelles pages. Pour cela nous allons dans l’interface d’administration de notre site Wagtail (http://localhost:8000/admin) et dans le menu de gauche nous cliquons sur Pages puis Accueil (ou le nom que vous avez donné à votre page d’accueil).

Wagtail nous indique qu’aucune page n’a encore été créée et nous propose d’en créer une.

Étant donné qu’à l’exception de notre modèle de page d’accueil, que nous avons limité à une seule page, le seul modèle de page que nous avons est celui des pages classiques, lorsque nous cliquons sur le lien pour créer une page ou, dans l’entête, sur le bouton Ajouter une sous-page, Wagtail nous affiche directement le formulaire de création d’une page classique.

Nous verrons plus tard que si nous avons plusieurs modèles de pages, nous devrons sélectionner le type de page que nous voulons utiliser avant d’arriver sur le formulaire d’édition de la page.

Créer le template pour les pages classiques

Maintenant que nous pouvons créer de nouvelles pages, il faut aussi que nous puissions les afficher sur notre site. Pour cela nous devons créer le template correspondant.

Par défaut, Wagtail recherche un template basé sur le nom du model gérant le type de page. Notre model s’appelant ClassicPage, Wagtail recherche donc un template intitulé classic_page.html dans le répertoire templates de notre app home. Nous le créons et nous y ajoutons le code suivant :

mon_site/app/home/templates/classic_page.html

{% extends "base.html" %}
{% load static wagtailcore_tags %}

{% block body_class %}template-classicpage{% endblock %}

{% block content %}
    <h1>{{ page.title }}</h1>
    {% for block in page.body %}
        {% include_block block %}
    {% endfor %}
{% endblock content %}

Ajouter un menu à notre site

Pour pouvoir ajouter un menu à notre site, nous devons installer le package wagtailmenus avec la commande suivante :

pip install wagtailmenus

Puis nous ajoutons wagtailmenus et wagtail.contrib.modeladmin aux INSTALLED_APPS des settings de notre projet :

mon_site/app/mon_site/settings/base.py

INSTALLED_APPS = [
    . . .
    "wagtail.contrib.modeladmin",  # Ne pas répéter s'il est déjà ajouté
    "wagtailmenus",
]

Toujours dans le même fichier, nous ajoutons wagtailmenus.context_processors.wagtailmenus à la liste de context_processors de notre constante TEMPLATES :

mon_site/app/mon_site/settings/base.py

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            os.path.join(PROJECT_DIR, "templates"),
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
                'wagtailmenus.context_processors.wagtailmenus',
            ],
        },
    },
]

Une fois ceci fait, nous mettons à jour notre base de données avec la commande habituelle suivante :

python manage.py migrate wagtailmenus

Ajouter des pages à notre menu principal

Une fois la base de données mise à jour, nous pouvons aller dans l’admin de notre site Wagtail, et dans la rubrique Paramètres (Settings en anglais), nous cliquons sur la nouvelle rubrique Menu principal (Main menu en anglais) pour accéder, vous l’aurez compris, à la gestion de notre menu principal.

En cliquant sur le bouton Ajouter un(e) élément de menu, nous ouvrons une nouvelle rubrique qui nous permet de sélectionner la page à ajouter à notre menu.

Nous pouvons ajouter une page interne à notre site en cliquant sur le bouton Choisissez une page, il nous suffit ensuite de cliquer sur le titre de la page désirée pour l’ajouter au menu. Pour sélectionner une sous-page (par défaut seule notre page d’accueil est disponible), il faut cliquer sur la flèche à droite de la page d’accueil, puis sur le titre de la page désirée.

Nous pouvons aussi ajouter un lien externe en indiquant l’URL du lien dans le champs Lien personnalisé, ou compléter l’URL de notre page en ajoutant une ancre ou des paramètres de requête à l’URL de la page en les indiquant dans le champs Ajouter à l’URL.

Le champs Texte du lien permet de choisir un texte différent que le titre de notre page pour l’affichage dans le menu. Ceci peut être très utile si vous avez un long titre mais que vous ne voulez pas surcharger votre menu, par exemple, si votre page à le titre « À propos de mon super site », vous voudrez certainement n’afficher dans le menu que « À propos ».

Une fois toutes nos pages ajoutées à notre menu, n’oubliez pas de cliquer sur le bouton Enregistrer en bas de la page.

Intégration du menu dans notre template

Notre menu étant créé, il nous faut maintenant l’afficher sur notre site. Pour cela nous retournons dans notre template base.html situé dans le répertoire templates de notre app mon_site et nous ajoutons le template tag menu_tags tout en haut du fichier :

mon_site/app/mon_site/templates/base.html

{% load static wagtailuserbar menu_tags %}

Puis, dans notre navbar juste après la balise </button>, nous insérons ce code :

mon_site/app/mon_site/templates/base.html

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
    {% main_menu template="menus/main_menu.html" %}
    </ul>
</div>

Nous créons un nouveau répertoire nommé menus dans notre répertoire templates et nous y ajoutons un nouveau fichier intitulé main_menu.html qui contient le code suivant :

mon_site/app/mon_site/templates/menus/main_menu.html

{% load menu_tags %}

{% for item in menu_items %}
    <li class="nav-item {{ item.active_class }}">
        <a class="nav-link" href="{{ item.href }}">{{ item.text }}</a>
    </li>
{% endfor %}

Si maintenant nous rechargeons la page d’accueil de notre site, nous constatons… que les pages sélectionnées ne s’affichent pas dans le menu !

Pourquoi me direz-vous ? Parce que Wagtail nous demande pour chaque page d’indiquer que nous voulons les intégrer dans un menu. L’étape que nous avons vu précédemment nous permettait uniquement d’indiquer dans quel menu nous voulions les ajouter, et de spécifier leur positionnement, mais nous avons encore une étape avant d’en finir avec notre menu.

Depuis l’interface d’admin de notre site Wagtail, allons modifier notre page d’accueil. Une fois sur la page d’édition, sélectionnez l’onglet Promotion puis activez la case à cocher Faire apparaître dans les menus. Publiez à nouveau la page, rechargez votre page d’accueil et notre menu apparaît avec les pages ajoutées et modifiées.

Nous arrivons au terme de cet article. Vous pouvez retrouver tout le code (y compris les éventuelles corrections) sur le repo Github dédié https://github.com/egrisel/site-wagtail/tree/02-pages.

Si vous désirez utiliser d’autres menus sur votre site, je vous recommande de consulter la documentation de Wagtailmenus (en anglais).

N’hésitez pas à laisser vos commentaires ci-dessous, je me ferai un plaisir de les lire et d’y répondre.