【Flask】テンプレートの継承とレイアウトファイル

この記事では、テンプレートの継承とレイアウトについて説明していきます。

Flaskの中にはテンプレートの継承するための機能が含まれており、これを使うとどのページも同じレイアウトで作成することができます。

ウェブサイトを見る上で、どのページも同じレイアウトで統一されていた方が見やすいですよね。

掲示板やブログなどのサイトを見るとどのページでも同じ構造、レイアウトが使用されている場合がほとんどだと思います。

そのためには、レイアウトファイルを作成しそれを継承することで実現できます。

スポンサーリンク

作ってみたもの

この記事では試しに以下のようなサイトを作ってみました。

  • 見出しは大きめの文字で緑色
  • メッセージは黒文字
  • ページの下部に青色で自分の名前を入れる

この特徴を継承して2枚のページを作ってみました。

1ページ目

2ページ目

このように最初のページと次のページで似たような構造になりました。

それでは具体的な作り方をみて行きましょう。

レイアウトファイルの作成

まずは骨組みとなるレイアウトファイルを作成します。

layout.html

{% block 名前 %}  {% endblock %} とすることで、この部分は継承先で中身を入れてねという意味になります。

この時点では何も値が入っていません。

たい焼き器を作るのをイメージすると分かりやすいと思います。

たい焼きを作る時には、

  • たい焼き器を買う、もしくは作る
  • たい焼き器に餡子や生地を入れて焼く

の2ステップが必要になります。レイアウトファイルの作成=たい焼き器を作ること、と同じ意味なんですね。

たい焼き器さえあれば生地や餡子を入れるだけで同じ形をした、たい焼きが量産できます。

テンプレートの継承=たい焼きの量産、と同じなんですね。

たい焼きの中身がいろいろ変えられるのと同様に、継承先で表示する内容を自由に変えることができます。

テンプレートの継承(1ページ目)

次にレイアウトファイルの継承方法について説明して行きます。

たい焼き器に具や生地を入れていくステップですね。

継承するにはファイルの先頭で宣言する必要があります。

{% extends "layout.html" %}と書くことで継承をすることを宣言します。

index.html

文字列が記載されている一方で、titleやmessageのように変数として書かれているものもあります。

実際の値はどこで定義しているのでしょうか。

それはPythonファイルの中で定義するようにしています。

app.py

これがtitleやmessageの中身です。

この部分を変更するだけで、レイアウトは同じで中身が違うページが量産できます。

レイアウトの継承(2ページ目)

同様に2ページ目も作成してみます。

新しくHTMLファイルを作成します。

next.html

中身は1ページのindex.htmlとほとんど同じですが、代入している中身が違います。

messageの他にdataという名前の変数を用意して表示してみることにします。

たい焼きの中にリンゴやバナナを入れてみるイメージです。

app.py

これで完成です。

いかがでしたでしょうか。

Flaskの機能の中でも、テンプレートの継承はよく使うので覚えておくと良いかと思います。

おわり。

参考