Flaskでのテンプレートの継承のやり方についてまとめました～block, extends～

Flaskのテンプレートでも別のテンプレートを継承することができる。
テンプレートを継承することで、共通の機能（bootstrap, jqueryなどライブラリの読込み、その他）を1つのファイルに記述して共有することができる。
また、継承元で記述した内容を各継承先が利用することもできる（後述）

テンプレートの継承を用いる。

テンプレートでの継承は、以下のようにする。

・継承元

{% block 名前 %}
:
{% endblock %}

・継承先

{% extends 継承元のファイル名 %}
{% block 名前 %}
: # 継承元の内容を再定義しなおす
{% endblock %}

また、継承元の{% block 名前 %} ～ {% endblock %}間で記述した内容を継承先でも利用することができて、それには、{{ super() }} を用いればよい。
以下、テンプレートの継承の具体例を記述した。

Example

テンプレートの継承元(base.html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{% block title %}MyPage{% endblock %}</title> <-- 継承先で定義したい内容は、block ○○ ～ endblockとする -->
    </head>
    <body>
        <header>
            <p>ヘッダー</p>
        </header>
        {% block content %} <-- 継承先で定義したい内容は、block ○○ ～ endblockとする -->
        {% endblock %}
    </body>
</html>

テンプレートの継承先(home.html)

{% extends "base.html" %} 
{% block title %}Home - {{ super() }}{% endblock %}
{% block content %} 
<h1>ホーム</h1>
{% endblock %}

このように、継承すると、親の定義をそのまま使いまわし、加えたい部分だけ加えることができる。
ちなみに、上のhome.htmlを実際に表示して、htmlを表示すると以下のようになる。

home.htmlのHTMLコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Home - MyPage</title>
    </head>
    <body>
        <header>
            <p>ヘッダー</p>
        </header>
        <h1>ホーム</h1>
    </body>
</html>

ファイルの階層構造

画面の表示結果

« Previous

テンプレートのfor, if, コメント文

テンプレートのフィルター

Flask入門記事一覧はこちら