Suite de la deuxième partie.

Templates

Emplacement du template

Chaque type de contenu aura son propre template. Les templates sont des templates Django classique. Wagtail ira chercher un template correspondant au nom du modèle automatiquement. Ainsi, pour un modèle HomePage présent dans l'application home, le template correspondant sera "home/home_page.html".

Il est également possible de spécifier le template avec l'attribut correspondant :

class HomePage(Page):
    template = "home_template.html"

Le fonctionnement est ensuite du Django classique. On fait un template de base qu'on étend dans les templates spécifiques. On a toujours accès aux tags, filtres, etc. Wagtail nous en met d'ailleurs quelques uns supplémentaires à disposition.

Variable, tag et filtre

La liste complète est disponible dans la documentation.

page

La variable page contient l'instance du contenu affiché. Ainsi, tous les champs du contenu sont accessibles :

{{ page.title }}
{{ page.author }}

richtext

Le filtre richtext permet de convertir un champ richtext en html. Par exemple :

{% load wagtailcore_tags %}
...
{{ page.intro | richtext }}

image

Le tag image permet d'afficher l'image d'un champ. Il est possible de transformer l'image avant de l'afficher. N'hésitez pas à consulter la documentation pour une description exhaustive des possibilités :

{% load wagtailimages_tags %}
...
Image redimensionnée pour tenir dans un carré de 500x500 pixels.
{% image page.image max-500x500 %}
Image redimensionnée pour couvrir un carré de 500x500 pixels.
{% image page.image min-500x500 %}
Image redimensionnée pour que sa largeur soit de 500 pixels.
{% image page.image width-500 %}
Image redimensionnée pour que sa hauteur soit de 500 pixels.
{% image page.image height-500 %}
Image redimensionnée et tronquée pour être d'une taille de 500x500 pixels.
{% image page.image fill-500x500 %}
Image originale sans transformation.
{% image page.image original %}

pageurl / slugurl

Le tag pageurl permet de créer une url à partir d'une instance de page. Le tag slugurl permet de créer le lien à partir d'un slug :

{% load wagtailcore_tags %}
...
<a href="{% pageurl page %}"></a>
<a href="{% slugurl 'contact' %}"></a>

wagtailuserbar

Le tag wagtailuserbar permet d'afficher un menu flottant pour accéder à différentes fonctionnalités telles qu'éditer la page ou ajouter des contenus :

{% load wagtailuserbar %}
...
{% wagtailuserbar %}

request.is_preview

L'attribut is_preview est ajouté à la requête afin de différencier un affichage live d'un affichage en aperçu :

{% if not request.is_preview %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      ...
    </script>
{% endif %}

Modifier le contexte

Il est possible de modifier le contexte du template en surchargeant la méthode get_context. Nous pouvons par exemple récupérer et paginer tous les billets de blogs sous un BlogIndexPage, trié du plus récent au plus ancien :

class BlogIndexPage(Page):
    [...]
    def get_context(self, request, *args, **kwargs):
        # On garde le contexte original
        context = super(BlogIndexPage, self).get_context(request, *args, **kwargs)
        # QuerySet permettant de récupérer les billets de blogs.
        blog_list = BlogPage.objects.child_of(self).order_by('-date')
        page = request.GET.get('page')
        # On pagine, 3 billets par page.
        paginator = Paginator(blog_list, 3)
        try:
            context['blog_list'] = paginator.page(page)
        except PageNotAnInteger:
            context['blog_list'] = paginator.page(1)
        except EmptyPage:
            context['blog_list'] = paginator.page(paginator.num_pages)
        return context

Conclusion

Vous avez désormais toutes les clés en main pour commencer votre premier site Wagtail. Il reste bien évidemment de nombreuses choses à voir, tel que les snippets, les form builder ou bien encore la recherche. Mais tout ceci, et bien plus encore, seront pour une prochaine fois.