Wagtail, tu aurais pu t'appeler Swagtail.

Introduction au CMS Wagtail.

En tant que développeur, vous êtes probablement amenés a utiliser des CMS. Parfois même, des CMS sortis de nulle part, ou bien d'autres un peu plus populaires.

J'ai personnellement travaillé essentiellement avec Wordpress au niveau des CMS en 2015, mais c'est aussi l'année où j'ai eu le plaisir de découvrir Wagtail.

Wagtail est un CMS basé sur le framework web Django, qui se trouve aussi être le framework avec lequel je travail la plupart du temps (Ce qui est plutôt pratique). 

Il faut tout de même noter que Wagtail n'est pas un CMS comme les autres, il vous sera indispensable de maîtriser les fondamentaux de Django avant de vous lancer.

Principes de base

Wagtail se base principalement sur un système de pages que nous créons avec de simples modèles Django. Chaque modèle représente un type de page. Comme exemple, créons un modèle de page qui représente un post de blog très simple, avec une image de couverture et un champs de texte.

Chaque modèle doit hériter de la classe Page. Comme vous le noterez, les modèles de pages comportent deux champs supplémentaires qui sont content_panels et search_fields. Le premier est indispensable pour que les champs que nous avons déterminés plus tôt soient affichés dans l'administration de Wagtail. Le second, lui, est optionnel et est en lien avec le moteur de recherche du site.

Le champs content_panels

C'est une simple liste de panels représentant les champs a afficher dans l'administration. Wagtail propose nativement tout un tas de panels qui nous permettent de faire a peu près tout ce que l'on peux imaginer.  Dans notre exemple, il y a un ImageChooserPanel qui affichera un bouton ouvrant la bibliothèque d'image de notre site afin de choisir une image existante, ou d'en uploader un nouvelle. Le FieldPanel quand à lui, est le panel le plus utilisé dans Wagtail, il sert a représenter la plupart des champs communs (TextField, IntegerField, CharField, etc).

Il Faut noter qu'il est important de l'additionner au content_panels du model parent. En effet, l'objet Page dispose du champs Title, plutôt pratique pour donner un petit nom a notre page.


Vous êtes probablement en train de vous dire, que c'est bien sympa tout ça, mais que l'exemple ici est un peu basique. Je ne peux évidemment pour parler de toutes les possibilités qu'offre Wagtail, mais je suis un peu obliger de présenter ce qui pour moi est la core-feature du CMS.

Wagtail est un CMS focalisé sur le contenu, contrairement a la plupart des CMS. Et pour cela, les développeurs ont imaginé une mécanique tout à fait fabuleuse : les StreamFields.

Les StreamFields

Un StreamField représente une séquence de blocs de différents types que nous pouvons assembler et agencer comme bon nous semble au sein d'une même page.

Dans l'illustration ci-dessus, vous pouvez apercevoir un StreamField offrant plusieurs choix. Le choix des types de blocs a mettre a disposition de l'utilisateur appartient au développeur. Vous pouvez utiliser les blocs disponibles nativement dans Wagtail, ou bien développer vos propres blocs customs.

L'exemple ici représente les blocs que j'utilise pour mon blog, ils sont tous customs, sauf les deux premiers (paragraphe et image seule). Voyons comment cela fonctionne en améliorant le modèle de tout à l'heure.

Vous noterez que les changement a effectuer ne sont pas énormes. Nous remplaçons simplement le RichTextField par un StreamField qui prend en paramètre un liste de tuples. le premier bloc est très simple, c'est la réplique du champ que nous avions dans la version précédente de notre modèle. Le second lui est un bloc custom qui est chargé d'afficher un tweet, en fonction de l'url donné. Définir de nouveaux types de blocs est très simple, il suffit de créer un fichier blocks.py à la racine de notre application Django (pas de notre projet).

Il suffit ensuite de créer un templatetag que s'occupera de réaliser le rendu.

Nous voilà avec un belle introduction aux système de pages de Wagtail. Il reste encore plein de choses a explorer, Wagtail est un CMS complet et les développeurs sont très actifs. Vous trouverez plus d'informations sur les pages, référez vous à la documentation en ligne, ainsi que pour les StreamFields.

Les morceaux de codes utilisés dans l'articles sont disponibles  sur Github Gist.

blog comments powered by Disqus
Licence Creative Commons Cet article est mise à disposition sous Licence Creative Commons Attribution - Partage dans les mêmes Conditions 4.0 International.