Vertaalbare webpagina's in een Wagtail Python-site

Django biedt veel functionaliteit voor internationalisatie en lokalisatie. In een eerdere tutorial hebben we al onze modellen, formulieren, views en templates vertaalbaar gemaakt. Voor een internationale site is het uiteraard ook nodig om de inhoud van de site (artikelen etc.) beschikbaar te hebben in verschillende talen, wat betekent dat ons CMS verschillende talen moet behandelen. Er zijn een paar manieren om hiermee om te gaan. Een daarvan is om elk model in elke taal beschikbaar te maken, een andere is om elke pagina in elke taal beschikbaar te maken. Beide hebben hun voordelen: modelvertaling kan voor elk model worden gebruikt, niet alleen voor pagina's, en paginavertaling geeft een beter overzicht in de admin over de verschillende paginabomen en laat de paginamodellen eenvoudig en onaangeroerd. We zullen een combinatie gebruiken: paginavertaling voor de pagina's en modelvertaling voor de niet-paginamodellen die vertaald moeten worden.

Het pakket dat paginavertaling voor Wagtail ondersteunt, heet wagtailtrans. Installeer het:

pip3 install wagtailtrans

en voeg het toe aan requirements.txt en aan INSTALLED_APPS. Zoals de installatiepagina ons opdraagt te doen, controleer of wagtail.contrib.modeladmin en wagtail.contrib.settings ook in INSTALLED_APPS staan. Voeg TranslationMiddleware toe aan MIDDLEWARE volgens de instructies:

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

Voeg ook aan instellingen de volgende parameter toe:

WAGTAILTRANS_HIDE_TRANSLATION_TREES = True

Standaard toont Wagtail alle pagina's in alle talen in de admin. Dit is een beetje rommelig; door het instellen van de parameter wordt dit voorkomen en zijn de pagina's in de niet-standaard taal nog steeds zeer eenvoudig te selecteren vanuit een submenu.

Nu is het tijd om afscheid te nemen van onze Wagtail-homepage :-(. Plaats een commentaarteken voor het model in models.py van de Home-app. We beginnen met een nieuwe homepage die ervoor zorgt dat alle pagina's eronder vertaalbaar zijn. Migreer de database:

python3 manage.py makemigrations
python3 manage.py migrate

Zorg ervoor dat je ten minste twee talen hebt ingesteld in je instellingenbestand; een eerdere tutorial laat zien hoe. Start de server op en ga naar de Wagtail-admin, klik op Instellingen in het menu aan de linkerkant en vervolgens op Talen; wagtailtrans geeft de talen weer uit het instellingenbestand. Voeg de talen die je nodig hebt toe aan het admin-overzicht; wijzig indien nodig de default.

Ga nu naar Pagina's in het menu en klik bovenaan op Pagina's (klik dus niet op Home). Dit brengt je naar een overzicht genaamd Root, dat alle root-pagina's toont; in dit geval is er maar één en die heet Home. We willen een nieuwe root maken, waardoor de hele boom eronder vertaalbaar is. Dus klik bovenaan op de knop 'Voeg onderliggende pagina toe' en selecteer 'Translatable Site Root Page' (geleverd door wagtailtrans). Voeg een titel toe (bijvoorbeeld 'Translatable Root') en selecteer Publiceer in het groene menu hieronder.

We moeten deze nieuwe root-pagina verbinden met de site. Ga naar Instellingen en vervolgens Sites. Er zou één site moeten zijn, waarschijnlijk localhost genaamd. Klik erop en klik bij de instelling 'Beginpagina' op 'Kies een andere beginpagina'. Kies de nieuwe vertaalbare hoofdpagina en klik op Opslaan. Ga nu opnieuw naar Pages in het menu, je kunt zien dat de nieuwe pagina de root is omdat er een kleine wereldbol voor staat. Verwijder de andere pagina Home om verwarring te voorkomen. Als je nu op de pijl rechts naast de vertaalbare root klikt, staan we aan het beginpunt van onze paginaboom waar we alle pagina's zullen toevoegen, te beginnen met een startpagina.

Dit wordt heel goed beschreven in de Wagtail-documentatie, dus we zullen dit kort bespreken. We beginnen met het maken van een aparte app waar al onze CMS-pagina's zich bevinden:

python3 manage.py startapp cms

Voeg cms toe aan INSTALLED_APPS. Maak in models.py een eenvoudig startpaginamodel:

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'),
    ]

Merk op dat we de pagina afleiden van TranslatablePage. Nu moeten we een template maken. Standaard zoekt Wagtail naar een templatebestandsnaam gevormd uit de app en de modelnaam, waarbij hoofdletters worden gescheiden door onderstrepingstekens, dus in dit geval home_page.html. Maak deze template aan in de directory /cms/templates/cms en voeg deze directory toe aan de parameter TEMPLATES in de instellingen. Zet de volgende inhoud erin, vergelijkbaar met het voorbeeld in de Wagtail-documentatie:

{% 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 %}

We moeten wagtailcore_tags laden vanwege Wagtail's filter richtext. De blokparameter body_class maakt het mogelijk om een klasse-naam aan de body van de specifieke pagina te geven, om individuele styling mogelijk te maken. De variabele page is beschikbaar in elke pagina-instantie, zodat we toegang hebben tot page.title, page.intro en elk ander veld, kenmerk of methode van de pagina. We hoefden het veld title in het model niet op te geven, omdat het een standaardveld is van het paginamodel.

Migreer de database om het model eraan toe te voegen. Nu zijn we klaar om de pagina te maken in Wagtail's admin. Ga naar http://127.0.0.1:8000/admin, naar Pagina's en kies de Translatable Root-pagina. Kies 'Voeg onderliggende pagina toe' en kies het nieuw gemaakte HomePage-model. Typ een titel en een tekstparagraaf Intro en publiceer de pagina. Klik nu op 'Edit in' voor deze pagina. De andere talen worden zichtbaar. Wagtailtrans heeft een kopie van de pagina gemaakt voor elke taal in de instellingen. Je kunt de tekst in de juiste taal vertalen. Opmerking: wagtailtrans kopieert de tekst alleen naar alle andere taalpagina's wanneer de pagina is gemaakt; daarna is het aan jou om dat te doen.

Standaard maken Wagtail en wagtailtrans automatisch slugs voor nieuwe pagina's; je kunt ze bekijken in het tabblad 'promoten'. De slug van taalhomepages moet altijd worden ingesteld op de taalcode (dit wordt niet genoemd in de laatste documentatie), anders verwijst de root / niet naar een pagina. Verander dus de slug voor de Engelse homepage naar /en/; idem voor de andere talen.

Als je meer pagina's wilt toevoegen, inclusief StreamField en blokken code en wat CSS wilt toevoegen, lees dan verder.

Vertaalbare webpagina's in Wagtail