• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar

Tech Life

エンジニアの生き方を考えるメディア

  • プログラミング
    • Python入門
    • Flask入門
    • Django入門
  • 利用規約
  • プロフィール
You are here: Home / IT・プログラミング / Python / フレームワーク / Flask / Flaskでのテンプレートの継承のやり方についてまとめました~block, extends~

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

2020年12月18日 by 9nmatsumoto

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" %} <!-- base.htmlを継承して利用する -->
{% 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>

 

  • ファイルの階層構造

 

  • 画面の表示結果


« Previous

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

Next »

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


Flask入門記事一覧はこちら

Filed Under: Flask Tagged With: flask, python, テンプレート

Primary Sidebar

注目記事

プロのエンジニアが選ぶPython入門者、初心者向けの書籍10選
元SEが語る、システムエンジニア(SE)ってどんな仕事?きつくてつらいのか?
元SEが語る、システムエンジニアの良いところ

スポンサーリンク