テンプレートを拡張しよう

Djangoのまた別の素敵なところはテンプレート拡張です。これは何を意味するのでしょうか？それはHTMLの共通部分をウェブサイトの異なるページで使えるということです。

テンプレートは同じ情報やレイアウトを複数の場所で利用したいときに役立ちます。 各ファイル内で繰り返す必要はありません。 さらにもし何か変更したい場合、各テンプレートを変更する必要はなく、1回変更すればいいだけです！

基本テンプレートを作成する

基本テンプレートはあなたのウェブサイトの各ページを拡張するための最も基本的なテンプレートです。

blog/templates/blog/以下にbase.htmlファイルを作ってみましょう。

blog
└───templates
    └───blog
            base.html
            post_list.html

それからエディタで開いて、以下のようにpost_list.htmlからbase.htmlファイルにすべてコピーしましょう。

blog/templates/blog/base.html

{% load static %}
<html>
    <head>
        <title>Django Girls blog</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
        <link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
    </head>
    <body>
        <div class="page-header">
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>

        <div class="content container">
            <div class="row">
                <div class="col-md-8">
                {% for post in posts %}
                    <div class="post">
                        <div class="date">
                            {{ post.published_date }}
                        </div>
                        <h2><a href="">{{ post.title }}</a></h2>
                        <p>{{ post.text|linebreaksbr }}</p>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </body>
</html>

それからbase.html内の<body>全体(<body>と</body>の間のすべて)を次で置き換えます。

blog/templates/blog/base.html

<body>
    <div class="page-header">
        <h1><a href="/">Django Girls Blog</a></h1>
    </div>
    <div class="content container">
        <div class="row">
            <div class="col-md-8">
            {% block content %}
            {% endblock %}
            </div>
        </div>
    </div>
</body>

{% for post in posts %} から {% endfor %} が以下のように置き換えられたことに気づいたでしょうか。

blog/templates/blog/base.html

{% block content %}
{% endblock %}

でも何のために？ あなたはただblockを作っただけです！ {% block %} テンプレートタグを、これからHTMLを挿入しようとする場所に使いました。 そのHTMLはこのテンプレート (base.html) を拡張した別のテンプレートからやってきます。 どうやって行うかはすぐに示します。

base.htmlを保存し、もう一度blog/templates/blog/post_list.htmlをエディタで開きます。 {% for post in posts %} の上と {% endfor %} の下すべてを削除しましょう。 それが終わったら以下のようになっていると思います。

blog/templates/blog/post_list.html

{% for post in posts %}
    <div class="post">
        <div class="date">
            {{ post.published_date }}
        </div>
        <h2><a href="">{{ post.title }}</a></h2>
        <p>{{ post.text|linebreaksbr }}</p>
    </div>
{% endfor %}

これをcontentブロックに対応するテンプレートのパーツとして使いたいです。このファイルにblockタグを追加する時です！

追加するblockタグは base.html ファイル中のタグにマッチしてほしいですよね。 また、blockタグにはcontentブロックに属するすべてのコードを含めたいですよね。 そうするには、すべてを {% block content %} と {% endblock %} の間に入れてあげればよいです。 このように:

blog/templates/blog/post_list.html

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

あとやることは一つだけです。これら二つのテンプレートをくっつけてあげる必要があります。これがテンプレートを拡張するということのすべてです！そうするにはこのファイルの先頭にextendsタグを追加します。次のように：

blog/templates/blog/post_list.html

{% extends 'blog/base.html' %}

{% block content %}
    {% for post in posts %}
        <div class="post">
            <div class="date">
                {{ post.published_date }}
            </div>
            <h2><a href="">{{ post.title }}</a></h2>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
    {% endfor %}
{% endblock %}

以上です！ファイルを保存して、ウェブサイトがまだちゃんと動いているか確認しましょう。:)

もし TemplateDoesNotExist というエラーが出ていたら、 blog/base.html ファイルがないという意味で、コンソールで runserver が実行されたままになっていると思います。 これを止め(Ctrl+C - ControlとCのキーを同時押し)、それから python manage.py runserverコマンドを入力して再度サーバーを動かしてみてください。

results matching ""

    No results matching ""