パーツ化の必要性

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

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

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

include

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

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

使い方

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

{% 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

まずは以下のようなパーツHTMLを用意します。

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

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

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

確認

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

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

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