Pages Web traduisibles dans un site Python Wagtail

Django offre de nombreuses fonctionnalités pour l'internationalisation et la localisation. Dans un didacticiel précédent, on a rendu tous nos modèles, formulaires, vues et modèles traduisibles. Pour un site international, il est évidemment également nécessaire d'avoir le contenu du site (articles, etc.) disponible dans différentes langues, ce qui signifie que notre CMS doit gérer différentes langues. Il y a plusieurs façons de gérer cela. L'une consiste à rendre chaque modèle disponible dans chaque langue, l'autre consiste à rendre chaque page disponible dans chaque langue. Les deux ont leurs avantages: la traduction de modèle peut être utilisée pour chaque modèle, pas seulement pour les pages, et la traduction de page donne une meilleure vue d'ensemble dans l'admin sur les différentes arborescences de page et laisse les modèles de page simples et intacts. On utilisera une combinaison: traduction de page pour les pages et traduction de modèle pour les modèles non-page qui ont besoin de traduction.

Le package qui prend en charge la traduction de page pour Wagtail est appelé wagtailtrans. Installez-le:

pip3 install wagtailtrans

et ajoutez-le à requirements.txt et à INSTALLED_APPS. Comme la page d'installation nous le demande, vérifiez que wagtail.contrib.modeladmin et wagtail.contrib.settings se trouvent également dans INSTALLED_APPS. Ajoutez TranslationMiddleware à MIDDLEWARE comme indiqué:

'wagtailtrans.middleware.TranslationMiddleware', # depends on the SiteMiddleware and replaces LocaleMiddleware
# 'django.middleware.locale.LocaleMiddleware',

Ajoutez également aux paramètres le paramètre suivant:

WAGTAILTRANS_HIDE_TRANSLATION_TREES = True

Par défaut, Wagtail affichera toutes les pages dans toutes les langues dans admin. C'est un peu encombrant; en définissant le paramètre, cela est empêché et les pages dans la langue non par défaut sont toujours très faciles à sélectionner dans un sous-menu.

Il est maintenant temps de dire au revoir à notre page d'accueil Wagtail :-(. Dans models.py de l'application Home, mettez un signe de commentaire avant le modèle. On va commencer par une nouvelle page d'accueil qui garantira que toutes les pages ci-dessous sont traduisibles. Migrez la base de données:

python3 manage.py makemigrations
python3 manage.py migrate

Assurez-vous d'avoir défini au moins deux langues dans votre fichier de paramètres; un tutoriel précédent montre comment. Exécutez le serveur et accédez à l'admin Wagtail, cliquez sur Paramètres dans le menu de gauche, puis sur Langues; wagtailtrans listera les langues du fichier de paramètres. Ajoutez les langues dont vous avez besoin à la vue d'ensemble de l'admin; si nécessaire, modifiez la valeur par défaut.

Maintenant, allez dans Pages dans le menu et cliquez sur Pages en haut (donc ne cliquez pas sur Accueil). Cela vous amène à une vue d'ensemble appelée Root (Racine), qui affiche toutes les pages racine; dans ce cas, il n'y en a qu'un et il s'appelle Home. On veut créer une nouvelle racine, ce qui rend l'arbre sous lui traduisible. Cliquez donc sur le bouton 'Ajouter une sous-page' en haut et sélectionnez 'Translatable Site Root Page' (fourni par wagtailtrans). Ajoutez un titre (par exemple 'Translatable Root') et dans le menu vert ci-dessous, sélectionnez Publier (Publish).

On doit connecter cette nouvelle page racine au site. Accédez à Paramètres (Settings), puis à Sites. Il devrait y avoir un site, probablement appelé localhost. Cliquez dessus et au paramètre 'Page racine', cliquez sur 'Choisissez une page racine différente'. Choisissez la nouvelle page racine traduisible et cliquez sur Enregistrer. Maintenant, allez à nouveau dans Pages dans le menu, vous pouvez voir que la nouvelle page est la racine car il y a un petit globe avant. Supprimez l'autre page d'accueil pour éviter toute confusion. Maintenant, si vous cliquez sur la flèche à droite à côté de Racine traduisible, on est au point de départ de notre arborescence de pages où on ajoutera toutes les pages, en commençant par une page d'accueil.

Ceci est très bien décrit dans la documentation Wagtail, on va donc en discuter brièvement. On commence par créer une application distincte où toutes nos pages CMS résideront:

python3 manage.py startapp cms

Ajoutez cms à INSTALLED_APPS. Dans models.py, créez un modèle de page d'accueil simple:

from wagtail.admin.edit_handlers import FieldPanel
from wagtail.core.fields import RichTextField
from wagtailtrans.models import TranslatablePage

class HomePage(TranslatablePage):
    intro = RichTextField(blank=True)

    content_panels = TranslatablePage.content_panels + [
        FieldPanel('intro', classname='full'),
    ]

Notez que on sous-classe la page de TranslatablePage. On doit maintenant créer un modèle. Par défaut, Wagtail recherchera un nom de fichier de modèle formé à partir du nom de l'application et du modèle, en séparant les majuscules par des traits de soulignement, donc dans ce cas home_page.html. Créez ce modèle dans le répertoire /cms/templates/cms et ajoutez ce répertoire au paramètre TEMPLATES dans les paramètres. Mettez le contenu suivant dans, très similaire à l'exemple dans la documentation de Wagtail:

{% extends "base.html" %}

{% load wagtailcore_tags %}

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

{% block content %}

    <div class="container-fluid mt-4">
        <div class="page-title">
            <h1>{{ page.title }}</h1>
        </div>
        <div class="page-intro">
            {{ page.intro|richtext }}
        </div>
    </div>

{% endblock %}

On doit faire entrer wagtailcore_tags à cause du filtre richtext de Wagtail. Le paramètre de bloc body_class permet de donner un nom de classe au corps de la page spécifique, pour permettre un style individuel. Le variable page est disponible dans chaque instance de page, afin qu'on puisse accéder à page.title, page.intro et à tout autre champ, attribut ou méthode de la page. On n'aura pas besoin de spécifier le champ title dans le modèle, car il s'agit d'un champ standard du modèle Page.

Migrez la base de données pour y ajouter le modèle. On est maintenant prêts à créer la page dans l'admin de Wagtail. Accédez à http://127.0.0.1:8000/admin, à Pages et choisissez la page Translatable Root. Choisissez 'Ajouter une sous-page' et choisissez le modèle HomePage nouvellement créé. Tapez un titre et un paragraphe de texte Intro et publiez la page. Cliquez maintenant sur 'Modifier dans' ('Edit in') pour cette page. Les autres langues deviennent visibles. Wagtailtrans a créé une copie de la page pour chaque langue dans les paramètres. Vous pouvez traduire le texte dans la langue appropriée. Remarque: wagtailtrans copie uniquement le texte dans toutes les autres pages linguistiques lorsque la page est créée; après cela, c'est à vous de le faire.

Par défaut, Wagtail et wagtailtrans créent automatiquement des slugs pour les nouvelles pages; vous pouvez les visualiser dans l'onglet 'promotion' ('promote'). Le slug des pages d'accueil linguistiques doit toujours être défini sur le code de langue (non référencé dans la dernière documentation), sinon la racine / ne pointe vers aucune page. Modifiez donc le slug de la page d'accueil en anglais en /en/ et de même pour les autres langues.

Si vous souhaitez ajouter plus de pages, y compris StreamField et des blocs de code et ajouter du CSS, alors lisez plus.

Pages Web traduisibles en Wagtail