Логотип Хекслета

Python: Разработка на фреймворке Django

Теория: Наследование шаблонов (Extends)

Каждая страница любого сайта содержит свое содержимое и общие части — футер или боковое меню. В Django можно наследовать шаблоны. Это позволяет создать базовый шаблон. Он содержит все общие элементы сайта и определяет блоки, которые могут переопределять дочерние шаблоны.

В этом уроке мы научимся наследовать шаблоны в Django.

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

Создадим новый шаблон base.html со следующим содержимым:

<!-- hexlet_django_blog/templates/base.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Django на Хекслете{% endblock %}</title>
</head>
<body>
<div id="sidebar">
    {% block sidebar %}
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/articles/">Статьи</a></li>
        </ul>
    {% endblock %}
</div>
<div id="content">
    {% block content %}{% endblock %}
</div>
</body>
</html>

Этот HTML-документ определяет базовую структуру нашего сайта. Задача дочерних шаблонов — заполнить пустые блоки содержимым. В этом примере инструкция block сообщает шаблонизатору, какие участки страницы в дальнейшем могут быть переопределены в дочерних шаблонах.

Отредактируем шаблон hexlet_django_blog/templates/about.html следующим образом:

<!-- hexlet_django_blog/templates/about.html -->

{% extends "base.html" %}

{% block title %}Эксперименты с Django на Хекслете{% endblock %}

{% block content %}
    <h1>О блоге</h1>
    <p>Эксперименты с Django на Хекслете</p>
    <p>{{ tags|join:', ' }}</p>
{% endblock %}

Инструкция extends является ключевой. Она сообщает шаблонизатору, что этот шаблон «расширяет» другой шаблон. Теперь, когда шаблонизатор будет обрабатывать наш шаблон about.html, инструкция extends найдет родительский — base.html. Далее она заменит в нем те блоки, которые мы переопределили в шаблоне about.html.

Поскольку в шаблоне about.html мы не используем блок sidebar, вместо него будет использоваться значение из родительского шаблона. Содержимое внутри тега в родительском шаблоне всегда используется как значение по умолчанию.

Можно использовать столько уровней наследования, сколько необходимо. Один из распространенных способов использования наследования — трехуровневый подход:

  • Создание base.html шаблона, который содержит основной внешний вид сайта
  • Создание base_SECTIONNAME.html шаблонов для каждого раздела сайта, например, base_article.html, base_news.html. Эти шаблоны расширяют base.html и включают в себя стили для конкретных разделов
  • Создание отдельного шаблона для каждого типа страницы, например, новостной статьи или записи в блоге. Эти шаблоны расширяют соответствующий шаблон раздела

Такой подход максимизирует повторное использование кода и помогает добавлять элементы в области общего содержимого, например, навигацию по всему разделу.

Навигация
Теория
Тесты
Упражнение