テンプレートの継承

Jinjaの最も強力なところとしてテンプレートの継承が挙げられます。 テンプレートの継承はサイトの一般的な全ての要素を含む ベースとなるスケルトンのテンプレートを生成することができます。

複雑なように聞こえるかもしれませんがとても基本的なことです。 サンプルをやってみると理解するのは容易になります。

ベーステンプレート

This template, which we’ll call layout.html, defines a simple HTML skeleton document that you might use for a simple two-column page. It’s the job of “child” templates to fill the empty blocks with content:

<!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>

このサンプルで、 {% block %} タグは子テンプレートが挿入される4つのブロックを定義しています。 全ての 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() }} を使って下さい。

Table Of Contents

Related Topics

This Page