Ajoutez un favicon, un logo d'entreprise et un pied de page à votre site Wagtail

Ce tutoriel portera sur l'hygiène. L'ajout d'un favicon est facile, et l'ajout d'un logo d'entreprise à un menu de navigation existant n'est pas difficile non plus. L'ajout d'un pied de page qui colle parfaitement au fond et qui est configurable dans admin nécessite un peu plus d'attention. Commençons par le favicon. Vous pouvez utiliser plusieurs types de fichiers pour cela, notre fichier icône sera favicon-32x32.png. Dans votre modèle base.html, ajoutez:

<link rel="icon" type="image/png" href="{% static 'images/favicon-32x32.png' %}"/>

Cela signifie que Django recherchera le fichier favicon-32x32.png dans un répertoire images dans l'un des chemins de vos STATICFILES_DIRS. Le Web offre beaucoup d'aide pour créer un favicon, supposons donc que on en a un. On l'a mis dans notre répertoire images de notre répertoire de projet et on a terminé.

Il est parfaitement possible de coder le logo dans notre menu de navigation, mais utilisons l'éditeur Wagtail pour rendre les choses un peu plus flexibles. Créez un snippet dans models.py:

@register_snippet
class CompanyLogo(models.Model):
    name = models.CharField(max_length=250)
    logo = models.ForeignKey(
        'wagtailimages.Image', on_delete=models.CASCADE, related_name='+'
    )

    panels = [
        FieldPanel('name', classname='full'),
        ImageChooserPanel('logo'),
    ]

    def __str__(self):
        return self.name

Cela nous donnera un nom et une image qu'on peut définir / télécharger dans notre éditeur. L'image est définie de la manière habituelle, avec related_name = '+' pour éviter une relation en arrière. Maintenant, on crée une balise dans le fichier cms_tags.py (ou définisse votre propre nom) dans le répertoire templatetags de votre application:

from django import template
from cms.models import CompanyLogo

register = template.Library()

@register.simple_tag()
def company_logo():
    return CompanyLogo.objects.first()

On utilise simple_tag de Django et suppose que on n'a qu'un seul logo, donc retourne le premier objet. Bien sûr, on peut l'étendre si nécessaire pour une utilisation plus élaborée, comme différents types de logos. Dans notre modèle, dans notre cas main_menu.html, on fait entrer le module de balises et nomme la balise:

{% load cms_tags %}
{% company_logo as logo %}

puis on peut ajouter le logo au modèle, si vous le souhaitez avec un lien vers la page d'accueil par exemple:

<a class="navbar-brand" href="/">{% image logo.logo fill-30x30 %}{{ logo.name }}</a>

Ajoutez du style à votre fichier CSS de la manière qui vous convient, par exemple:

.navbar .navbar-brand {
    font-family: 'IM Fell English', serif;
    font-size: xx-large;
    color: navy;
}

Ajoutez également la police au début du fichier base.html:

<link href="https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@1&display=swap" rel="stylesheet">

Notre pied de page est essentiellement un menu. On pourra le coder en dur, mais dans un tutoriel précédent, on a créé une fonction pour cela, alors utilisons-la. On veut avoir des liens vers des pages avec notre déclaration de cookies et notre politique de confidentialité, qui contiennent dans leur forme la plus simple du texte, on va donc créer un modèle de page pour cela, en utilisant TranslatablePage de wagtailtrans pour le rendre disponible en plusieurs langues:

class TextPage(TranslatablePage):
    text = RichTextField(blank=True)

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

On a besoin d'un modèle html pour ce modèle de page, qui (comme toujours) s'appelle text_page.html. Le contenu est simple:

{% extends "base.html" %}

{% load wagtailcore_tags %}

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

{% block content %}

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

{% endblock %}

Dans notre base.html, on inclura un modèle footer.html pour le pied de page, qui est également simple:

{% load cms_tags %}

{% get_menu "footer" None request.user.is_authenticated as footer %}

<footer>
    <ul>
        <li>
            {% for item in footer %}
                {%  if item.url %}
                    <a href="{{ item.url }}">{{ item.title }}</a>
                {% else %}
                    <span>{{ item.title }}</span>
                {%  endif %}
            {% endfor %}
        </li>
    </ul>
</footer>

L'argument None correspond à l'argument page de la fonction get_menu, qu'on n'utilise pas ici. On n'a pas vraiment besoin de savoir si l'utilisateur est connecté, mais on a besoin du troisième argument pour la fonction get_menu, c'est pourquoi il est là. Ajoutez la ligne suivante à votre fichier base.html à la fin du body:

{% include "footer.html" %}

Il existe plusieurs façons de positionner le pied de page. On aimera qu'il soit en bas de la page, non visible si la page est plus longue que la fenêtre, mais en bas de la fenêtre si la page est plus courte que la fenêtre (pas à mi-chemin de la fenêtre juste en dessous du texte). Un moyen simple d'y parvenir consiste à créer un espace à la fin du corps (par exemple 50 px) et à y placer le pied de page:

html {
    height: 100%;
}
body {
    min-height: 100%;
    position: relative;
    padding-bottom: 50px;
}
footer {
    background-color: navy;
    height: 50px;
    padding-top: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
}
footer ul {
    list-style-type: none;
}
footer li span, footer li a, footer li a:hover {
    display: inline;
    color: white;
    font-size: 12px;
    margin-right: 40px;
}

Migrez votre base de données pour ajouter les modèles et créez en admin deux pages à partir du modèle TextPage, une avec une déclaration de cookie et une avec une politique de confidentialité. Toujours dans admin, créez un menu footer de la même manière qu'on l'a fait dans ce didacticiel précédent, et ajoutez un élément de menu copyright sans lien, un élément de menu de déclaration de cookie et un élément de menu de politique de confidentialité avec des liens vers leurs pages respectives. Visitez quelques pages et voyez si vous aimez le résultat.

C'est bon pour l'instant. Si vous souhaitez savoir comment traduire les éléments du menu de pied de page, lisez plus.