Template-Vererbung

Teil des Abschnitts Django-Grundlagen der Django-Journey von Coddy. Lektion 17 von 23.

home.html und drinks.html wiederholen beide denselben <head> und bald auch eine Navigationsleiste. Änderst du den Rahmen, musst du jede Datei bearbeiten. Stattdessen bildet eine Basisvorlage den Rahmen für jede Seite, und jede Seite füllt ihren eigenen Bereich aus. Django nennt den Rahmen die übergeordnete Vorlage und jede Seite eine untergeordnete Vorlage.

Der Rahmen markiert den Bereich, den eine Seite ausfüllt, mit einem {% block %}-Tag und einem Namen. Die library/base.html einer Bibliothek:

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

Eine Seite beginnt mit {% extends %} und füllt dann den Block aus:

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

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

{% extends %} muss das erste Tag sein. In einer Seite, die eine andere erweitert, wird alles außerhalb eines Blocks verworfen: Eine Überschrift, die du vergisst einzuschließen, verschwindet.

Aufgabe

Mittel

Lass beide Seiten den Rahmen in base.html gemeinsam nutzen.

Füge in base.html innerhalb von <main> einen leeren Block namens content ein.
Erweitere in home.html in der ersten Zeile "menu/base.html". Behalte nur den Inhalt von <body> und füge ihn in den Block content ein.
Gehe in drinks.html genauso vor.

Klicke auf Ausführen: Beide Seiten zeigen die Navigation aus base.html.

Probier es selbst

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