たいていのWebサイトは、 一般的にある一部を共通に表示させています。
このような複数のページに対して、同じHTMLコードをページ数の分だけ記述するのは、とても大変ですし、直す際はそのすべてのコードの修正に取り掛からなければならない為、無駄作業が多くなってしまいます。
Djangoでは、そういった手間を省くために、HTML文章内に記述する「Djangoテンプレート言語」※と呼ばれる記法があります。その「Djangoテンプレート言語」を用いることで、データベースから値を読み込ませたり、条件分岐(if)やループ(for)などの制御もできるようになるので便利です。
※上記のシステムをDjangoの構成要素の一つである「テンプレート」と呼びます。
Djangoがテンプレートファイルと認識するためには、以下3つが条件となります。
①アプリ内に「templates」ディレクトリがあること
②認識させるファイルはhtmlファイル（拡張子が.html）のみであること。
③「templates」ディレクトリ 内にhtmlファイルを入れておくこと。
意外とわかりずらいDjangoテンプレートは3つを抑える
Djangoのテンプレート言語は、アプリ開発では必須中の必須の言語です。
私にはなかなか理解ししづらかったのです。
まずはこのテンプレート言語を使用する目的を3つ押さえておきます。
- blockタグ・・・htmlメインページのパーツを自在に他のhtmlファイルと入れ替えができるようになる
- 制御系タグ・・・forやifやurl逆引きなどの操作をhtmlファイルで行うことができるようになる
- 変数やフィルター・・・データを扱うための変数やその変数に条件を加えることができるようになる
（blockタグ）はじめはbase.htmlを主に考えていくのがいい
テンプレートの主な活用法としては、メイン画面内の詳細をページごとに切り替えて表示したい場合に使用するblockタグがあげられます。
下の事例では、base.htmlで表示したい画面内でページごとに内容を入れ替えたい場所を決めて、そこにあらかじめblockタグを入れています。
base.html （挿入したい場所を記載）
<html>
<head>
<title>
<!--➀ここに「ページタイトル」を挿入したい-->
</title>
<!--➁ここに「ページ固有のhead情報」を挿入したい-->
</head>
<body>
<nav>
ナビゲーション
</nav>
<!--③ここにヘッダーを挿入したい-->
<!--④ここにコンテンツを挿入したい-->
<footer>
</footer>
</body>
</html>
base.html （挿入したい場所blockタグを入れる）
<html>
<head>
<title>
{% block title %}{% endblock %}・・・➀
</title>
{% block head %}{% endblock %}・・・➁
</head>
<body>
<nav>
ナビゲーション
</nav>
{% block header %}{% endblock %}・・・③
{% block contents%}{% endblock %}・・・④
<footer>
</footer>
</body>
</html>
{% block **** %}{% endblock %} を切り替えたい場所に挿入することで、一つのhtmlファイルをテンプレートのようにして各画面によって内容を変更することができるようになります。
{% block * %}{% endblock %} に対応するコードはどう描くのか
base.htmlに ブロックタグ{% block **** %}{% endblock %} を配置した後に、その部分に置き換わるコードを準備していきます。
base.htmlを親コードとすると、ブロックタグを用いて置き換わるコードは、子コードとなります(以下の図を参照)。そのchild_no1.htmlの中身を見てみましょう。
child_no1.html {% extends 'base.html' %}<!--base.htmlに代入するという宣言--> {% block contents %}<!--base.htmlのblock contenntsの部分--> {% if user.is_authenticated %}<!--ユーザーログイン状態か判定--> {% for item in object_list %}<!--ビューから渡されるmodelオブジェクトリストから1レコード抜き出す--> <a href="{% url 'application:bar' item.pk %}"><!--urlの逆引き--> <p> {{ item.content|truncatechars:20 }}<!-データを20桁まで表示する--> </p> </a> {% empty %} <p>空のデータ</p> {% endfor %} {% else %} <p>ログインして下さい</p> {% endif %} {% endblock %}<!-このendblock宣言までを代入することになります-->
重要なのは1行目と2行目です。
まず1行目 {% extends ‘base.html’ %} を宣言をしてbase.htmlのブロックタグに代入しますという宣言ですので必ずこれが入ります。※最後の {% endblock %} の設置も必須です。2行目の {% block ＊＊＊ %} は、代入先のbase.htmlの中の {% block ＊＊＊ %}{% endblock %} に挿入されることを指定しています。
