Makina Blog

Le blog Makina-corpus

Wagtail : Comment écrire les templates (partie 3)


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.

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.

Actualités en lien

Image
Wagtail
15/06/2016

Wagtail : Utiliser le modèle Page ainsi que son Manager (partie 2)

Le modèle Page contient plusieurs méthodes spécifiques à l'outil Wagtail. C'est également le cas de son manager. Nous allons faire le tour de tout cela dans cet article.

Voir l'article
Image
ChooserPanel
13/06/2016

Wagtail : Créer ses modèles de type de contenu (partie 1)

On commence à avoir l'habitude d'initialiser son CMS directement depuis une interface web, cela incluant souvent de nombreux panneaux complexes. Wagtail reprend plutôt la philosophie Django et nous propose de définir les types de contenus comme des modèles.

Voir l'article
Image
back office
03/06/2016

Présentation de Wagtail, le dernier CMS Django

Wagtail est un CMS relativement récent dans l’écosystème Django. Pour autant, son jeune âge ne l’empêche pas de posséder de nombreuses fonctionnalités que nous découvrirons dans cet article.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus