主页与导航栏

在本章中，我们将重点添加一个包含指向其他页面链接的导航栏。这意味着我们不再需要手动输入各个页面的 URL。

添加导航栏的第一步是在 templates 文件夹中创建一个名为 base.html 的文件，作为我们的父模板。这意味着其他页面将继承这个模板，因为它包含了所有页面共用的元素，例如导航栏。

当我们对网站进行样式设计时，会实现一个功能完整的导航栏。目前，我们只需在页面顶部显示其他页面的链接，以便用户能够轻松浏览网站。

添加导航栏

进入 listings/templates/listings/ 目录，打开 base.html，并添加以下代码。

1
2<nav class="navbar">
3    <a href="{% url 'listings:index' %}">BIKE FINDER</a> -
4    <a href="{% url 'listings:all_listings' %}">LISTINGS</a> -
5    <a href="{% url 'listings:new_listing' %}">NEW LISTING</a>
6</nav>
7
8{% block content %}
9{% endblock content %}

在 第 1 行，我们使用了 <nav> 标签来定义导航栏。

在 第 2 至 4 行，使用 <a> 标签定义了网站不同页面的超链接。

第 7 至 8 行的块标签是子模板可以填充的内容区域。在此示例中，我们使用 {% block content %} 和 {% endblock content %}，其中 content 是块的名称。这些标签内部的内容将由其他页面中定义的内容填充。

块标签

让我们通过在 listings/templates/listings/index.html 模板中添加以下代码，来看一个使用块标签的例子。

1
2{% extends "listings/base.html" %}
3
4{% block content %}
5<h3>Bike Find3r</h3>
6<p>This is a homepage</p>
7{% endblock content %}

第 1 行的 extends 标签告诉 Django，当前子模板继承自哪个父模板。在此例中，子模板 index.html 继承自父模板 base.html。

extends 标签从父模板（base.html）中获取导航栏和一对空的 content 块标签。子模板中也存在相同的块标签，它们用于包裹我们希望显示的信息。这样一来，父模板中的空标签就会被子模板中 content 块标签的内容所填充。

每个页面显示的内容各不相同，因此我们必须在子模板中使用 content 块标签包裹内容，并添加 extends 标签，才能让所有页面都拥有导航栏。

带导航栏的首页实时演示

1. 你可以在下方的工具中看到已打开的 base.html。请添加本课第一个代码片段中的导航栏代码。
2. 打开目录 listings/templates/listings/ 中的 index.html，并添加本课第二个代码片段中的块标签代码。
3. 运行应用程序。