Djangoでテンプレートを共通化する方法
一般的なサイトで、全ページ共通の部分がある場合（ヘッダー、jQuery等の読み込みなど）、ベースとなるファイルを用意して他のhtmlファイルはそのファイルを読み込むようにして利用する。
Djangoでも同様に全テンプレート共通の設定を記述したファイルを用意して、他のファイルはそのファイルを継承して、一部機能を共通化することができる
以下のように記述する
- 継承元（共通化する）テンプレート
{% block 〇〇 %}
{% endblock %}
{% endblock %}
- 継承先テンプレート
{% extends "app/継承元.html" %}
{% block 〇〇 %}
HTML
{% endblock %}
{% 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">
<!-- Bootstrapの読み込み -->
</head>
<body>
<h1>Home Page</h1>
<div class="container">
{% block body_block %}
<!-- この中は継承先で定義 -->
{% endblock %}
</div>
</body>
</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">
<!-- Bootstrapの読み込み -->
</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 %}
{% 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 %}
{% extends "basicapp/base.html" %}
{% block title_block %}
OTHER
{% endblock %}
{% block body_block %}
<h1>Welcome to other</h1>
{% endblock %}
このようにファイルを一部共有して継承することで、全ファイルにbootstrapやjQueryの読み込んだり、ヘッダーやフッターを書く必要がなくなる