6.

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

ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
人気パソコン・周辺機器はこちら

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 %}

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

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

 

人気パソコン・周辺機器はこちら
子ページ
子ページはありません
同階層のページ
  1. Templateの使用準備
  2. Templateの定義方法
  3. テンプレートの作成と共通化
  4. setting.pyにおけるテンプレートの設定
  5. テンプレートの名前の重複について
  6. 静的ファイルの読み込み
  7. if文
  8. テンプレートで定数を使用する方法
  9. aタグのhrefの記載方法

最近の質問

コメント一覧

コメントがありません

ログインしなければコメント投稿はできません。