Djangoの静的ファイルの配置先設定の仕方
以前の記事で、テンプレートフォルダの設定方法を記述した。
この記事では、静的ファイルを格納するディレクトリの設定方法を記載する。
静的ファイルは、css、js、などのコンテンツや、jpgなどのイメージファイルのことを言い、これらは、1つのディレクトリにまとめて管理するのが一般的である。
Djangoでは、この静的ファイルの配置先をsettings.py内に記述して設定する。
以下のように設定する。
プロジェクトフォルダ直下のsettings.pyのSTATIC_URL,STATICFILES_DIRSを記載する。
Example
- settings.py(settings.pyの詳細はこちらへ)
import os
STATIC_DIR = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/' # 静的ファイル配置先のディレクトリへのURL。http://ドメイン名:ポート名/static/フォルダ/ファイル名でアクセスできるようになる
STATICFILES_DIRS = [ # 静的ファイルの配置先。この例では、STATIC_DIR(BASE_DIR/static)が設定される。
STATIC_DIR,
]
(BASE_DIRについてはこちら)を参照ください
テンプレートのhtmlには以下のように、load staticと{% static 'ファイルのパス'%}を記載する。
（今回の例では、STATIC_DIRにimages,cssフォルダを作成し、それぞれに、testorig.jpg,style.cssを配置した）
- htmlファイル
{% load static %} <!-- settings.pyのstaticfileの設定を読み込む -->
<html>
<head>
<meta charset="utf-8">
<title>First App</title>
<link rel="stylesheet" href={% static "css/style.css" %}><!-- STATIC_DIR/css/style.cssを読み込む -->
</head>
<body>
<h1>Hello this is index.html</h1>
<img src="{% static "images/testorig.jpg" %}" alt="testorig.jpg"><!-- STATIC_DIR/images/testorig.jpgを読み込む -->
</body>
</html>
- style.css
color: red;
}
djangoを立ち上げて、URLにアクセスすると以下のような画面が表示される。
また、http://{URL}/static/images/testorig.jpgとしても、画像にアクセスし以下のように表示る。
STATICFILES_DIRSには、複数パスを設定することもできる。
- settings.py
STATIC_DIR,
'/tmp'
]
上の例だと、STATIC_DIRのほかに/tmpフォルダも静的ファイル格納先に指定している。以下の例では、/tmp/python.pngを配置した。
- index.html
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>First App</title>
<link rel="stylesheet" href={% static "css/style.css" %}>
</head>
<body>
<h1>Hello this is index.html</h1>
<img src="{% static "images/testorig.jpg" %}" alt="testorig.jpg">
<img src="{% static "python.png" %}" alt="python.png">
<!-- staticルートを検索して、/tmp/python.pngが表示される -->
</body>
</html>
画面は以下のように表示される。
ちなみに、STATICFILES_DIRSに複数パスを指定し、パス上に同名のファイルを配置すると、後で記載したほうのパス上のファイルが優先して表示される。