ある程度複雑なアプリケーションでは複数のWebページを必要とするため、テンプレートファイルも複数用意することになります。これらをすべて直書きしていてはメンテナンスが大変ですが、Flaskのテンプレートエンジンでは共通部分を分割して管理することができます。
目次
共通テンプレートの作成
Webページのテンプレートにはヘッダー部分やナビゲーション、サイドバー、フッターなどすべてのページ、あるいは多くのページに共通する部分がいくつもあります。
これらの共通部分を分割して管理できれば、ヘッダー部分を少しだけ変えたい、といったメンテナンスが非常に楽になります。
実際にやってみましょう。
まずは templates フォルダにテンプレートファイル（index.html）をコピーした layout.html というファイルを作成します。
この layout.html を共通テンプレートにしましょう。
次のように記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Flaskを使ってみよう！</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
この block content の部分に別途作成した個別テンプレートの内容をはめ込むことができます。
共通テンプレートを呼び出し
次に個別テンプレート側に、共通テンプレートの内容を呼び出す処理を記述します。
index.html に次のように記述します。
{% extends "layout.html" %} <!-- 共通テンプレートの呼び出し -->
{% block content %}
<h1>トップページです</h1>
<p>なんとここはトップページなのです</p>
{% endblock %}
1行目の {% extends “layout.html” %} で共通テンプレート（layout.html）を呼び出しています。
そして3行目の block content から6行目の endblock で挟んだ部分が layout.html の block content と記述した部分で呼び出されます。
ではflaskコマンドを使ってアプリケーションを実行し、ブラウザで確認してみましょう。
トップページ（http://127.0.0.1:5000/）にアクセスします。
1つのファイルで管理していた時と同じように、テンプレートの中身が表示できています。
共通テンプレートの活用
ここまでだと1つのページしか作成していないので、テンプレートを分割するメリットがいまいちわかりません。
むしろファイルを2つ作らないといけないぶん面倒だと感じたかもしれません。
そこで共通テンプレートを活用してもう1つ個別テンプレートを作ってみましょう。
まずhello.py に次のように記述します。
from flask import Flask, render_template
app = Flask(__name__)
# ルートディレクトリのURLをトリガーに
@app.route("/")
def index():
# index.htmlファイルをテンプレートとして呼び出す
return render_template("index.html")
# /aboutのURL
@app.route("/about")
def about():
# about.htmlファイルをテンプレートとして呼び出す
return render_template("about.html")
/about のURLにアクセスした時に about.html 内容を出力するよう記述しました。
次に、/templates の下に about.html を作成しましょう。
次のように記述します。
{%extends "layout.html" %} <!-- 共通テンプレートの呼び出し -->
{% block content %}
<h1>About Us</h1>
<p>なんと我々についての紹介ページなのです</p>
{% endblock %}
こちらのページでも html の宣言をしたり、言語や文字コードの記述は同じなので、共通テンプレートを使いまわすことができます。
このように共通部分は {%extends “layout.html” %} の1行を書くだけでいいので、新しくページを作る際に簡単に使いまわせます。
もし共通部分を変更したくなった時も修正が必要になるのは layout.html ファイル1つだけなのでメンテナンスも簡単です。
flaskコマンドを使ってアプリケーションを実行し、ブラウザで確認してみましょう。
http://127.0.0.1:5000/about にアクセスします。
こちらも共通テンプレートの内容が使いまわされて問題なく表示されています。
