【Python/Flask】テンプレートファイルの継承

Pythonと「Flask」でテンプレートファイルを継承を行う方法について入門者向けにまとめました。

Flaskにおけるテンプレートファイルの継承
サンプルコード
関連ページ

Flaskにおけるテンプレートファイルの継承

本ページの内容は以下動画で解説しています。

Flaskには、テンプレートファイルを継承する機能があります。
これを使うことで、効率よく同じレイアウトで複数のページを作成することができます。
掲示板やブログなどのサイトは、コンテンツ(記事や書き込み)以外は、同じ構造、レイアウトが使用されている場合が多いです。
そのため、各ページを個別に作成するよりも、テンプレートの継承を活用して、共通な部分は使い回すことで効率的にページを増やすことができます。

テンプレート継承を使うにあたって、親テンプレートと子テンプレートの違いを理解する必要があります。

親テンプレート(baseテンプレート)
- 各ページに共通する部分のテンプレート。
- 要はヘッダーやフッターなど、ページごとに異なるコンテンツ以外の部分。
子テンプレート
- コンテンツ部分のテンプレート。
- 要はブログの記事部分など、ページごとに異なるコンテンツの部分。

つまり、親テンプレートの内容を子テンプレートが継承して、1つのページを作成します。
テンプレートの継承は、以下のように記述するのが基本となります。

親テンプレート

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

子テンプレート

{% extends 継承元のファイル名 %}
{% block 名前 %}
:
{% endblock %}

サンプルコード

前回と同じく「トップページです」と表示するだけの簡単なWebアプリを、継承を使って作成した場合のサンプルコードは以下のとおりです。

ディレクトリ構成

root/
|__server.py
|__templates/
     |__index.html ←子テンプレートファイル
     |__base.html ←親テンプレートファイル

server.py

pythonファイル(app.runするもの)

templates/base.html

親テンプレートのHTMLファイル(共通化部分)

templates/index.html

子テンプレートのHTMLファイル(トップページのコンテンツ部分)

このように、継承を使うと、親テンプレートの内容(base.html)を複数のページで使いまわすことができ、
新規で作成するページの記述はコンテンツ部分だけで済むため管理が楽になります。