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

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