タイトル: 静的ファイルの読み込み

SEOタイトル: djangoテンプレートでcssやjavascriptの静的ファイルを読み込む方法

この記事の要点
Django の静的ファイル (static) をプロジェクト単位で読み込む設定 `settings.py`: `STATIC_URL = '/static/'` + `STATICFILES_DIRS = [BASE_DIR / "static"]` テンプレートで `{% load static %}` → `{% static 'css/app.css' %}` で参照本番は `collectstatic` で `STATIC_ROOT` に集約

setting.py

setting.pyにて静的ファイルを読み込むURLと静的ファイルを格納するディレクトリを定義する。

以下の例ではURLはstatic始まり、ディレクトリはプロジェクト直下のstaticディレクトリを指定している。

STATIC_URL = '/static/'

STATICFILES_DIRS = (
[
os.path.join(BASE_DIR, "static"),
]
)

以下の様にプロジェクト直下にstaticディレクトリを作成して更にその中にcssおよびjsディレクトリを作成する。

プロジェクト名/
db.sqlite3
manage.py

プロジェクト名/
__init__.py
settings.py
urls.py
wsgi.py

アプリケーション名/
        __init__.py
        __pycache__/
        admin.py
        apps.py
        migrations/
        models.py
views.py

static/
css
js

cssおよびjsディレクトリの中に適当なファイルを設置する。（今回はtest.css, test.jsとする）

テンプレート側では以下のように記述することで静的ファイルを読み込むことが出来る。

{% load static %}

<script type="text/javascript" src="{% static 'js/test.js' %}"></script>
</head>