テンプレートの共通化と継承
継承する方法
・親テンプレートの書き方
子テンプレートに継承させたい部分を{% block title %}...{% endblock %} というように{% block block_name %}{% endblock %} というテンプレートタグを使って「継承先テンプレートではこの間の部分に他の子テンプレートのHTMLが入りますと指定できる。
block_name の部分は好きな名前(Pythonの変数名と同じく英数字とアンダースコア)が使えます。
そのブロックにどんな内容を期待するかに応じて命名しましょう
(たとえば title, header や content など)。
・子テンプレートの書き方
子テンプレートの一行目に{% extends "親のファイルpath" %}と記述して継承する
{% extends 'catalogue/base.html' %}
※block_nameの部分に自動的に適用される
親テンプレートコード例(base.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> ECサイト - {% block title %}{% endblock %}</title>
</head>
<body>
<a href="{% url 'product_list' %}">商品一覧</a>
<hr>
{% block content %}
{% endblock %}
</boby>
</html>
子テンプレートコード例(product_list.html)
{% extends "catalogue/base.html" %}
{% block title %}商品一覧{% endblock %}
{% block content %}
<ul>
{% for product in products %}
<li>({{ product.category.name }})<a href="{% url 'product_detail' product.id %}">{{ product.name }}</a>: {{ product.price }}円</li>
{% endfor %}
</ul>
{% endblock %}
※block title、block contentそれぞれをブロックネームでしていすることで自動的に親テンプレートに継承されて表示される