Voeg een favicon, bedrijfslogo en voettekst toe aan een Wagtail-site

Deze tutorial gaat over hygiëne. Het toevoegen van een favicon is eenvoudig en het toevoegen van een bedrijfslogo aan een bestaand navigatiemenu is ook niet moeilijk. Het toevoegen van een footer die netjes aan de onderkant blijft plakken en configureerbaar is in de admin, vereist wat meer aandacht. Laten we beginnen met het favicon. Je kunt hiervoor verschillende bestandstypen gebruiken, ons pictogrambestand is favicon-32x32.png. Voeg in het base.html-sjabloon toe:

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

Dat betekent dat Django zal zoeken naar het bestand favicon-32x32.png in een map images op een van de paden in je STATICFILES_DIRS. Het web biedt veel hulp bij het maken van een favicon, dus laten we aannemen dat we er een hebben. We plaatsen het in onze map images van onze projectmap en we zijn klaar.

Het is prima mogelijk om het logo hard te coderen in ons navigatiemenu, maar laten we de Wagtail-editor gebruiken om de zaken wat flexibeler te maken. Maak een snippet in 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

Dit geeft ons een naam en afbeelding die we kunnen definiëren / uploaden in onze editor. De afbeelding wordt op de gebruikelijke manier gedefinieerd, met related_name = '+' om een inverse relatie te voorkomen. Nu maken we een tag in het bestand cms_tags.py (of definieer je eigen naam) in de directory templatetags van je app:

from django import template
from cms.models import CompanyLogo

register = template.Library()

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

We gebruiken Django's simple_tag en gaan ervan uit dat we maar één logo hebben, dus retourneren het eerste object. Uiteraard kunnen we dit indien nodig uitbreiden, zoals verschillende soorten logo's. In onze sjabloon, in ons geval main_menu.html, laden we de tagmodule en geven we de tag een naam:

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

en dan kunnen we het logo aan de sjabloon toevoegen, indien gewenst met een link naar de homepage bijvoorbeeld:

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

Voeg wat passende styling toe aan het CSS-bestand, bijvoorbeeld:

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

Voeg ook het lettertype toe aan de kop van base.html:

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

Onze footer is in wezen een menu. We zouden hem hard kunnen coderen, maar in een eerdere tutorial hebben we hiervoor een functie gemaakt, dus laten we die gebruiken. We willen links naar pagina's met onze cookieverklaring en ons privacybeleid, die in hun eenvoudigste vorm alleen maar tekst bevatten, dus laten we daar een paginamodel voor maken, met wagtailtrans's TranslatablePage om het beschikbaar te maken in meerdere talen:

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

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

We hebben een template nodig voor dit model, dat (zoals altijd) text_page.html wordt genoemd. De inhoud is rechttoe-rechtaan:

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

In onze base.html nemen we een sjabloon footer.html voor de voettekst op, dat ook eenvoudig is:

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

Het None-argument komt overeen met het page-argument van de functie get_menu, dat we hier niet gebruiken. We hoeven niet echt te weten of de gebruiker is ingelogd, maar we hebben wel het derde argument nodig voor de functie get_menu, daarom is het er. Voeg de volgende regel toe aan je base.html-bestand aan het einde van de body:

{% include "footer.html" %}

Er zijn verschillende manieren om de voettekst te plaatsen. We zouden het graag onderaan de pagina willen zien, niet zichtbaar als de pagina langer is dan de viewport, maar onderaan de viewport als de pagina korter is dan de viewport (niet halverwege de viewport net onder de tekst). Een eenvoudige manier om dit te bereiken is door aan het einde van het lichaam wat ruimte te creëren (bijvoorbeeld 50 px) en de voettekst daar te plaatsen:

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;
}

Migreer de database om de modellen toe te voegen en maak in de admin twee pagina's van het TextPage-model, één met een cookieverklaring en één met een privacybeleid. Nog steeds in de admin maak een menu footer op dezelfde manier als we in die eerdere tutorial hebben gedaan, en voeg een copyright menu item toe zonder link, een cookie statement menu item en een privacybeleid menu item met links naar hun respectievelijke pagina's. Bezoek enkele pagina's en kijk of het resultaat je bevalt.

Tot zover. Als je wilt weten hoe je de items in het footer-menu vertaalt, lees dan verder.

Voeg een favicon, bedrijfslogo en footer toe met cookieverklaring en privacybeleid