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

Самая мощная часть Jinja — наследование шаблонов. Наследование шаблонов позволяет создать базовый «каркас» шаблона, содержащий все общие элементы вашего сайта, и определить блоки, которые дочерние шаблоны могут переопределить.

Звучит сложно, но на самом деле очень просто. Лучше всего понять это на примере.

Базовый шаблон

Этот шаблон, который мы назовём layout.html, определяет простой HTML-каркас документа, который можно использовать для простой страницы с двумя колонками. Задача «дочерних» шаблонов — заполнить пустые блоки содержимым:

<!doctype html>
<html>
  <head>
    {% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
  </head>
  <body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
      {% block footer %}
      &copy; Copyright 2010 by <a href="http://domain.invalid/">you</a>.
      {% endblock %}
    </div>
  </body>
</html>

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

Дочерний шаблон

Дочерний шаблон может выглядеть так:

{% extends "layout.html" %}
{% block title %}Index{% endblock %}
{% block head %}
  {{ super() }}
  <style type="text/css">
    .important { color: #336699; }
  </style>
{% endblock %}
{% block content %}
  <h1>Index</h1>
  <p class="important">
    Welcome on my awesome homepage.
{% endblock %}

Тег {% extends %} здесь ключевой. Он сообщает движку шаблонов, что этот шаблон «расширяет» другой шаблон. Когда система шаблонов обрабатывает этот шаблон, сначала она находит родительский шаблон. Тег extends должен быть первым тегом в шаблоне. Для отображения содержимого блока, определённого в родительском шаблоне, используйте {{ super() }}.

© 2010 Pallets
Licensed under the BSD 3-clause License.
https://flask.palletsprojects.com/en/stable/patterns/templateinheritance/