本記事について
UdemyでDjangoについて学習した結果のアウトプットページです。
前の記事の続きになります。
今回は、Djangoのテンプレートファイルの継承機能を使ってみようと思います。
#urls.py
今回はテンプレートファイルの継承機能の説明になるため、ulrs.pyは前回と同じです。
from django.urls import path
from . import views
app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
]
views.py
views.pyも前回と同じですが、念のためコードは下記になります。
from django.shortcuts import render
def index(request):
context = {
'names':['鈴木','佐藤','高橋'],
'message':'こんにちは。',
}
return render(request, 'myapp/index.html', context)
ベースとなるHTMLファイルを作る
継承元となるHTMLを作ります。
作成場所は、前回作ったindex.htmlの1個上のフォルダになります。
同じフォルダではないので注意してください。
作成出来たら以下のコードを記入します。
<html>
<head>
{% block title %}
<title>継承元ページ</title>
{% endblock %}
</head>
<body>
<h1>Django勉強ページです</h1>
<div>
{% block body %}
{% endblock %}
</div>
</body>
</html>
ポイントは2つ。
head部分に{% block title %}{% endblock %}を記入することと、
body部分に{% block body %}{% endblock %}と記入することです。
次は継承先となるindex.htmlを編集しましょう。
継承先テンプレートファイル(index.html)の編集
前回の記事でも作りましたが、ファイルの場所は下記になります。
ファイルを開いて、以下のように記述します。
{% extends "base.html" %}
{% block title %}
<title>Django勉強ページ</title>
{% endblock %}
{% block body %}
<p>{{ names.0 }}さん。{{ message }}</p>
<p>{{ names.1 }}さん。{{ message }}</p>
<p>{{ names.2 }}さん。{{ message }}</p>
<hr>
{% for name in names %}
<p>{{ name }}さん。{{ message }}</p>
{% endfor %}
{% endblock %}
コードの解説です。
まず、{% extends "base.html" %}で先ほど作成したテンプレートファイルを継承します。よくやるミスが間違った場所にbase.htmlを置いてしまいエラーになるケースです。
続いて、{% block title %}{% endblock %}の中にtitleタグを入れています。
これは、index.htmlページ独自のタイトルを入れる意味になります。
index.html以外にhtmlページを作成し、違うタイトルにしたい場合などに役に立ちます。
何も記入しないと、base.htmlにあるtitleが反映され「継承元ページ」と表示されます。
続いて、前回作成したbody部を丸ごと{% block body %}{% endblock %}で囲みます。
これもtitleと同じです。index.htmlページ独自のbodyを記述するという意味です。
その外にもよくやるのがナビ部分を継承させたり、フッター部分を継承させたりします。
継承機能を利用することで、ページの一部に変更があっても全体に反映がさせやすくなります。
Djangoには色々な機能がありますが、継承機能は必ず利用する機能だと思います。
動作確認
py manage.py runserverで開発用サーバーを起動し、動作確認します。
base.htmlにだけ記入した「Django勉強ページです」と記載され、
ページタイトルが「Django勉強ページ」と表示され、
body部が正常に表示できていれば成功です。
次の記事