共通で使用するCSS、JS が存在しページ毎の CSS 、JS を構成しなければならず
複数ページを大量に構築する場合の、Flask Blueprintを使用する方法
注意すべきは、
・Flask で指定したテンプレートフォルダに、Blueprint でテンプレート走査するフォルダを
追加はできるが、実行する Blueprint で１つに限定はできないことである。
→ １つに限定されてしまうと、共通のレイアウトHTML 、各個別のレイアウトHTMLを同じ
名称にすると、ぶつかってしまう。
これ以外は以下サンプルが示すように、共通のCSS, JS ページ毎の CSS 、JS を配置
をすることができる。
サンプルは、共通 common の レイアウト、CSS、JS に対して、
page1、page2、。。。と増えていくサンプルである。
page1 の views.py
# -*- coding: utf-8 -*- # page1/views.py from flask import Blueprint, render_template # page1のBlueprint page1 = Blueprint('page1', __name__, url_prefix='/page1', template_folder='templates', static_url_path='/static', static_folder='./static') @page1.route('/') def page1_a(): info = 'Blueprint テスト' return render_template("index1.html", title='page1 タイトル', info=info)
page2 の views.py も同様に作成する
template_folder は、import os をして
template_folder=os.path.join(os.path.dirname(__file__), 'templates')
と書いても同じである。
Webを起動する app.py
# -*- coding: utf-8 -*- # app.py import os from flask import Flask from page1.views import page1 from page2.views import page2 tempfolder = os.path.join(os.path.dirname(__file__), 'common', 'layout') app = Flask(__name__, template_folder=tempfolder, static_folder='common') app.register_blueprint(page1) app.register_blueprint(page2) if __name__ == '__main__': app.run(host='localhost', port=80, debug=True)
共通の static フォルダ、common から 共通テンプレートを置いた layout フォルダを指定し
page1 、page2 を生成して Blueprint ととして登録している。
この時、page1 、page2で指定したテンプレートフォルダが走査対象として登録されるのであり、
page1 の下の templates 配下の HTMLファイル名称と
page2 の下の templates 配下の HTMLファイル名称を同じにするとぶつかってしまう。
layout.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="{{url_for('static', filename='css/common.css')}}" rel="stylesheet" type="text/css"/> <title>{{title}}</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://momentjs.com/downloads/moment-with-locales.js"></script> <script type="text/javascript" src="{{url_for('static', filename='js/jholiday.js')}}"></script> {% block head %} {% endblock %} </head> <body> {% block content %} {% endblock %} </body> </html>
url_for() で、'static' を参照、filename が指す CSS or JS を読み込むように指定している。
{% block head %} で、ページ側で、HTMLヘッダで追加するもの
{% block content %} で、HTML body を書かせるようにしている
index1.html
{% extends "layout.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="{{url_for('static', filename='css/ui_datepicker_holiday.css')}}" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="static/css/page1.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="static/js/page1.js"></script>
{% endblock %}
{% block content %}
<h2>Hello</h2>
Hello Page : {{info}}
<form>
<table>
<tr>
<td>Date</td><td><input id="datepicker" type="text" name="date" readonly="readonly"></td>
<td><button id="check" type="button">check</button></td>
<td id="week"></td><td id="desc"></td>
</tr>
</table>
</form>
:::::::::::::::
省略
:::::::::::::::
{% endblock %}
個別ページのHTMLで共通に配置した CSS、JS を読み込む場合は、
url_for() で 'static' をキーに filename で指定する
