Djangoテンプレートで継承を利用して各ページ共通のヘッダーやフッターを設定する

Django フレームワークのテンプレートの継承について、基本的な内容です。

base.html というファイルを作って、共通部分をまとめる話。

検索用に記事をまとめておきます。

※この記事は力強くアウトプットする日の 20240301 のアウトプットです。

テンプレートの継承

Djangoのドキュメントに例と説明があります。

テンプレートの継承 - Djangoドキュメント

Djangoのテンプレートには『継承』という仕組みがあります。

どのようなときに利用するか

HTMLでウェブサイトを作る場合、複数のページでヘッダー部とフッター部を共通にすることがよくあります。また、サイドバー、レイアウトなど、複数ページに渡って共通の構造とするパターンがとても多いです。

こうした構造のときにテンプレート継承がうまくハマります。

例

base.html:

<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
{% block content %}{% endblock %}
<script>
// 全ページ共通で差し込むJavaScript
</script>
</body>
</html>

test.html:

{% extends "base.html" %}

{% block title %}テストページ{% endblock %}

{% block content %}
<p>
  bodyタグ内のコンテンツ
</p>
{% endblock %}

views.py:

from django.shortcuts import render

def test(request): 
    return render(request, "test.html")

レンダリング結果

<html>
<head>
<meta charset="utf-8">
<title>テストページ</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<p>
  bodyタグ内のコンテンツ
</p>

<script>
// 全ページ共通で差し込むJavaScript
</script>
</body>
</html>

テンプレート継承の利点

extendsタグで検証したテンプレートファイルでは、継承元のblockのうち、 変更したい部分 だけを記載することができます。継承元のテンプレートに変更可能なblockがたくさんあっても場合、必要な部分だけ書けばいいので、記述量の削減につながります。

比較対象として、 includeタグがあります。 includeタグは、指定したテンプレートファイルの内容を、includeタグの記載位置に取り込みます。

includeの場合、この図の例のようにヘッダーとフッターが別のファイルに分離されます。HTMLの場合、 <html> や <body> も共通部に書きたい場合が多いと思いますが、閉じタグの対応が別々のファイルに含まれるのは見通しが良くないです。

また、includeだけで組み立てる場合は、includeタグを記述しないと対象のテンプレートが取り込まれないので、変更が少ししかないページでも記述量が多くなりがちです。