Django

Djangoのテンプレートで静的ファイル（staticファイル）を読み込む方法

 

Djangoで静的ファイルを読み込む方法について説明します。

「static」ディレクトリにCSSファイルやJavaScriptファイルを格納し、それをDjango Templateで読み込むイメージです。

作業手順は以下のとおりです。

[list class=”ol-circle li-accentbdr acc-bc-before”]

  1. staticディレクトリを作成し、CSSを格納する
  2. settings.pyに「STATICFILES_DIRS」変数を追加する
  3. {% static 'css/base.css' %}でCSSファイルを読み込む

[/list]

staticディレクトリを作成する

プロジェクトのルートディレクトリにstaticディレクトリ、static/cssディレクトリを作成します。

static/cssディレクトリの下にbase.cssを作成しましょう。

header h1 a {
  color: red;
}

このbase.cssをDjangoのテンプレートで読み込みます。
どのようなタグを書けば読み込めるのかを紹介していきます。

settings.pyに「STATICFILES_DIRS」変数を追加する

タグを通してCSSファイルを読み込むために、プロジェクトのsettings.pyを編集します。

「プロジェクト」というのは、

django-admin startproject hogehoge_project .

のコマンドで生成したものを指します。

hogehoge_project/settings.pyの一番下に「STATIC_URL = ‘/static/’」があると思いますが、その下に「STATICFILES_DIRS」変数を追加します。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]  # 追加したもの

CSSファイルを読み込む

上記の手順でstaticファイルを読み込む準備はできました。
HTMLファイルで読み込んでみましょう。

HTMLファイルの一番上に{% load static %}を書いて、staticタグを読み込みます。

そうすると、staticタグで読み込めます。

<link href="{% static 'css/base.css' %}" rel="stylesheet">

HTML全体では以下のようなイメージです。

{% load static %}
<html>
  <head>
    <title>Django Easy Blog</title>
    <link href="{% static 'css/base.css' %}" rel="stylesheet">
  </head>
  <body>
    <header>
      <h1><a href="{% url 'home' %}">Django Easy blog</a></h1>
    </header>
    <div>
      {% block content %}
      {% endblock content %}
    </div>
  </body>
</html>

これでCSSファイルを読み込んでテンプレートのHTMLに反映させることができました。

RELATED POST