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

Python: Веб-разработка (Flask)

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

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

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

<!-- courses/layout.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %}Flask проект{% endblock %}</title>
</head>
<body>
<div id="sidebar">
    {% block sidebar %}
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/courses/">Курсы</a></li>
        </ul>
    {% endblock %}
</div>
<div id="content">
    {% block content %}{% endblock %}
</div>
</body>
</html>

Этот шаблон определяет базовую структуру нашего сайта. Важная деталь в нем это конструкция {% block <имя-блока>%} {% endblock %}. Во всех шаблонах-наследниках на место нее подставятся блоки с тем же именем из них.

Добавим новый шаблон-наследник:

<!-- courses/index.html -->

{% extends "courses/layout.html" %}

<!-- этот блок заменит блок title из родительского шаблона -->
{% block title %}Курсы{% endblock %}

<!-- этот блок заменит блок content из родительского шаблона -->
{% block content %}
<table>
     {% for course in courses %}
     <tr>
       <td>
           {{ course.id }}
       </td>
       <td>
           {{ course.name }}
       </td>
     </tr>
     {% endfor %}
 </table>
{% endblock %}

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

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

В итоге, шаблон-наследник отрендерится так:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Курсы</title>
</head>
<body>
<div id="sidebar">
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/courses/">Курсы</a></li>
        </ul>
</div>
<div id="content">
<table>
     <tr>
       <td>
            42
       </td>
       <td>
           Курс по Flask
       </td>
     </tr>
 </table>
</div>
</body>
</html>

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

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

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

Рекомендуемые программы

Навигация
Теория
Тесты