概要

継承するときのおおまかなhtml templateたちの構成
tagの使い方に関するtips
注意点

背景

参照したもの：django document version 1.9
Django version : 1.9.2
python version : 2.7.10
OS : MacOS X

作っている人が自分で決めるべきものは大文字で、それ以外は小文字で書いてます。変数名とかファイル名とか。

継承する時のhtml templates の構成

templateのextendsを使ってhtmlを書いていく時の効率の良い方法を公式HPで紹介していたのでほぼほぼそれの翻訳です。

base.html を用意する

全ての大元になるベースのtemplateの作成。ここにwebサイトのベースになるものは全て詰め込む。

後からコンテンツを追加したいところには{% block CONTENTSNAME %}として、用意しておく。この時デフォルトの値を入れておくのも開発手法としては良いやり方。(下の方に補足あり。)

公式docにのってたのはこんな感じの具体例。

base.html


<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
    <div id="sidebar">
        {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
        {% endblock %}
    </div>

    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

base_SECTIONNAME.html としてもう少し限定したものを作成

例えば、ブログを作っているのであれば、base_index.htmlとかbase_blogindex.htmlとかbase.htmlよりも具体的だけど全部のコンテンツを埋め込まない感じ。

それぞれのページ毎に必要な個別の機能をここで用意してあげる感じ。ここでも子templateで挿入したい部分には{% block CONTENTSNAME %}としてblocktagを入れておいてあげる。

個別ページを具体的に作成

足りないところとか、実際に変数を入れて代入したりすごく具体的なことをやる。webページを完成させるようなイメージ。

tagの使い方に関するtips

tagに関する細かいルールがいくつかあったらしく、それについてまとめる。

{% extends '親のtemplateの名前.html' %}

これはtemplateの親子関係を示すためのtag。子供の方にextendsってやって親のtemplateの名前を書いてあげる。そうすると親でblockタグを作ったところにコンテンツを挿入できる。

このタグの使用上の注意点は、extends tagは一番上になきゃいけないところ。このtagを真ん中に書いたりするとエラーが正常に継承されないので注意してください。

documentにあったのはこんな感じの具体例。

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
    <div id="sidebar">
        {% block sidebar %}
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
        </ul>
        {% endblock %}
    </div>

    <div id="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

子供はこんな感じ。

base_CHILD.html

{% extends 'base.html' %}

{% block title %}My amazing blog {%endblock%}

{% block content %}
{% for entry in bloc_entries %}
    <h2>{{entry.title}}</h2>
    <p>{{entry.body}}</p>
{%endfor%}
{%endblock%}

tagの使い方とか細かくて具体的なのは別でぐぐった方が良いかも。。

{% block %}について

block tagはたくさんあった方がいい

blockがたくさんあって悪いことはない。だから、将来使いそうなところには片っ端からツッコンどくのがいいらしい。

繰り返しが多い場合

子供のtemplateの方でやたらとおなじことを繰り返しコーディングしてるなぁ、、と思ったら親templateの方に書いちゃうのがbest。

繰り返しが少なくなって読みやすくなる。DRY! DRY!!

読みやすくするために、、

{% endblock CONTENTSNAME %}ってやって対応関係を書いておくと他の人が読んだ時にわかりやすい。オープンソースの時代なので他の人に読まれる前提で書いておかないと後で大変なことになる。。

blockタグの作り方に関する注意点

block tagの名前はそれぞれ独立してないとダメ。おなじ名前があるとうまくいかない。

というのもblockタグのやりとりは親子間で一方通行ではなく、相互的なものらしい。親でたくさんblockタグを用意しておくと、子供の方あら親のタグを見た時にどれを参照していいかわからなくなって困っちゃうらしい。

たぶんこんな感じ。これを勉強してdocument読んで少し練習すればtemplateの継承関係は問題なくいけるはず。。。

【Tips】djangoでHTMLを作る時に、template extends をする時のお作法について

概要

背景