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

Pythonと「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)を複数のページで使いまわすことができ、
新規で作成するページの記述はコンテンツ部分だけで済むため管理が楽になります。

関連ページ

【Flask超入門】簡単かつ効率的にWebアプリを作ろう
PythonモジュールFlaskの使い方、Webアプリケーションを作る方法について入門者向けにまとめました。

コメント