Menu
CoddyTech

Dziedziczenie szablonów

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

home.html i drinks.html powielają ten sam <head>, a wkrótce także pasek nawigacyjny. Zmień szablon, a musisz edytować każdy plik. Zamiast tego jeden szablon stanowi ramę, którą wypełniają strony.

Rama wyznacza część wypełnianą przez stronę za pomocą znacznika {% block %} i nazwy. Plik library/base.html w bibliotece:

<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 inną stronę, wszystko poza blokiem zostaje pominięte: nagłówek, którego nie obejmiesz blokiem, zniknie.
challenge icon

Wyzwanie

Średni
  • W pliku base.html umieść pusty blok o nazwie content wewnątrz <main>.
  • Spraw, aby pliki home.html i drinks.html rozszerzały "menu/base.html" i zawierały własny kod HTML w tym bloku.

Naciśnij Uruchom: na obu stronach wyświetla się nawigacja z pliku 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>

Wszystkie lekcje w sekcji Podstawy Django

Poćwicz samodzielnie: Edytor online Django