テンプレートの共通化と継承

継承する方法

・親テンプレートの書き方
子テンプレートに継承させたい部分を{% 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それぞれをブロックネームでしていすることで自動的に親テンプレートに継承されて表示される