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

作者 : IT 大叔 本文共1174个字,预计阅读时间需要3分钟 发布时间: 2020-09-18

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并添加以下代码。

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图

导航

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

一个

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

%block name%-%endblock name%

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

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

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(2)

%扩展了“ parent_template”%

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

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

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

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(4)

导航栏的列表页面

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

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(6)

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

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(8)

带有导航栏的新列表页面

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

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(10)

第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列插图(12)

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

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 第6章:导航栏 - Django 3 ... 2 ... 1 ...起飞!系列

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论