Menu
CoddyTech

Наследование шаблонов

Часть раздела Основы Django путешествия по Django на Coddy. Урок 17 из 23.

В home.html и drinks.html повторяется один и тот же <head>, а вскоре будет повторяться и панель навигации. Измените каркас — и придётся редактировать каждый файл. Вместо этого используйте один базовый шаблон в качестве каркаса для каждой страницы, а каждая страница будет заполнять свою часть. В Django этот каркас называется родительским шаблоном, а каждая страница — дочерним.

В каркасе часть, которую заполняет страница, отмечается тегом {% block %} с именем. Файл library/base.html библиотеки:

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

Страница начинается с {% extends %}, затем заполняет блок:

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

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

{% extends %} должен быть первым тегом. На странице, которая наследует другой шаблон, всё, что находится вне блока, отбрасывается: если забыть обернуть заголовок в блок, он исчезнет.

challenge icon

Задание

Средне

Сделай так, чтобы обе страницы использовали общий каркас из base.html.

  1. В base.html добавь пустой блок с именем content внутри <main>.
  2. В home.html в первой строке укажи наследование от "menu/base.html". Оставь только содержимое <body> и помести его в блок content.
  3. Сделай то же самое в drinks.html.

Нажми Run: на обеих страницах появится навигация из base.html.

Попробуйте сами

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

Все уроки раздела Основы Django

Потренируйтесь самостоятельно: Песочница Django