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 toutes deux le même <head>, et bientôt aussi une barre de navigation. Si tu changes le cadre, tu dois modifier chaque fichier. À la place, un modèle de base sert de cadre à chaque page, et chaque page remplit sa propre partie. Django appelle ce cadre le modèle parent, et chaque page un modèle enfant.

Le cadre indique la partie qu’une page doit remplir avec une balise {% block %} et 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 étend une autre, tout ce qui se trouve en dehors d’un bloc est supprimé : un titre que tu oublies d’encadrer disparaît.

Défi

Moyen

Fais en sorte que les deux pages partagent le cadre défini dans base.html.

Dans base.html, ajoute un bloc vide nommé content à l’intérieur de <main>.
Dans home.html, étends "menu/base.html" dès la première ligne. Garde uniquement ce qui se trouvait dans <body> et place-le dans le bloc content.
Fais de même dans drinks.html.

Appuie sur Run : les deux pages affichent la barre de 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>