テンプレートの継承

CoddyのDjangoジャーニー「Djangoの基礎」セクションの一部。レッスン 17/23。

home.html と drinks.html には、同じ <head> がそれぞれ繰り返し記述されており、間もなくナビゲーションバーも加わります。枠組みを変更するたびに、すべてのファイルを編集することになります。代わりに、1つのベーステンプレートをすべてのページの枠組みとし、各ページがそれぞれの内容を埋め込みます。Djangoでは、この枠組みを親テンプレート、各ページを子テンプレートと呼びます。

枠組みでは、ページが埋め込む部分を {% block %} タグと名前で指定します。ライブラリの library/base.html は次のとおりです。

<body>
    <nav>...</nav>
    <article>{% block body %}{% endblock %}</article>
</body>

ページは {% extends %} で始め、その後ブロックを埋め込みます。

{% extends "library/base.html" %}

{% block body %}
    <p>We are open until 20:00.</p>
{% endblock %}

{% extends %} は最初のタグでなければなりません。別のテンプレートを継承するページでは、ブロックの外にある内容はすべて破棄されます。囲むのを忘れた見出しは消えてしまいます。

チャレンジ

中級

両方のページでbase.htmlのフレームを共有するようにします。

base.htmlで、<main>の中にcontentという名前の空のブロックを置きます。
home.htmlの1行目で"menu/base.html"を継承します。<body>の中にあったものだけを残し、それをcontentブロックに入れます。
drinks.htmlでも同じことをします。

実行を押します。両方のページにbase.htmlのナビゲーションが表示されます。

自分で試してみよう

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Corner Café</title>
</head>
<body>
    <nav>
        <a href="{% url 'menu:home' %}">Home</a>
        <a href="{% url 'menu:drinks' %}">Drinks</a>
        <a href="{% url 'menu:about' %}">About</a>
    </nav>
    <main>
        <!-- each page's content goes here -->
    </main>
</body>
</html>