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

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

DjangoでView(ビュー)を作成して表示する

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

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で囲まれた部分は、子テンプレートで上書きすることができます。

参考 Django テンプレート言語Django v1.0 documentation

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です