有了文章列表页面后,当然还需要详情页面,方便用户对某一篇感兴趣的文章深入阅读。
编写视图函数
打开article/views.py
,增加文章详情页面的视图函数article_detail()
:
article/views.py
...
# 文章详情
def article_detail(request, id):
# 取出相应的文章
article = ArticlePost.objects.get(id=id)
# 需要传递给模板的对象
context = { 'article': article }
# 载入模板,并返回context对象
return render(request, 'article/detail.html', context)
-
article_detail(request, id)
函数中多了id
这个参数。注意我们在写model的时候并没有写叫做id的字段,这是Django自动生成的用于索引数据表的主键(Primary Key,即pk)。有了它才有办法知道到底应该取出哪篇文章。 -
ArticlePost.objects.get(id=id)
意思是在所有文章中,取出id值相符合的唯一的一篇文章。
然后编写article/urls.py
,配置路由地址:
article/urls.py
...
urlpatterns = [
...
# 文章详情
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
]
<int:id>
:Django2.0的path
新语法用尖括号<>定义需要传递的参数。这里需要传递名叫id
的整数到视图函数中去。
重申一下老版本的Django是没有path
语法的。
编写模板
在templates/article/
中新建detail.html
文件,编写如下代码:
templates/article/detail.html
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
文章详情
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 文章详情 -->
<div class="container">
<div class="row">
<!-- 标题及作者 -->
<h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">作者:{{ article.author }}</div>
<!-- 文章正文 -->
<div class="col-12">
<p>{{ article.body }}</p>
</div>
</div>
</div>
{% endblock content %}
这里我们用{{ article.xxx }}
取出了文章标题、作者以及正文。
前面我们已经通过后台创建了几篇文章,这里将取出id为1的一篇文章测试效果。
运行开发服务器后,在浏览器中输入http://127.0.0.1:8000/article/article-detail/1/
:
优化网页入口
虽然已经实现了文章详情功能,但是通过输入url访问的方式实在太不友好。
改写header.html
,让用户可通过导航栏右侧的文章链接返回首页:
templates/header.html
...
<div>
<ul class="navbar-nav">
<li class="nav-item">
<!-- 改写了这里的 href -->
<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
</li>
</ul>
</div>
...
注意看这里href是如何改写的:
- href定义了链接跳转的地址
-
{% url '...' %}
是Django规定的语法,用于指明具体地址 - 关于其中的
'article:article_list'
的解释:- 前面的
article
是在项目根目录的urls.py
中定义的app的名称 - 后面的
article_list
是在app中的urls.py
中定义的具体的路由地址
- 前面的
通过这样的方法就将链接跳转的指向给配置好了,只要对应url的名称不变,url本身无论怎么变化,Django都可以解析到正确的地址,很灵活。
当然你也可以直接在href
中写入url的地址,但是一旦url有变化,所有相关的链接都会失效,降低维护性。
然后再改写list.html
,让用户可点击阅读本文按钮进入文章详情:
templates/article/list.html
...
<div class="card-footer">
<!-- 同样改写 href -->
<a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>
</div>
...
留意文章的id是如何传递的:
- 在
list.html
中,通过href="{% url 'article:article_detail' article.id %}"
,将id传递给article/urls.py
- 在
article/urls.py
中,通过<int:id>
传递给视图函数article_detail()
- 在视图函数
article_detail()
中,通过形参id
取得了文章的id值,并进行处理,最终定位了需要获取的文章对象
现在我们可以通过链接访问网站上的不同页面了,而不需要手动输入url。当然这也是现代网站的基础。
总结
现在我们也拥有查看文章详情的功能了,并且优化了网页切换的体验。
下一章将学习使用Markdown语法对文章正文进行排版。
- 有疑问请留言,我会尽快回复。
- 或Email私信我:dusaiphoto@foxmail.com
- 项目完整代码:Django_blog_tutorial
转载请告知作者并注明出处。