共通のテンプレートを呼び出す #Python

はじめに

3つの記事で構成しています

同じプロジェクト内のアプリで共通のテンプレートを呼び出す方法
以下のような雛形をアプリ毎に変更を加えていく必要になるので一括管理がしたい

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

ビューを表示させるための準備

sampleproject/urls.py

from django.contrib import admin
from django.urls import path, include ←追加

urlpatterns = [
    path('sampleapp/', include('sampleapp.urls')),  ←追加
    path('admin/', admin.site.urls),
]

アプリディレクトリ内にurls.pyを追加する
touch sampleapp/urls.py

sampleapp/urls.py

from django.urls import path
from . import views

app_name = 'sampleapp'
urlpatterns = [
    path('', views.index, name='index'),
]

sampleapp/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'sampleapp/index.html')

app/templates/appの様に追加する
mkdir sampleapp/templates sampleapp/templates/sampleapp

sampleapp/templates/sampleapp/index.html

<h1>Hello, World!</h1>

ターミナルでpython manage.py runserver

ブラウザでhttp://127.0.0.1:8000/にアクセスします

無事「Hello, World!」と表示させることができました

ベースとなるhtmlファイルを作成する

プロジェクトディレクトリ直下にtemplatesを追加

mkdir templates

先ほど作成したtemplatesの中にbase.htmlを追加

touch templates/base.html

base.htmlを編集する

templates/base.html

{% load i18n static %}
<!DOCTYPE html>{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{% block title %}SampleProject{% endblock %}</title>
  </head>
  <body>
    <div class="container">
      {% block content %}
      {{ content }}
      {% endblock %}
      foo bar baz <!-- base.htmlが読み込まれたか確認 -->
    </div>
  </body>
</html>

settings.pyを編集する

settings.py

.
.
.
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',
            ],
        },
    },
]
.
.
.

index.htmlを編集する

sampleapp/templates/sampleapp/index.html

{% extends "base.html" %}
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}

確認

ブラウザをリロードしてみましょう

base.htmlに記述した「foo bar baz」が追加されている、title属性が確認できれば成功です

補足：title属性をページ毎に変更する

sampleapp/templates/sampleapp/index.html

{% extends "base.html" %}
{% block title %}Hello,World{% endblock %} ←注目
{% block content %}
<h1>Hello, World!</h1>
{% endblock %}