templates cssやjsをbase.htmlに組み込む方法
base.htmlにcssやjsなどBootstrapの機能を追加する。
方法はどうすればいいのか？
前提条件
base.htmlにはbootstrapのコードを書かず、別にcss.html,js.htmlを準備する。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
解決案
{% include *** %}を使う方法と{% block *** %}を使う方法がある。
今回は{% include *** %}を使う方法を書く。
base.htmlにて
{% include "hoge/hoge.html" %}
この通りに書くだけで良い。{%block%}文の場合はhoge.htmlに挿入したい内容と{%block%}のセットを書く必要があるけど、インクルード文をbase.htmlに追加するだけで終わり。
例
base.htmlにて
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>base template</title>
#ここにinclude文挿入
{% include "base/css.html" %}
</head>
<body>
{% include "base/navbar.html" %}
{% block content %}{% endblock %}
</body>
</html>
インクルードの使い方
css.html,js.htmlをインクルードで使う際に注意点がある。それは{% load static %}が必要だということ。
ブロックを接続した後に機能を実現するのではなく、機能を実現した状態で接続する。
注釈 include タグの実行は『サブテンプレートを出力し、その結果である HTML を取り込む』と考えるべきで、『サブテンプレートを解析し、親テンプレートの一部分として、そこに組み込まれている』かのように考えるべきではありません。これは、取り込んだテンプレートの間では状態を共有できず、まったく独立した過程で出力されることを意味します。 ブロックは取り込まれる 前に 評価されます。ブロックを含んでいる他のテンプレートを取り込む場合、そのブロックは『 すでに評価され、出力された結果 』としてのブロックであり、例えばテンプレートを継承したときのような、オーバーライド可能なブロックではありません。
