第6章：导航栏 - Django 3 ... 2 ... 1 ...起飞！系列

Django Web 初级起飞教程系列：

第1章：Django Web应用程序设置-Django 3…2…1…起飞！系列

第2章：Django基础-Django 3 ... 2 ... 1 ... 起飞系列

第3章：主页-Django 3 ... 2 ... 1 ... Takeoff！系列

第4章：列表页面-Django 3 ... 2 ... 1 ... Takeoff系列

第5章：新列表页-Django 3 ... 2 ... 1 ...起飞！系列

第6章：导航栏 - Django 3 ... 2 ... 1 ...起飞！系列

第7章：详细清单页面-Django 3 ... 2 ... 1 ... 起飞！系列

第8章：我的列表页面-Django 3 ... 2 ... 1 ... 起飞系列

第9章：编辑列表页面-Django 3 ... 2 ... 1 ... 起飞系列

在本章中，我们将重点放在添加带有指向其他页面链接的导航栏上，这样我们就不必继续键入页面的URL。

让我们在模板文件夹中创建一个名为base.html的文件，该文件将用作我们的父模板，这意味着我们会将其传递给其他页面，因为它具有所有页面（如导航栏）的通用元素。

在设计网站样式时，我们将包括功能齐全的导航栏。现在，让我们仅在顶部显示其他页面的链接，以便用户可以轻松浏览网站。

Navbar主页

打开base.html并添加以下代码。

导航

我们在此处为导航栏添加了导航标签。

一个

a标签用于定义网站不同页面的超链接。

％block name％-％endblock name％

块标签是可以由子模板填充的标签。在此示例中，我们使用％block content％和％endblock content％。这些标记内的内容将由我们在其他页面中定义的内容填充。

让我们看一下如何通过打开index.html模板并添加以下代码来使用block标签的示例。

％扩展了“ parent_template”％

extend标签告诉Django子模板从哪个父模板继承。在这种情况下，base.html模板是子模板模板从其继承的父模板。

extend标签从父模板（base.html）中获取导航栏和一对空的内容块标签。子模板中存在相同的内容块标记。这些标签包装了我们要显示的信息，因此，父模板中的空标签现在将包含子模板内容块标签中的信息。

每个页面显示不同的信息，因此我们必须使用内容块标签将信息包装在子模板中，并添加extends标签才能在所有页面中都具有导航栏。

导航栏的列表页面

打开all_listings.html并添加以下代码。

请注意，内容块标记内的子模板信息未更改。我将其中的一些内容作为参考，因此您知道我们正在编辑的模板。我使用（…）来告诉您它们之间还有更多代码。

带有导航栏的新列表页面

最后，让我们打开new_listing.html并添加我们一直添加到其他模板的相同代码。

在继续前进之前，请检查所有链接是否正常工作，以及是否可以在页面之间轻松导航。