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>
<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" %} <!-- base.htmlを継承して利用する -->
{% block title %}Home - {{ super() }}{% endblock %}<!-- {{ super() }}で親クラスの値(この場合MyPage)を表示できる -->
{% block content %} <!-- {% block content %} ~ {% endblock %}とすることで、親クラスの該当する部分を上書くことができる -->
<h1>ホーム</h1>
{% endblock %}
{% block title %}Home - {{ super() }}{% endblock %}<!-- {{ super() }}で親クラスの値(この場合MyPage)を表示できる -->
{% block content %} <!-- {% block content %} ~ {% endblock %}とすることで、親クラスの該当する部分を上書くことができる -->
<h1>ホーム</h1>
{% endblock %}
このように、継承すると、親の定義をそのまま使いまわし、加えたい部分だけ加えることができる。
ちなみに、上のhome.htmlを実際に表示して、htmlを表示すると以下のようになる。
- home.htmlのHTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Home - MyPage</title><!-- home.htmlの定義とbase.htmlを合わせている -->
</head>
<body>
<header>
<p>ヘッダー</p><!-- ここは、base.htmlの定義内容 -->
</header>
<h1>ホーム</h1><!-- home.htmlの定義内容 -->
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Home - MyPage</title><!-- home.htmlの定義とbase.htmlを合わせている -->
</head>
<body>
<header>
<p>ヘッダー</p><!-- ここは、base.htmlの定義内容 -->
</header>
<h1>ホーム</h1><!-- home.htmlの定義内容 -->
</body>
</html>
- ファイルの階層構造
- 画面の表示結果