Djangoにおけるテンプレートアーキテクチャ

4473 ワード

An Architecture for Django Templatesを読んだ後のメモ
1.テンプレートを分類します.主に3種類あります.
A,継承されたテンプレート名前を付けます. 
例えば、_base.htmlこれは最も基本的なテンプレートで、A、Cクラスのテンプレートに継承されます
{% load staticfiles i18n %}
<!DOCTYPE html>
<html>
    <head>
        {% block meta %}{% endblock %}
        <title>
            {% block title %}{% trans "Alazyer' Website" %}{% endblock %}
        </title>
        {% block stylesheets %}
            <link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}" type="text/css" />
            <link rel="stylesheet" href="{% static "css/base.css" %}" type="text/css" />
        {% endblock %}
        {% block extra_head %}{% endblock %}
    </head>
    <body>
        <header class="navbar navbar-fixed-top">
            {% include "_navigation.html" %}
        </header>
        <div id="main" role="main">
            <div class="container">
                {% block main %}
                {% endblock %}
            </div>
        </div>
        {% block javascript %}
            <script src="{% static "js/jquery-1.7.2.min.js" %}" type="text/javascript"></script>
            <script src="{% static "js/bootstrap.min.js" %}" type="text/javascript"></script>
        {% endblock %}
    </body>
</html>

または、ウェブレイアウトに関連するテンプレート、例えば_1_right_sidebar.htmlは、左右の割合を2:1、3:1に調整し、span値を8:4、9:3に調整すれば簡単にWebレイアウトを調整できます.同じように1_right_sidebar.html, __1_sigle_section.html
{% extends '__base.html' %}
{% block main %}
    <div class="row">
        <div class="span8">
            {% block content %}{% endblock %}
        </div>
        <div class=“span4">
            {% block sidebar %}{% endblock %}
        </div>
    </div>
{% endblock %}

B、含まれるテンプレート、名前を付けます.
前述のようにnavigation.html
<div class="navbar-inner">
    <div class="container-fluid">
        <a class="brand" href="#">Alazyer's Website</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                 <li class="active"><a href="{% url 'home' %}">Home</a></li>
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Applications <b class="caret"></b></a>
                     <ul class="dropdown-menu">
                         <li><a href="{% url 'blog:index' %}">Blog</a></li>
                         <li><a href="{% url 'depot:index' %}">Depot</a></li>
                         <li><a href="{% url 'polls:index' %}">Polls</a></li>
                     </ul>
                 </li>
                 <li><a href="{% url 'about' %}">About</a></li>
                 <li><a href="{% url 'contact' %}">Contact</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{% url 'login' %}">Login</a></li>
                <li><a href="{% url 'register' %}">Register</a></li>
            </ul>
         </div>
    </div>
</div>

C、展示内容のテンプレート;
具体的にblogのentryのentryを展示します.htmlテンプレート
{% extends '__1_right_sidebar' %}
{% block title %}
    {{ entry.title }}
{% endblock %}
{% block content %}
    {% include '_entry_full.html' %}
{% endblock %}

{% block sidebar %}
    {% include '_tags.html' with tags=entry.tags.all %}
    {% enclude '_categories.html' with categories=entry.categories.all %}
{% endblock %}

2.その他の知識
{{block.supper},継承テンプレートに親テンプレートの内容を使用する
次のように閉じたラベルが表示されます.でも個人的には必要ないと思います
{% block title %}
{% endblock title %}

htmlラベルとテンプレートラベルを同等に扱います.