diadia

興味があることをやってみる

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 を取り込む』と考えるべきで、『サブテンプレートを解析し、親テンプレートの一部分として、そこに組み込まれている』かのように考えるべきではありません。これは、取り込んだテンプレートの間では状態を共有できず、まったく独立した過程で出力されることを意味します。

ブロックは取り込まれる 前に 評価されます。ブロックを含んでいる他のテンプレートを取り込む場合、そのブロックは『 すでに評価され、出力された結果 』としてのブロックであり、例えばテンプレートを継承したときのような、オーバーライド可能なブロックではありません。