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

Самая мощная часть 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() }}.

© 2007–2020 Pallets
Licensed under the BSD 3-clause License.
https://flask.palletsprojects.com/en/0.12.x/patterns/templateinheritance/