投稿日：
2018年4月20日
最終更新日：
【プログラミング備忘録】Djangoのテンプレートをパーツ化して読み込む方法
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
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周りは他にも便利な機能がいろいろあるので、少しずつ紹介していけたらなと思います♪