概要
<header>や<footer>、jsやcssの参照先を定義した<link>や<script>をhtmlファイル単位で書いていたら保守性が低下する。
thymeleafの様にLayout Dialectで他のhtmlファイルを引用することはできないのか。
調べてみたところdjangoにはテンプレートの継承の概念があるのでこれを使うこととする。
Djangoのテンプレート(html)の共通化と継承について
htmlファイルの継承関係
参照元には共通化したhtmlタグを記載し、参照元によって切り替わる部分にはテンプレートタグ{% block <ブロック名> %}～{% endblock %}を挿入する
parent.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% block mainblock %}
(1)
{% endblock %}
</body>
</html>
参照先にはテンプレートタグ{% extends "htmlファイル名" %}を記述し、切り替える内容にテンプレートタグ{% block <ブロック名> %}～{% endblock %}を挿入する
extendsに指定するhtmlファイル名にはdjangoで作成されたtempleteディレクトリ配下からのフルパスを指定する。
child.html
<!DOCTYPE html>
{% extends "pull/parent.html" %} (2)
{% block mainblock %}
(3)
<div>
<span>hello python!!</span>
</div>
{% endblock %}
(1).参照先によって切り替えるエリア。blockは複数指定できる。
(2).参照するhtmlファイルを指定する。
(3).参照元に挿入したいエリアを書く。
レンタリング後
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<span>hello python!!</span>
</div>
</body>
</html>
感想
- thymeleafだと参照元のhtmlタグにて宣言が必要だが、djangoではその必要がない。参照先htmlで使用するテンプレートを指定するだけで、理解が浅い私にもわかりやすかった。
- 切り替えたい部分をテンプレートタグで囲むだけでよいのがとても分かりやすい。thymeleafでは切り替えたいhtmlタグに
layout:fragmentを書いて切り替えるので、埋め込み用のタグが必要。 - java育ちのため継承と聞くと拡張したくなる。継承テンプレートを継承したテンプレートを参照することができるのか、できるけどそんなことしてよいのか･･･。暇があるときにでも試してみる。