djangoでtemplatesディレクトリをプロジェクト直下に配置してみた

2021年1月14日

djangoでstaticディレクトリとtemplatesディレクトリをプロジェクト直下に配置してみた

staticとtemplatesをアプリ直下かプロジェクト直下で管理するかの二通りあるみたいです。今回はプロジェクト直下で管理する方法を書き残しておきたいと思います。

参考：Django、テンプレートファイルの探索順序について

階層

階層は下の通りです。


django_project
├── config
├── myapp
├── static
│   ├── css
│   │   └── style.css
│   └── js
│       └── main.js
└── templates # ←これ
    └── myapp
        ├── base.html
        └── index.html

設定

settings.pyで設定します。
下記の通りに設定することでtemplatesはプロジェクト直下にあると認識してくれるそうです。import osも忘れないようにしましょう。


# /home/web/django_project/config/settings.py
import os # 追記
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # 追記
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

ビューからテンプレートを呼び出す時は下の通りに記述します。


# /home/web/django_project/myapp/views.py
def display_index(request):
    return render(request, 'myapp/index.html')

テンプレート

共通テンプレートからjsやcssを読み込む時は下記の通りに記述します。


<!--/home/web/django_project/templates/myapp/base.html-->
{% load static %}
<!DOCTYPE html>
<html>

<head>
    <title>Django Practice</title>
</head>

<body>
    <h1>Django Practice</h1>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="{% static 'js/main.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</body>

</html>

上記で設定した共有テンプレートbase.htmlを読み込みます。


<!--/home/web/django_project/templates/myapp/index.html-->
{% extends 'myapp/base.html' %}
{% block content %}
<div id="app">
  <div>sample</div>
</div>
{% endblock %}

追記

ちなみにSTATICの設定は下の通り。


# /home/web/django_project/config/settings.py
import os
...
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), )

STATIC_URL = '/static/'
YouTube

2021年1月14日