Accueil / Blog / Métier / 2016 / Wagtail : Comment écrire les templates (partie 3)

Wagtail : Comment écrire les templates (partie 3)

Par Yann Fouillat — publié 18/07/2016
Il n'y a pas de vue à proprement parlé dans Wagtail. Tout est en fait géré dans le modèle. Nous pouvons ainsi modifier le template utilisé ou étendre son contexte en fonction du type de contenu sans problème.
Wagtail : Comment écrire les templates (partie 3)

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.

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Django Rest Framework : les tests (partie 8) Django Rest Framework : les tests (partie 8) 22/02/2016

Avec les API REST, développer très rapidement des tests fonctionnels complets qui frôlent les ...

Formation Django initiation à Toulouse du 13 au 15 mars Formation Django initiation à Toulouse du 13 au 15 mars 26/01/2017

Entrez de plain-pied dans l'univers de Django aux côtés de développeurs ayant une expérience de ...

Python : Bien configurer son environnement de développement Python : Bien configurer son environnement de développement 07/12/2015

Comment utiliser les bonnes pratiques de développement Python.

Internationalisation avec Django Internationalisation avec Django 27/11/2018

En tant que développeurs nous sommes parfois confronté à la problématique de l'accessibilité ...

Retour sur la PyConFr 2016 Retour sur la PyConFr 2016 18/10/2016

Nous étions présents à Rennes pour PyConFr 2016. Voici notre compte-rendu à chaud.