Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Наследование шаблонов (Extends) Python: Разработка на фреймворке Django

Каждая страница любого сайта содержит свое содержимое и общие части — футер или боковое меню. В 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 и включают в себя стили для конкретных разделов
  • Создание отдельного шаблона для каждого типа страницы, например, новостной статьи или записи в блоге. Эти шаблоны расширяют соответствующий шаблон раздела

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


Самостоятельная работа

  1. Повторите все из теории урока на своем компьютере
  2. Зафиксируйте изменения в git. Дальше этот пункт повторяться не будет. Не забывайте фиксировать любые изменения в git

Дополнительные материалы

  1. Template inheritance

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»