Héritage des templates

Fait partie de la section Les bases de Django du Journey Django de Coddy. Leçon 17 sur 23.

home.html et drinks.html répètent chacun le même <head>, et bientôt aussi une barre de navigation. Modifiez le cadre et vous devrez modifier chaque fichier. À la place, un modèle sert de cadre et les pages le remplissent.

Le cadre indique la partie qu’une page doit remplir à l’aide d’une balise {% block %} et d’un nom. Le fichier library/base.html d’une bibliothèque :

<body>
    <nav>...</nav>
    <article>{% block body %}{% endblock %}</article>
</body>

Une page commence par {% extends %}, puis remplit le bloc :

{% extends "library/base.html" %}

{% block body %}
    <p>We are open until 20:00.</p>
{% endblock %}

{% extends %} doit être la première balise. Dans une page qui en prolonge une autre, tout ce qui se trouve en dehors d’un bloc est supprimé : un titre que vous oubliez d’encadrer disparaît.

Défi

Moyen

Dans base.html, place un bloc vide nommé content dans <main>.
Fais étendre home.html et drinks.html à "menu/base.html", avec leur propre HTML à l’intérieur de ce bloc.

Appuie sur Exécuter : les deux pages affichent la navigation de base.html.

Essayez vous-même

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Corner Café</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        <!-- each page's content goes here -->
    </main>
</body>
</html>