がじぇったー

お金と電化製品とプログラミングの部屋

flaskでcss、jsを反映させる設定方法

こんにちわ

がじぇったー (@hackmylife7) | Twitter


です。


ググってもflaskの記事がそんなにないので、
書き溜めておこうと思います。
このへんRailsは記事がいっぱいあっていいですよね。

Djangoは個人開発にはtoo muchなところがあるのでflask好きです。



TL;DR(要約)

  • staticディレクトリを作成し、配下にcssとjsのディレクトリを作り、css、jsファイルをそれぞれ配置する
  • htmlの継承元に読み込む設定を記載する

ディレクトリ構成

ディレクトリ構成です。
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>