この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:1
ページ更新者:T
更新日時:2019-05-22 01:46:08

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

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とする）

 

テンプレートの記述

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

<head>
        <!-- CSS -->
        <link href="{% static 'css/test.css' %}" rel="stylesheet">

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