Dziedziczenie szablonów

Część sekcji Podstawy Django ścieżki Django w Coddy. Lekcja 17 z 23.

home.html i drinks.html powtarzają ten sam element <head>, a wkrótce także pasek nawigacyjny. Zmieniasz szablon, więc musisz edytować każdy plik. Zamiast tego jeden szablon bazowy stanowi ramę każdej strony, a każda strona wypełnia własną część. Django nazywa tę ramę szablonem nadrzędnym, a każdą stronę — podrzędną.

Rama oznacza część, którą wypełnia strona, za pomocą znacznika {% block %} i nazwy. W bibliotece plik library/base.html wygląda tak:

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

Strona zaczyna się od {% extends %}, a następnie wypełnia blok:

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

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

{% extends %} musi być pierwszym znacznikiem. Na stronie, która rozszerza inny szablon, wszystko, co znajduje się poza blokiem, zostaje pominięte: nagłówek, którego nie obejmiesz blokiem, zniknie.

Wyzwanie

Średni

Niech obie strony korzystają ze wspólnej ramy w base.html.

W base.html umieść pusty blok o nazwie content wewnątrz <main>.
W home.html w pierwszym wierszu rozszerz "menu/base.html". Pozostaw tylko to, co znajdowało się wewnątrz <body>, i umieść to w bloku content.
Zrób to samo w drinks.html.

Naciśnij Run: obie strony wyświetlą nawigację z base.html.

Spróbuj swoich sił

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