テンプレート継承

サイトを作るとヘッダーやフッターなど複数のページで同様のコンポーネントを使いまわすことがほとんどだと思いますが、毎回同じものを書くのは大変ですしメンテナンスもやりにくくなります。

そこでjinja2ではテンプレートを継承することでコンポーネントを引き継ぐことができます。

# プロジェクト構成
project
  ├─ app.py        # flask起動スクリプト
  └─ templates     # htmlファイル置き場
　  ├─ layout.html  # テンプレートレイアウト
    └─ index.html  # トップページのhtmlファイル

こんな感じでlayout.htmlを用意してindex.htmlで引き継ぐようにします。

<!-- layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- titleブロック -->
    <title>{% block title %}{% endblock %}</title>

    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>

<!-- bodyブロック -->
{% block body %}{% endblock %}

<!-- Script -->
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- scriptブロック -->
{% block script %}{% endblock %}

</body>
</html>

いきなり全部書いてしまいましたが、{% block <name>}{% endblock}（には好きな値を入れられます）と書いている部分が継承先のhtmlで追記が可能な部分になり、それ以外がテンプレート部分になります。

これをindex.htmlで引き継ぐには、{% extends "layout.html" }という１行を挿入するだけです！！

<!-- index.html -->
<!-- layout.htmlの継承 -->
{% extends "layout.html" }

<!-- title -->
{% block title }
    Title
{% endblock }

<!-- body -->
{% block body }
    <!-- bodyを記述 -->
{% endblock }

<!-- script -->
{% block script }
    <!-- script を記述 -->
{% endblock }

こんな感じでlayout.htmlに記述したブロックに対応する部分を記述していくだけです。便利！！

変数受け渡し

jinja2を介することで双方向に変数を渡すことができますが、今回は python ⇨ html に限って説明。

# app.py

from flask import Flask, render_template

app = Flask(__name__)


@app.route("/")
def index():
    return render_template("index.html, message="test")


if __name__=="__main__":
    app.run(debug=True)

まずはpython側でrender_template()のキーワード引数としてhtml側に渡したいものを入力します。この時のキーワードがhtml側と連動します。

続いて受け取る側のindex.htmlでは、

<!-- 不要部分は省略 -->
{% block body}
    <p>{{ message }}</p>
{% endblock }

のように{{ <keyword> }}として受け取ることができます。

app.pyを実行して、messageが表示されていれば成功です。

まとめ

今回はFlaskに必須なjinja2について基本中の基本を書きました。

次回はFlaskから一旦離れて、arXivから論文情報を取得する部分について書いていく予定です！！

続き

nodaki.hatenablog.com

0.5から始める機械学習

Machine Learning, Deep Learning, Computer Vision に関する備忘録

Flaskとjinja2 ~ArXiv Bookmark開発記その2~

テンプレート継承

変数受け渡し

まとめ

続き