概要

<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育ちのため継承と聞くと拡張したくなる。継承テンプレートを継承したテンプレートを参照することができるのか、できるけどそんなことしてよいのか･･･。暇があるときにでも試してみる。

Djangoでレンタリングするhtmlを共通化する

概要

htmlファイルの継承関係

レンタリング後

感想