Ereditarietà dei template

Fa parte della sezione Fondamenti di Django del percorso Django di Coddy. Lezione 17 di 23.

home.html e drinks.html ripetono entrambi lo stesso <head>, e presto anche una barra di navigazione. Se cambi la struttura, devi modificare ogni file. Invece, un modello di base fa da struttura per ogni pagina, e ogni pagina riempie la propria parte. Django chiama la struttura modello genitore e ogni pagina modello figlio.

La struttura contrassegna la parte che una pagina riempie con un tag {% block %} e un nome. Il file library/base.html di una libreria:

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

Una pagina inizia con {% extends %}, poi riempie il blocco:

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

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

{% extends %} deve essere il primo tag. In una pagina che estende un'altra, tutto ciò che si trova fuori da un blocco viene eliminato: se dimentichi di racchiudere un'intestazione, scompare.

Sfida

Medio

Fai in modo che entrambe le pagine condividano la struttura in base.html.

In base.html, inserisci un blocco vuoto chiamato content dentro <main>.
In home.html, estendi "menu/base.html" nella prima riga. Mantieni solo ciò che era dentro <body> e inseriscilo nel blocco content.
Fai lo stesso in drinks.html.

Premi Esegui: entrambe le pagine mostrano la navigazione di base.html.

Provalo tu

<!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>