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

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

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

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

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

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

作ってみたもの

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

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

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

1ページ目

2ページ目

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

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

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

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

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{url_for('static',filename='style.css')}}">
</head>
<body>
    <h1>{% block headline1 %}{% endblock %}</h1>
    {% block content %}{% endblock %}
    <div class="footer">
        {% block footer %}{% endblock %}
    </div>
</body>
</html>

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

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

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

たい焼きを作る時には、

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

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

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

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

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

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

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

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

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

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

index.html

{% extends "layout.html" %}

{% block title %}
Index
{% endblock %}

{% block headline1 %}
{{title}}
{% endblock %}

{% block content %}
<p>{{ message }}</p>
{% endblock %}

{% block footer %}
copyrights 2019 Nokkun
{% endblock %}

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

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

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

app.py

@app.route("/", methods=["GET"])
def hello_world():
    return render_template("index.html",
                           title="レイアウトファイルを試してみるよ",
                           message="これはサンプルのページです。")

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

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

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

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

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

next.html

{% extends "layout.html" %}

{% block title %}
Next
{% endblock %}

{% block headline1 %}
{{title}}
{% endblock %}

{% block content %}
<p>{{ message }}</p>
<pre>{{ data }}</pre>
{% endblock %}

{% block footer %}
copyrights 2019 Nokkun
{% endblock %}

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

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

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

app.py

@app.route("/next", methods=["GET"])
def hello_next():
    return render_template("next.html",
                           title="レイアウトファイルを試してみるよ",
                           message="これは別ページのサンプルです。",
                           data=["apple","banana","cocoa"])

これで完成です。

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

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

おわり。

参考