Django搭建个人博客:编写文章详情页面

5554阅读 · 10评论 · 2018/09/16发布   前往评论

有了文章列表页面后,当然还需要详情页面,方便用户对某一篇感兴趣的文章深入阅读。

编写视图函数

打开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规定的模板解耦语法,用它可以根据我们在urls.py中设置的名字,反向解析到对应的url中去。

关于其中的'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语法对文章正文进行排版。




本文作者: 杜赛
发布时间: 2018年09月16日 - 12:47
最后更新: 2019年06月02日 - 07:56
知识共享许可协议   转载请保留原文链接及作者


登录 后回复

共有10条评论

avatar
JXWJS 么么哒! 3

老师,十分感谢你

6个月前 回复


avatar
杜赛 [博主] JXWJS 么么哒! 2

6个月前 回复


avatar
Jiangyciauh-Dawn 么么哒! 2

问一哈,文章详情页面的上一篇或下一篇,我使用shortuuid作为文章id,怎么做才能实现上下篇翻页?

5个月前 回复


avatar
杜赛 [博主] Jiangyciauh-Dawn 么么哒! 4

另写一个带顺序的字段,比如创建日期更新日期或者自增整数

5个月前 回复


avatar
Jiangyciauh-Dawn 杜赛 [博主] 么么哒! 3

好的,谢谢!再问一下,你的网站文章详情显示是使用下面得到的css还是自己弄的?还有为什么我用你给的markdown转换文档不能显示数学公式,表格这些?

pygmentize -S monokai -f html -a .codehilite > monokai.css

4个月前 回复


avatar
杜赛 [博主] Jiangyciauh-Dawn 么么哒! 3

我的博客是在pygmentize的基础上优化过的。大部分的样式是生成的,表格、图片、部分文字的样式是自己写的css。

原始pygmentize生成的样式是能显示表格的,只不过样式不好看而已。我的做法是把bootstrap自带的表格样式应用上去了。

数学公式我没用过,可能需要加载插件吧,不太清楚,您最好查一查官方文档。

4个月前 回复


avatar
Jiangyciauh-Dawn 么么哒! 2
本回复已被 Jiangyciauh-Dawn 删除

5个月前 回复


avatar
yanchao-zhangzyc 么么哒! 3

太感谢了,每一步都写得非常清楚。

3个月前 回复


avatar
杜赛 [博主] yanchao-zhangzyc 么么哒! 2

不客气,感谢您的支持!

3个月前 回复


avatar
台风利齐马 么么哒! 3

小白遇到了点问题,联系博主才焕然大悟,哈哈,小失误,以后得认真仔细看

现在写在这里,说不定也会有人不注意 犯这样的错误

我将http://127.0.0.1:8000/article/article-detail/1/

最后的“:”也带到地址栏了所以报错:Request URL:http://127.0.0.1:8000/article/article-detail/1/%EF%BC%9A

最后感谢博主

2个月前 回复