【プログラミング備忘録】Djangoのテンプレートをパーツ化して読み込む方法

YouTube

1 Templateのパーツ化
2 終わりに

Templateのパーツ化

パーツ化の必要性

WebサイトやWebシステムを作成していると複数ページの中で似たような記述をする必要がある部分が出てくると思います。

headタグ/footerタグ/navタグ/汎用パーツ(プログレスサークル等)・・・

これらの情報をすべてのページのHTMLに同じように記述すると、修正が必要になった場合に同じ修正をHTML数分行わないといけなくなるので、保守がとても大変になってします。

include

上記のような懸念の解消機能として、Djangoのtemplateにはインクルード機能が搭載されています。

この機能を利用することで、HTMLの任意の部分に別のHTMLの情報を追加することが可能になります。
なので、汎用的なHTMLをパーツとして部分切り出しして管理した上で、各HTMLにてインクルードするようにすれば、一箇所修正すればすべてのページに修正が適用されるので、保守がとても簡単になります。

使い方

インクルード機能を利用するには、HTMLを挿入したい部分に以下のカスタムタグを追記してください。

{% include "{挿入したHTMLへのパス}" %}

1	{% include "{挿入したHTMLへのパス}" %}

今回は例として以下のようなディレクトリ構造でtemplate/sample/index.htmlからtemplate/parts/common.htmlをインクルードしてみます。

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

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を用意します。

<div>
  <p>
    共通パーツだよ！
  </p>
</div>

<div>

<p>

共通パーツだよ！

</p>

</div>

次に、上記パーツを読み込むインクルード指定を追加します。

~省略~
<div>
  {% include 'parts/common.html' %}
</div>
~省略~

~省略~

<div>

{% include 'parts/common.html' %}

</div>

~省略~

確認

では、実際にブラウザにアクセスして読み込まれているか確認してみましょう。

正常にインクルードされていますね。

オススメの参考書

現場で使える Django の教科書《基礎編》

終わりに

DjangoのTemplate周りは他にも便利な機能がいろいろあるので、少しずつ紹介していけたらなと思います♪