Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク 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
