目次
親になる共通テンプレートの書き方
複数画面で構成されるシステムの場合、、同じ記述の繰り返しを防ぐため、各画面に共通のHTMLと個別画面で異なるHTMLを分離して、共通部分を再利用できるようにしておく必要があります。
Djangoではテンプレートを各画面で共有することで実現できます。
Djangoのテンプレートを共有するためのHTMLの書き方は、
- 親のHTML側で処理を差し込むブロックを書く。
- 子のHTML側でそのブロックの中に差し込む処理だけを書く。
ことになります。
親のHTML側の記述サンプル
処理を差し込むブロックを{% block xxxxx %}{% endblock %}で書きます。
今回用意するblockは３つです。
header要素を差し込むブロック
{% block header %}{% endblock %}
titleのブロック
{% block title %}{% endblock %}
bodyのブロック
{% block content %}{% endblock %}
です。
base.htmlのソースコード
{% load static %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="jp">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1.1.2/new.min.css" />
{% block header %} {% endblock %}
<title>{% block title %}デモ用テンプレート{% endblock %}</title>
</head>
<body>
<h3>これは共通フォーマットのタイトルです</h3>
<table>
{% block content %}
{% endblock %}
</table>
</body>
</html>
ブロックの中に差し込む子HTML側サンプル
共通テンプレートができたので、今度はそれを利用する側をやっていきます。
親側で定義した３つのブロック
- {% block header %}{% endblock %}
- {% block title %}{% endblock %}
- {% block content %}{% endblock %}
の間に流し込む処理だけを記述していきます。
例えば、以下のような感じです。
{% extends 'base.html' %}
{% load static %}
{% load widget_tweaks %}
{% block header %}
<meta name="dummy" />
{% endblock %}
{% block title %} やあ。こんにちは。
{% endblock %}
{% block content %}
<tr>
<td colspan="2"><img src="{% static "images/k.png" %}" /></td>
</tr>
<form action="" method="post">
{% csrf_token %}
<h1>ビルトインフォームサンプル</h1>
{% if ret %} {% for key,val in results.items %}
<tr>
<td><h4>{{ key }}</h4></td>
<td><h4>{{ val }}</h4></td>
</tr>
{% endfor %} {% else %} {% for key,val in errors.items %}
<tr>
<td>
<h2>{{ key }} : {{ val }}</h2>
</td>
</tr>
{% endfor %} {% for field in form %}
<tr>
<td><h4>{{ field.label_tag }}</h4></td>
<td>{{ field|add_class:"form-control font-weight-bold" }}</td>
</tr>
{% endfor %}
<tr>
<td colspan="2">
<button type="submit" class="btn btn-primary">送信する</button>
</td>
</tr>
{% endif %}
</form>
{% endblock %}
最初にbase.htmlを読み込んでます。
{% extends 'base.html' %}
あとは、各ブロック内にはめ込む処理だけ書いているのが、みてもらえると思います。
実行イメージ
これを実行すると。
Base.htmlの枠の中に、exsample.htmlの画面が収まってます。
OKですね。
補足：今回の説明の前提
django3はインストール・設定されているものとします。
以下の記事の通りstaticフォルダも設定済とします。
HTMLタグのみ、クラス指定が不要（クラスレス）なCSSフレームワークです。
子HTML側のサンプルは、こちらの記事の入力画面がベースです。
ではでは。
