Djangoのテンプレート(html)の一部を共通化して継承する方法(extends, block, endblock)

1 Djangoでテンプレートを共通化する方法

2 関連記事

Djangoでテンプレートを共通化する方法

一般的なサイトで、全ページ共通の部分がある場合（ヘッダー、jQuery等の読み込みなど）、ベースとなるファイルを用意して他のhtmlファイルはそのファイルを読み込むようにして利用する。

Djangoでも同様に全テンプレート共通の設定を記述したファイルを用意して、他のファイルはそのファイルを継承して、一部機能を共通化することができる

以下のように記述する

継承元（共通化する）テンプレート

{% block 〇〇 %}
{% endblock %}

継承先テンプレート

{% extends "app/継承元.html" %}
{% block 〇〇 %}
HTML
{% endblock %}

実際に例を見ていきます

templates/basicapp/base.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>
        {% block title_block %}
        
        {% endblock %}
        </title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
    </head>
    <body>
        <h1>Home Page</h1>
        <div class="container">
        {% block body_block %}
        
        {% endblock %}
        </div>
    </body>
</html>

継承先のファイルでは、extendsで継承し、上で定義したtitle_blockとbody_block内を実装する

継承先の実装１(templates/app/index.html)

<!DOCTYPE html>
{% extends "basicapp/base.html" %}
    {% block title_block %}
    INDEX
    {% endblock %}
    {% block body_block %}
<h1>Welcome</h1>
<h2>Hello World</h2>
    {% endblock %}

継承先の実装２(templates/app/other.html)

<!DOCTYPE html>
{% extends "basicapp/base.html" %}
    {% block title_block %}
    OTHER
    {% endblock %}
    {% block body_block %}
<h1>Welcome to other</h1>
    {% endblock %}

このようにファイルを一部共有して継承することで、全ファイルにbootstrapやjQueryの読み込んだり、ヘッダーやフッターを書く必要がなくなる

Djangoでテンプレートを共通化する方法

関連記事

Footer