Template-Vererbung

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

home.html und drinks.html wiederholen jeweils denselben <head>-Bereich und bald auch eine Navigationsleiste. Änderst du den Rahmen, musst du jede Datei bearbeiten. Stattdessen bildet eine Vorlage den Rahmen, und die Seiten füllen ihn aus.

Der Rahmen kennzeichnet den Bereich, den eine Seite ausfüllt, mit einem {% block %}-Tag und einem Namen. Eine Bibliothek könnte library/base.html verwenden:

<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 nicht in einen Block einschließt, verschwindet.

Aufgabe

Mittel

Füge in base.html einen leeren Block namens content innerhalb von <main> ein.
Lass home.html und drinks.html "menu/base.html" erweitern und füge ihr jeweiliges HTML in diesen Block ein.

Klicke auf Run: 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>