"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

共通テンプレートHTMLを共有し、各画面ではHTMLの差分のみ書く方法/django3

f:id:arakan_no_boku:20190320212948j:plain 

テンプレートを各画面で共有する方法です。

目次

 前提

django3はインストール・設定されているものとします。

arakan-pgm-ai.hatenablog.com

以下の記事の通りstaticフォルダも設定済とします。

arakan-pgm-ai.hatenablog.com 

サンプルに使うCSSライブラリについて 

CSSはnew.cssを使います。

HTMLタグのみ、クラス指定が不要(クラスレス)なCSSフレームワークです。

newcss.net

親になる共通テンプレートの書き方

Djangoのテンプレートは、あとで処理を差し込むブロックを{% block xxxxx %}{% endblock %}の形でHTML中におき、子のHTML側では、そのブロックの中に差し込む処理だけを書くことになります。 

複数画面で構成されるシステムの場合、各画面に共通のHTMLと個別画面で異なるHTMLを分離するのが普通なので、これは絶対使うやつだと思います。

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>

今回用意するblockは3つです。

header要素を差し込むブロック

{% block header %}{% endblock %}

titleのブロック

{% block title %}デモ用テンプレート{% endblock %} 

 bodyのブロック

{% block content %}{% endblock %}

です。

共通テンプレートを利用する子HTML側の書き方

共通テンプレートができたので、今度はそれを利用する側をやっていきます。

こちらの記事の入力画面をベースにします。

arakan-pgm-ai.hatenablog.com

exsample.htmlのみ以下のようにBase.htmlの各ブロックを使うように書き換えます。

{% 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' %}

あとは、各ブロック内にはめ込む処理だけ書いてます。

これを実行すると。

f:id:arakan_no_boku:20210504175215p:plain

Base.htmlの枠の中に、exsample.htmlの画面が収まってます。

OKですね。

ではでは。