Refonte du blog avec Wagtail

Ash_Crow Vie du site

Au début je voulais juste refaire la page d’accueil du site. Un projet simple et rapide : une page principale, une autre pour les mentions légales et éventuellement une petite bio, le tout géré avec Pélican, un générateur de site statique.

Et puis pour le boulot j'ai découvert Wagtail, un moteur de CMS pour Django et je l'ai trouvé cool[1], du coup me suis dit que j'allais l'utiliser pour migrer aussi le blog, parce que j'en avais un peu marre de Wordpress, pour lequel au fil des mises à jour certaines extensions avaient cessé de fonctionner correctement (notamment celle gérant les notes de bas de page, ou celle permettant d’intégrer des extraits de code). Ça a pris plus de temps que prévu (j'y suis depuis fin août 😅), mais c'est enfin prêt !

Côté front-end, après avoir comparé plusieurs frameworks CSS, je me suis arrêté sur Bulma, qui est à la fois minimaliste, élégant et purement CSS, me permettant de limiter le JS utilisé au strict minimum.

Attention, peinture fraîche

Wagtail est donc un moteur de CMS assez générique, qui fournit les briques de base pour faire un site avec édition du contenu, mais c'est beaucoup, beaucoup moins clefs en main que Wordpress. Je ne suis cependant pas parti sur une page blanche, puisque j'ai utilisé une application déjà faite comme base : wagtail_blog, qui a déjà non seulement des modèles de page de blog, de catégorie, etc., mais aussi un script permettant d'importer les billets depuis un Wordpress existant. Yay ! Sauf que j'avais un certain nombre de complications :

  • Ce blog est bilingue français-anglais, et si Wagtail gère les sites bilingues, ce n'est pas le cas de l'importateur, qui a tout importé dans la langue par défaut (le français), quelque soit la langue dans laquelle était publié le billet. J'ai donc dû, pour chaque page qui avait une version anglaise : marquer la version française comme à traduire (ce qui crée un billet équivalent avec pour langue l’anglais, mais toujours le texte français), copier le contenu depuis l'article anglais importé vers le billet traduit, supprimer le billet importé.
  • Tout a été importé dans un champ de texte riche, alors que je voulais profiter des « StreamField » de Wagtail, qui permettent d’intégrer de manière harmonieuse plusieurs types de contenus plutôt qu’essayer de tout rentrer au chausse-pieds dans du texte riche, et ainsi avoir un meilleur contrôle pour chaque type de texte. Il m'a donc fallu créer lesdits types de bloc (notamment « Image avec légende » et « bloc de code », puis tout recopier à la main aux bons endroits pour chaque billet. Heureusement qu’il n’y en avait pas 200. J’en ai profité pour corriger aussi toutes les notes de bas de page, et il y en a... beaucoup[2].
  • Les catégories non plus n'étaient pas internationalisées, et je me suis arraché quelques cheveux là-dessus, mais a priori tout fonctionne maintenant.
  • La gestion des commentaires n’a pas été simple non plus : j’ai dû faire un script d’import ad-hoc, et me plonger dans les fonctionnalités de Django-comments-xtd pour lui faire faire ce que je veux.
  • Concernant les images d’en-tête : à ma surprise, le modèle de page de wagtail_blog gérait déjà cette fonctionnalité – et celles du Wordpress ont bien été importées automatiquement. J’ai juste eu à créer un champ et un bloc de contenu s’affichant automatiquement en bas de page pour indiquer la légende.
  • Enfin, je voulais un pied de page riche et à ma surprise j’ai dû réimplémenter les fonctionnalités dont j'avais besoin pour lister les derniers billets et commentaires pour une langue donnée, et créer les pages d’archives par année. Pas forcément compliqué en soi mais je pensais que ça existait nativement.

Image d'en-tête:

Une bergeronnette grise (en anglais white wagtail), par Jac. Janssen, CC-BY 2.0

Tags :

0 comments have been posted.

Notes de bas de page

  1. Je ne suis apparemment pas le seul, puisqu'il est utilisé, excusez du peu, par Google, Mozilla, Amnesty et la NASA. Entre autres.

  2. Notamment sur un certain billet-fleuve...

Commentaires

Ajouter un commentaire

Requis pour la vérification des commentaires