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の外部ファイル名は```
- 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.実行して確認してみます
問題ないようです。