Djangoでテンプレートを拡張する（HTMLの情報を受け継ぐ）

なお、本記事は下記を前提としています。
ビューの書き方がわからない、URLの設定方法がわからない方は先に下記のページを復習してください。

[kanren id=”66″ target=”_blank” rel=”noopener noreferrer”]

ベースとなるテンプレートを継承して拡張する

Djangoではヘッダーやフッターなどの繰り返し使うパーツを再利用できます。

サンプルを作ってみましょう。
ベースとなるHTMLをtemplates/base.htmlに作成します。

base.htmlに書いた内容は、{% extends 'base.html' %}で読み込むことができます。

base.htmlは以下のようにマークアップしてください。

<header><h1>This is Base HTML!</h1></header>

{% block content %}
{% endblock content %}

base.htmlに書いた内容を別のHTMLファイルに反映します。
base.htmlと同じtemplatesディレクトリにextends.htmlを作りましょう。

extends.htmlには以下のように書いてみます。

{% extends 'base.html' %}

{% block content %}
<h1>Extends Page</h1>
{% endblock content %}

では、このextends.htmlをブラウザに表示させてみましょう。

base.htmlの内容が反映されていることがわかります。

ここで使われたDjangoのタグの意味をおさらいしましょう。

{% extends 'base.html' %}	テンプレートエンジンに対して、自分自身が他のテンプレートを拡張 (extend) していることを教える
{% block content %}〜{% endblock content %}	テンプレー ト中のタグで囲まれた部分を子テンプレートでオーバライドできることをテンプレー トエンジンに知らせる

{% block content %}としていますが、これは{% block header %}や{% block sidebar %}のように使うこともできます。

block〜endblockで囲まれた部分は、子テンプレートで上書きすることができます。

[sanko href=”https://djangoproject.jp/doc/ja/1.0/topics/templates.html” title=”Django テンプレート言語” site=”Django v1.0 documentation”]