【django】テンプレートの継承:block・extends・includeによる共通化

時計 2021.04.05 / 時計

【django】テンプレートの継承:block・extends・includeによる共通化

本記事では、djangoによるWebアプリケーションにおけるテンプレート継承(block・extends・includeによる共通化)について解説していきます。

Webアプリケーションやブログでは全ページを通して共通する部分があります。
この共通する部分をすべてのテンプレートに記入するのは面倒くさいですし、共通部分の一部を変更した場合、全テンプレートを一つ一つ修正するのは非常に時間がかかります。

Djangoには、すべてのテンプレートで共通する部分を一つのテンプレートに記入し、それをすべてのテンプレートで共通化する仕組みがあります。

全ページでヘッダーやメニュー、フッターは共通の場合が多いため、そういった部分を共通テンプレートにまとめます。

これをテンプレート継承(Template Inheritance)と呼びます。

本記事ではこのテンプレート継承の方法を詳しく解説していきます。

以下記事で作成したWebアプリケーションに「テンプレートの継承」を組み込んでいきます。

django WebアプリケーションのTOPページ

テンプレート継承

テンプレート継承とは

テンプレート継承とは、全ページで共通する部分を1つのテンプレートにまとめ、その他のテンプレートで共通部分に関しては、共通テンプレートを使用する仕組みです。

ヘッダーやメニューバー、フッター、jQueryなど共通する部分を共通テンプレートに記載します。

テンプレート継承を使うことで、以下のようなメリットがあります。

  • 共通部分の変更が容易になる
  • 全ページで共通のレイアウトになる(ミスがなくなる)
  • テンプレートの作成時間が短縮できる

テンプレート継承の方法

テンプレート継承では、まず共通部分を記入した共通テンプレートを作成します。
共通テンプレートはindex.htmlと同じ階層に作成しましょう。

共通テンプレートをここではbase.htmlという名前で作成します。

階層構造は次のようになります。

├── five
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── models.py
│   ├── static
│   │   └── five
│   │        └── common.css
│   ├── templates
│   │   └── five
│   │        ├── base.html    # 追加
│   │        └── index.html
│   └── views.py
├── manage.py
├── office
├── myvenv

共通テンプレートには、他テンプレートを埋め込むためのブロックを記入します。

共通テンプレートを継承するテンプレートでは、継承先のテンプレートを指定します。

それぞれのテンプレートの作成方法について次項から見ていきましょう。

共通テンプレート(親)の作成

base.html

共通テンプレート(親)は次のように記入します。

{% load static %}
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>OFFICE54</title>
    <link rel="stylesheet" href="{% static 'five/common.css' %}">
    <script src="https://kit.fontawesome.com/d86c726e71.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div>
            <p>OFFICE</p>
        </div>
    </header>

    <div id="wrapper">
      <nav id="nav-left">
        <div id="nav">
          <ul id="nav-ul">
            <li class="nav-li"><a href="{% url 'index' %}" class="nav-li-a"><i class="fa fa-tachometer" style="margin-right:15px"></i>Dashboard</a></li>
            <li class="nav-li"><a href="#" class="nav-li-a"><i class="fas fa-list" style="margin-right:15px"></i>App1</a></li>
          </ul>
        </div>
      </nav>
      <main id="main">
          {% block content %}
          {% endblock %}
      </main>
    </div>
</body>
</html>

このように全ページで共通して使用するヘッダーやサイドメニュー、フッターなどを共通テンプレートにまとめます。

blockタグ

共通テンプレートに埋め込むコンテンツは、以下のようにblockタグと終了タグendblockを使用します。

{% block content %}
{% endblock %}

blockに続く文字はブロック名です。

共通テンプレートでは、埋め込みたいコンテンツの数だけblockタグを置くことができます。

共通テンプレートを継承するテンプレート(子)の作成

index.html

共通テンプレートを継承するテンプレート(子)は以下のように記載します。

{% extends "five/base.html" %}
{% block content %}
<p>test</p>
{% endblock %}

各ページで異なるメイン部分をテンプレート(子)に記載して、それを共通テンプレートに埋め込むイメージです。

extendsタグ

共通テンプレートはextendsタグで指定します。

{% extends "five/base.html" %}

extendsタグのあとに、共通テンプレートに埋め込む部分をblockタグで囲み、埋め込みたい場所のブロック名を指定します。

テンプレートでのincludeタグ

includeタグとは

includeタグとは、特定のテンプレートを埋め込む際に使用します。

例えば、ログインページなどではサイドバーを表示したくない場合で、サイドバーだけのテンプレートを作成します。
そしてサイドバーを表示したいページでincludeタグを使用してサイドバーを埋め込みます。

{% include テンプレート名 %}

まとめ

本記事「【django】テンプレートの継承:block・extends・includeによる共通化」はいかがでしたか。

今回「静的ファイル(CSS、JavaScript、Image)の保存場所や設定について」で作成したWebアプリケーションにテンプレート継承を組み込みました。

今後ページを増やすとき、とても簡単にできるようになりましたよね。

テンプレート継承を使うことで、Webアプリケーションのメンテナンスやページ数を増やすことが容易になりますので、ぜひチェレンジしてください。