blockタグを利用すると、レイアウトの雛形となるテンプレートを作成し、各画面のテンプレートには具体的な内容を記述していく、といった構築をしていくことができます。
テンプレート自体の説明は下記関連ページをご覧下さい。
関連ページ
下記のイラストのような構成を考えます。まず親でありレイアウトの雛形となるlayout.htmlを作成します。そして、その子となるindex.htmlおよびhome.htmlを作成し、各自具体的な内容を記述していきます。
3つのテンプレートの階層は下記のようになっています。
|
1 2 3 4 5 6 7 |
├── hello_project ├── myapp │ ├── templates │ └── myapp │ └── home.html │ └── index.html │ └── layout.html |
layout.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block title %}親{% endblock %}</title> </head> <body> {% block content %} <p>親</p> {% endblock %} </body> </html> |
親となる雛形用のテンプレートです。{% block 名前 %}の名前に着目して下さい。titleとcontentの2つの領域を親側で用意し、子テンプレート側でその内容を埋めていきます。なおすでにblockタグ内には「親」という文字が記述してありますが、これらは子によってオーバライド（上書き）されます。
index.html
|
1 2 3 4 5 6 7 |
{% extends 'myapp/layout.html' %} {% block title %}インデックス{% endblock %} {% block content %} <p>インデックスコンテンツ</p> {% endblock %} |
1行目において、継承するテンプレート、すなわち親となるテンプレートを指定しています。またblockタグによって、titleおよびcontentの具体的な内容を記述しています。以上で親と子のテンプレートが合わさり下記のようなHTMLが生成されます。
ブラウザでの表示
home.html
|
1 2 3 4 5 6 7 |
{% extends 'myapp/layout.html' %} {% block title %}ホーム{% endblock %} {% block content %} <p>ホームコンテンツ</p> {% endblock %} |
index.htmlと同様です。もし3行目がまるごと存在しない場合は、親側（layout.html）で記述した「親」という文字がそのまま継承されます。
block.superタグで上書きさせない
上述までの説明では、親のテンプレートに対して子側から内容をすべて上書きしていくイメージでしたが、block.superタグを利用すると、親のテンプレートの内容をそのまま残すことができます。
仮にindex.htmlを下記のように編集して下さい（7行目を追加）。
|
1 2 3 4 5 6 7 8 |
{% extends 'myapp/layout.html' %} {% block title %}インデックス{% endblock %} {% block content %} <p>インデックスコンテンツ</p> {{ block.super }} {% endblock %} |
下記画像で確認できるように、親側のテンプレートの内容は上書されずにそのまま残すことができます。
参照ページ
django ドキュメント
The Django Template Language テンプレートの継承
