html内でcss、JavaScriptを外部ファイルとして読み込む際、cssとJavaScriptは基本的にはstatic配下に配置するが、複数のcssやJavaScriptがある場合、static/css、static/jsのようなディレクトリ構成で整理したくなる。
url_forを使用することで、htmlファイルの配置場所を気にせずにcssとJavaScriptを参照できるようになる。
簡単なことだが、意外とハマってしまいがち。
スポンサーリンク
ディレクトリ構成
ディレクトリ構成は以下の通り。
appRoot
┣static
┃ ┣css
┃ ┃┣sample1.css
┃ ┃┗sample2.css
┃ ┗js
┃ ┣sample1.js
┃ ┗sample2.js
┣templates
┃ ┣auth
┃ ┃┗auth.html
┃ ┗sample
┃ ┣sample1.html
┃ ┗sample2.html
┣auth.py
┣sample1.py
┗sample2.py
authとsampleで機能的に分けて整理したい場合を例とする。
cssとJavaScriptの読込方法は以下の通り。
CSSとJavaScriptの読込
<!-- sample1.html -->
<!-- JavaScript読込 -->
<script type="text/javascript" src="{{ url_for('static', filename='js/sample1.js') }}">
<!-- #css読込 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/sample1.css') }}">
url_forの第一引数はstaticにすることに注意。
相対パスで直接コーディングすると、htmlファイルの場所を容易に変えられないが、url_forを使うとhtmlファイルの場所を気にする必要がなくなる。
スポンサーリンク
スポンサーリンク