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

Самая мощная часть 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–2022 Pallets
Licensed under the BSD 3-clause License.
https://flask.palletsprojects.com/en/2.3.x/patterns/templateinheritance/