• en
  • Language: ru
  • Documentation version: 1.1.x

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

Наиболее мощной частью 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() }}.