テンプレートの継承では、個別ページが共有するテンプレートを継承元の親テンプレートとした。一方、HTMLの一部を部品化して任意のページに埋め込むにはincludeタグを使う。
たとえば検索フォームを作成して、これを複数のページで使い回したいとする。例として以下のようなダミーのHTMLを準備する。
|
1 2 3 |
div> <p>検索用のフォーム</p> </div> |
テンプレートの継承で使った以下のテンプレートを考える。includeタグで挿入するHTMLのパスを指定している。パスの指定の仕方は他のタグと同じ相対パス。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{% extends 'inheritance/authenticated.html' %} {% block title %}ようこそ{% endblock %} {% block content %} <h1>ユーザーホームページ</h1> <p>ログイン済みユーザー用の内容</p> {% include 'inheritance/search.html' %} {% endblock %} |
このページを呼び出すと、以下のようにincludeタグの部分に検索フォームのHTMLが埋め込まれる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ようこそ</title> </head> <body> <p>ユーザー用メニュー</p> <ul> <li>ユーザーホーム</li> <li>ログアウト</li> </ul> <p>ユーザーホームページ</p> <p>ログイン済みユーザー用の内容</p> <div> <p>検索用のフォーム</p> </div> </body> </html> |
表示は以下の通りで、検索フォームの部分が表示されている。
ユーザー用メニュー
- ユーザーホーム
- ログアウト
ユーザーホームページ
ログイン済みユーザー用の内容
検索用のフォーム