今回はDjangoのテンプレートにて別のテンプレートファイルを読み込む方法について解説いたします。
テンプレートファイルを書くとき、一つのファイルにまとめてしまうとかなりの長さになってしまい読みづらいと思う人も多いと思いますので、可読性を上げるためにも別のテンプレートファイルを読み込む方法についていくつか解説いたします。
別のテンプレートファイルを読み込む方法
Django では別のテンプレートファイルを読み込みたいときは以下の方法を用いることで実現できます。
主にこれら2つを使うことで html の読みこみ及び、継承をすることができます。
前者の方法は別のファイルを子ファイルとして読み込むのに対して、後者は親ファイルを呼び出すような方法になります。
なので、別ファイルの html 要素を単純にくっつけたい場合は「include」を、ベースとなる html ファイルを用意してそこからさまざまな html ファイルにと拡張したい場合は「extends」を使用するイメージになるかと思います。
include タグの使い方
それでは早速 include の使い方について解説いたします。
1. テンプレートファイルを読み込むための設定（※重要※）
まずは テンプレートファイルを include させるために設定を行っていきます。
テンプレートファイルは大体は以下のようにプロジェクトフォルダ配下に [template] というフォルダを作ってその下に拡張子が “.html” のテンプレートファイルを作成していくことになると思います。
この場所に配置したテンプレートファイルを読み込ませるためには「settings.py」に以下のような技術を加える必要があります。
これで「template」フォルダを見に行けるようになりますので、忘れずに記載しましょう。
テンプレートファイルの include
それでは設定が終わったので実際にファイルの include を行っていきます。
include させたい以下のようなファイルを用意します。
|
1 2 3 4 5 6 7 8 9 |
<div style="position:fixed;top:0%;height: 50px;width: 100%;background-color: black;color: white;display: flex;"> <div style="display: grid;grid-template-columns: 1fr 1fr;"> <p>ここはヘッダー要素です。</p> <p>上部に固定したい内容を記載してます</p> </div> <div style="display: flex;margin-left:10px; align-items: center;"> <input type="text" placeholder="ここは検索エリアです。"> </div> </div> |
上記の内容は簡単な ヘッダー要素を意識してます。
このファイルに対して以下のように include することで 上記のヘッダ 要素を読み込むことができます。
|
1 2 3 4 5 6 |
<header> {% include 'header.html' %} </header> <body> <div>何らかのレイアウト</div> </body> |
上記の記述で実際に page.html にアクセスすると以下のように html ファイルが構成されていることがわかると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<header> <div style="position:fixed;top:0%;height: 50px;width: 100%;background-color: black;color: white;display: flex;"> <div style="display: grid;grid-template-columns: 1fr 1fr;"> <p>ここはヘッダー要素です。</p> <p>上部に固定したい内容を記載してます</p> </div> <div style="display: flex;margin-left:10px; align-items: center;"> <input type="text" placeholder="ここは検索エリアです。"> </div> </div> </header> <body> <div>何らかのレイアウト</div> </body> |
extends タグの使い方
それでは次に [extends] タグの使い方について解説いたします。
[extends] タグを使うにはまずはベース、親となる html ファイルを用意します。親となる html ファイルには以下のように記述することで継承先の内容を埋め込む位置を指定できます。
ここでは、例として以下のような [base.html] ファイルを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <meta charset="utf-8"> <title>{% block title %}ベースページ{% endblock %}</title> </head> <body> <div> 共通コンテンツ </div> <div> {% block content %} 固有コンテンツ {% endblock %} </div> </div> <script> {% block extrajs %} {% endblock %} </script> |
上記のファイルには3つのブロックを用意しました。
これで引き継ぎ先のファイルでそれぞれのブロックに対して html 要素を実装すれば記載したブロックの内容の html 要素と base.html に記載した html 要素で構成されたファイルが出来上がります。
引き継ぎ先のファイルには以下のように extends タグを記述します。
そしてそれぞれ用意したブロックに対して内容を記載していきます。
ここではファイル名は content.html にします。
|
1 2 3 4 5 6 7 8 9 10 |
{% extends 'base.html' %} {% block title %}固有コンテンツページ１{% endblock %} {% block content %} 固有コンテンツ１は夢特性です。 {% endblock %} {% block extrajs %} window.onload = function() { alert("ここは固有ページです") } {% endblock %} |
これで html 要素の継承ができました。
実際に Django から content.html にアクセスすると以下のように html が構成されているのがわかると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<head> <meta charset="utf-8"> <title>固有コンテンツページ１</title> </head> <body> <div> 共通コンテンツ </div> <div> 固有コンテンツ１は夢特性です。 </div> </div> <script> window.onload = function() { alert("ここは固有ページです"); } </script> |
いかがでしたでしょうか。
include と extends タグを使いこなすとだいぶ html ファイルがコンパクトにまとまって見やすくなると思いますので、積極的に使っていくようにしましょう。
今回はここまでです。
お疲れ様でした。
コメント