模板继承

本课属于 Coddy Django 学习旅程的“Django 基础”单元。第 17 课，共 23 课。

home.html 和 drinks.html 都重复写了相同的 <head>，很快还会重复写导航栏。修改框架时，你就得编辑每个文件。你可以改用一个基础模板作为每个页面的框架，再让每个页面填入自己的部分。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 的空 block。
在 home.html 中，在第一行继承 "menu/base.html"。只保留 <body> 中的内容，并将其放入 content block 中。
在 drinks.html 中执行相同的操作。

按下 Run：两个页面都会显示来自 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>