Каждая страница любого сайта содержит свое содержимое и общие части — футер или боковое меню. В 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 и включают в себя стили для конкретных разделов
- Создание отдельного шаблона для каждого типа страницы, например, новостной статьи или записи в блоге. Эти шаблоны расширяют соответствующий шаблон раздела
Такой подход максимизирует повторное использование кода и помогает добавлять элементы в области общего содержимого, например, навигацию по всему разделу.
Самостоятельная работа
- Повторите все из теории урока на своем компьютере
- Зафиксируйте изменения в git. Дальше этот пункт повторяться не будет. Не забывайте фиксировать любые изменения в git
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
