Top / Programming / Python / Django TIPS / ページのレイアウトを設定する

ページのレイアウトを設定する

ページのヘッダやフッタなど、HTMLの大枠はサイト全体で共通ということはよくあります。

ヘッダやフッタなど共通の要素の入ったベースとなるテンプレートを作っておき、ページごとに異なる部分はベースとなるテンプレートを継承して、異なる部分を置き換えます。

ベースとなるテンプレートを作成します。

base.html

<html>
<head>
    <title>{% block title %}○×掲示板{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

子テンプレートで置き換える部分は、{% block … %}と{% endblock %}で挟んでおきます。

子テンプレートを作成します。

child.html

{% extends 'base.html' %}

{% block title %}
スレッド一覧
{% endblock %}

{% block content %}
<ul>
{% for thread in object_list %}
  <li><a href="/thread/{{ thread.id }}/">{{ thread.message }}</a></li>
{% endfor %}
</ul>
{% endblock %}

{% extends テンプレート名 %}で、ベースとなるテンプレートを指定します。

{% extends 'base.html' %}

ここでは、base.htmlを指定しています。

{% block ブロック名 %}〜{% endblock %}で、ブロックを置き換えます。

{% block title %}
スレッド一覧
{% endblock %}

ここでは、親テンプレートのtitleブロックを置き換えています。

置き換えられた結果、child.htmlは次のような内容になります。

<html>
<head>
    <title>
スレッド一覧
</title>
</head>
<body>

<ul>
{% for thread in object_list %}
  <li><a href="/thread/{{ thread.id }}/">{{ thread.message }}</a></li>
{% endfor %}
</ul>

</body>
</html>

更新履歴