Python + Djangoで外部CSS,JSを使用する

8393 ワード
Django2.0 python3.6 python3.6 テキストリンク

DjangoのTemplateで、外部ファイルを使用するサンプルです。参照できるまで苦労したのでメモしておきます

アプリケーションは「useexternal」とします

1.環境

  • windows10 home 64bit
  • Python 3.6.5
  • Django==2.0.4

・サンプルアプリケーションの作成
コマンドプロンプトで仮想環境(venv)をactivateして、アプリケーションを作成します。

c:\data\python\venv>Scripts\activate
(venv) c:\data\python\mysite>django-admin startapp useexternal

実行後は以下のファイル構成になっています。

C:\DATA\PYTHON\MYSITE
│  db.sqlite3
│  manage.py
├─mysite
│  │  settings.py
│  │  urls.py
├─static
│  ├─css
│  │      bootstrap.min.css
│  ├─js
│  │      jquery-3.3.1.min.js
├─templates
│  └─useexternal
│          index.html
└─useexternal
    │  urls.py
    │  views.py

※編集するファイルのみ記載しています。

2.mysite/settings.py

settings.py
・・・
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'useexternal',
]
・・・
TEMPLATES = [
    {
        'DIRS': [
            os.path.join(BASE_DIR, 'templates'),
        ],
            ],
        },
    },
]
・・・

STATIC_URL = '/static/'

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

Point
- INSTALLED_APPSに作成するアプリ名「useexternal」を追加
- TEMPLATES DIRSは「os.path.join(BASE_DIR, "templates")」とする
- STATICFILES_DIRSは「os.path.join(BASE_DIR, "static")」とする

3.mysite/urls.py

urls.py
from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^useexternal/', include('useexternal.urls')),
    url(r'^admin/', admin.site.urls),
]

Point
urlpatterns に「url(r'^useexternal/', include('useexternal.urls')),」を追加します

4.useexternal/urls.py
urls.pyは、ファイルを作成して以下のように編集します

urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
    url('', views.index, name='useexternal'),
]

5.useexternal/views.py

from django.shortcuts import render
def index(request):
    return render(request, 'useexternal/index.html')

6.templates/useexternal/index.html
Templateとするhtmlは、templates/「appname」の下に作成します

index.html
{% load static %}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>外部css,jsを使用する</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

Point
- {% load static %}をつけます
- cssの外部ファイル名は<link href="{% static '<cssファイル名>' %}" rel="stylesheet">
とします

  • jsの外部ファイル名は<script type="text/javascript" src="{% static '<jsファイル名>' %}"></script>とします

7.css,jsの配置
staticフォルダの下にcss,jsを作成します

├─static
│ ├─css
│ │ bootstrap.min.css
│ ├─js
│ │ jquery-3.3.1.min.js

8.実行して確認してみます

問題ないようです。