概要
- djangoの魅力の一つとも言われている、テンプレート拡張について簡単に説明。
-
{% block %}, {% endblock %}タグとは？ -
{% extends 'base.html' %}タグとは？ - 実際に事例を作って検証してみる
- 補足①：子テンプレートを
{% block title %}{% endblock %}とした場合は？ - 補足②：
blockのあとって決まっているのか？何でもいいのか？
-
{% block %}, {% endblock %}タグとは？
- {% block %}, {% endblock %}は領域を確保するタグ
- 使い方としては、以下の通り
- 親テンプレートにHTMLで指定したものをデフォルト値として利用できる
- 子テンプレートのHTMLで指定したものを、デフォルト値に置き換えて（オーバーライドして）利用できる
- 上記の「デフォルト値」に付随して、
{% extends 'base.html' %}タグを次に紹介する
{% extends 'base.html' %}タグとは？
- 意味としては「base.htmlの内容をベースに拡張(extend)します」というイメージです。
- これを、親テンプレートとしてbase.htmlを継承するといい、「継承関係」を作ることができます。
実際に事例を作って検証してみる
- 以下では、親テンプレートをbase、子テンプレートをexampleとしました。
polls/base.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{% block title %}親テンプレートのタイトル{% endblock %}</title>
</head>
<body>
<div class="row">
{% block content %}
{% endblock %}
</div>
</body>
</html>
polls/example.html
{% extends 'polls/base.html' %}
{% block title %}子テンプレートのタイトル{% endblock %}
{% block content %}
<p>block contentをオーバーライドできます</p>
{% endblock %}
- 上記の通り、子テンプレートである
example.htmlの{% block content %}ブロックの中身に記入したものが、デフォルト値に置き換えられます。
補足①：子テンプレートを{% block title %}{% endblock %}とした場合は？
-
polls/example.htmlを{% block title %}{% endblock %}としても、親テンプレートの{% block title %}が反映されるわけではありません。この場合は、localhostなどのサーバー名がタイトルにやってきますのでご注意。ブロックの中身を消したつもりでも、ブロックのHTMLが残っているとこのような現象が発生してしまいます。
polls/example.html
{% extends 'polls/base.html' %}
{% block title %}{% endblock %} # この状態では、タイトルはlocaｌhostなどになります
{% block content %}
<p>block contentをオーバーライドできます</p>
{% endblock %}
- 親テンプレートのタイトルにしたい場合は、以下のようにタグを消す必要があります。
polls/example.html
{% extends 'polls/base.html' %}
# block titleを消すことで、親テンプレートに記載されたタイトルが子テンプレートに適用されます
{% block content %}
<p>block contentをオーバーライドできます</p>
{% endblock %}
補足②：blockのあとって決まっているのか？何でもいいのか？
- 上記の例ではわかりやすいように
{% block title %}としていますが、blockに続く名前はなんでも大丈夫です。 - 例えば、
{% block titleaaaa %}としても、子テンプレートでも{% block titleaaaa %}と名前を一致させれば問題ありません。ただ、人に読んでもらうことを前提とするならば、ここはわかりやすい名前にするのが良いでしょう。なので、一般的には、タイトルの場合は、{% block title %}とすることが多いのかと思います。