ねこじゃすり
猫を魅了する魔法の装備品！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
スポンサーリンク
Templateのパーツ化
パーツ化の必要性
WebサイトやWebシステムを作成していると複数ページの中で似たような記述をする必要がある部分が出てくると思います。
headタグ/footerタグ/navタグ/汎用パーツ(プログレスサークル等)・・・
これらの情報をすべてのページのHTMLに同じように記述すると、修正が必要になった場合に同じ修正をHTML数分行わないといけなくなるので、保守がとても大変になってします。
include
上記のような懸念の解消機能として、Djangoのtemplateにはインクルード機能が搭載されています。
この機能を利用することで、HTMLの任意の部分に別のHTMLの情報を追加することが可能になります。
なので、汎用的なHTMLをパーツとして部分切り出しして管理した上で、各HTMLにてインクルードするようにすれば、一箇所修正すればすべてのページに修正が適用されるので、保守がとても簡単になります。
使い方
インクルード機能を利用するには、HTMLを挿入したい部分に以下のカスタムタグを追記してください。
|
1 |
{% include "{挿入したHTMLへのパス}" %} |
今回は例として以下のようなディレクトリ構造でtemplate/sample/index.htmlからtemplate/parts/common.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 |
birdBreeder ├── admin.py ├── apps.py ├── static │ ├── css │ │ ├── materialize.css │ │ ├── materialize.min.css │ │ └── style.css │ ├── image │ │ └── icon.png │ └── js │ ├── index.js │ ├── materialize.js │ └── materialize.min.js ├── templates │ ├── base.html │ ├── parts │ │ └── common.html │ └── sample │ └── index.html ├── urls │ └── main.py └── views ├── main.py └── sample └── main.py |
まずは以下のようなパーツHTMLを用意します。
|
1 2 3 4 5 |
<div> <p> 共通パーツだよ！ </p> </div> |
次に、上記パーツを読み込むインクルード指定を追加します。
|
1 2 3 4 5 |
~省略~ <div> {% include 'parts/common.html' %} </div> ~省略~ |
確認
では、実際にブラウザにアクセスして読み込まれているか確認してみましょう。
正常にインクルードされていますね。
終わりに
DjangoのTemplate周りは他にも便利な機能がいろいろあるので、少しずつ紹介していけたらなと思います♪
Travenist
Otakenist
