flaskでcss、jsを反映させる設定方法
こんにちわ
がじぇったー (@hackmylife7) | Twitter
です。
ググってもflaskの記事がそんなにないので、
書き溜めておこうと思います。
このへんRailsは記事がいっぱいあっていいですよね。
Djangoは個人開発にはtoo muchなところがあるのでflask好きです。
ディレクトリ構成
ディレクトリ構成です。
cssディレクトリとjsファイルを配置するscriptsディレクトリを作成します。
cssはなんでも良いのですが、自分はflatUIがすきなので、flat-ui-proというbootstrapを使っています。
ディレクトリ作成後、cssファイルとjsファイルを配置します。
❯ tree -L 3
.
├── main.py
├── static
│ ├── css
│ │ └── flat-ui-pro.css
│ ├── scripts
│ └── flat-ui-pro.js
└── templates
├── base.html
└── index.html
main.py
単純にindex.htmlを返す関数を定義します。
from flask import *
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def main():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True, host='0.0.0.0', port=8888, threaded=True)
index.html
templates配下のindex.html
base.htmlを親テンプレートと定義し、body部分のみ定義します。
{% extends 'base.html' %}
{% block content %}
<!-- templates/index.html -->
<body>
<h1>hello world</h1>
</body>
</html>
{% endblock content %}
base.html
index.htmlの親テンプレートです。継承元になります。
こちらに、static配下のcssとjsを読み込む設定を記載ことにより、
htmlを表示した際に、cssとjsを反映させることができます。
{% block content %}~~~{% endblock %}の間にindex.htmlに記載した内容が入り、プラウザ上で表示されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/flat-ui-pro.css') }}">
<title>Sample</title>
</head>
{% block content %}
{% endblock %}
<script type="text/javascript" src="{{ url_for('static', filename='scripts/application.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/flat-ui-pro.js') }}"></script>
</html>
