Python + Django4 搭建个人博客（十）：实现文章详情页面

上篇我们引入了Bootstrap，对博文列表页面进行了一些美化和布局设计。

Python + Django4 搭建个人博客（九）：Bootstrap实现博客列表页面_李威威wiwi的博客-CSDN博客本篇我们在上篇文章列表的模板上进行了一些修改，我们引入了Bootstrap框架的JS和Css静态文件。在模板上通过模板标签在模板文件中加载了对应的静态文件。我们还熟悉了django模板继承过程，模板继承的实现步骤如下：1、在模板子模板（比如：list.html）中使用{% extends "base.html" %}来继承模板base.html的代码。2、由标签{% block body %}在继承模板的基础上实现自定义模板的内容。3、由{% endblock %}结束block标签。......https://blog.csdn.net/agelee/article/details/126601815

本篇我们来实现博客的另外一个核心功能：文章详情查看，同时在在导航抬头增加相关入口。

编写视图函数

我们需要展示博文详情，首先就需要实现一个从数据库中获取文章相关数据的视图函数。

打开article/views.py，增加文章详情页面的视图函数article_detail()：

# 文章详情
def article_detail(request, id):
    # 取出相应的文章
    article = Article.objects.get(id=id)
    # 需要传递给模板的对象
    context = { 'article': article }
    # 载入模板，并返回context对象
    return render(request, 'article/detail.html', context)

• article_detail(request, id)函数中多了id这个参数。有了它才有办法知道到底应该取出哪篇文章。
• Article.objects.get(id=id)意思是在所有文章中，取出id值相符合的唯一的一篇文章。

编写配置路由地址

然后编写django4blog/urls.py，配置路由地址：

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', views.hello),
    path('article/', views.article_list),  # 展示文章
   # 添加此项
    path('article-detail/<int:id>/', views.article_detail),  # 文章详情
]

<int:id>：Django用尖括号<>定义需要传递的参数。这里需要传递名叫id的整数到视图函数中去。

编写模板

在templates/article中新建detail.html文件，编写如下代码：

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}

<!-- 写入 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-primary">
            <div class="col-12">
                <a>作者：{{ article.author }}</a>
                &nbsp
                <a>{{ article.created|date:'Y-m-d H:i:s' }}</a>
            </div>
        </div>
{#        <br>#}
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body }}</p>
        </div>
        <!--    </div>-->
    </div>

{% endblock content %}

这里我们用{{ article.xxx }}取出了文章标题、创建时间，作者以及正文。

前面我们已经通过后台创建了几篇文章，这里将取出id为1的一篇文章测试效果。

运行开发服务器后，在浏览器中输入http://127.0.0.1:8000/detail/1/：

增加首页查看文章入口

一般情况下我们查看文章详情不会直接输入地址来查看，而是通过文章列表页，点击特定按钮跳转到网页详情页。

所以接下来我们修改下文章列表页面增加一些链接跳转。

这里我们增加两个跳转链接：

1、点击导航栏首页跳转到文章列表页

打开templates/header.html

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- 导航栏商标 -->
    <a class="navbar-brand" href="#">我的博客</a>

    <!-- 导航入口 -->
    <div>
      <ul class="navbar-nav">
        <li class="nav-item">
            <!-- 改写了这里的 href -->
          <a class="nav-link" href="{% url 'list' %}">首页</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

刷新我们网址：http://127.0.0.1:8000/list/ ，发现报错了。

原因是我们在模板增加了 href地址 {% url 'list' %}，这个链接里面对应的url 名字list无法反向解析到地址。

打开django4blog/urls.py，修改文章列表的path函数，增加name参数：'list'。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', views.hello),
    re_path(r'^$', views.article_list),
    # 修改此项，增加name参数
    path('list/', views.article_list, name='list'),  # 文章列表
    # 文章详情
    path('detail/<int:id>/', views.article_detail),
]

刷新网页后，可以正常显示了。

• {% url '...' %}是Django规定的模板解耦语法，用它可以根据我们在urls.py中设置的名字，反向解析到对应的url中去。

实际上我们也可以直接在href中写入url的地址:href="/list"，但是一旦url有变化，所有相关的链接都会失效，维护性不好。

使用名字的话，只要对应url的名字不变，url本身地址无论怎么变化，Django都可以解析到正确的地址，很灵活。

2、让用户可点击阅读本文按钮进入文章详情：

和上面一样，我们先给url地址命名，打开django4blog/urls.py，修改文章详情的path函数，增加name参数：'detail'。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', views.hello),
    re_path(r'^$', views.article_list),
    path('list/', views.article_list, name='list'),  # 展示文章
    # 修改此项，增加name参数
    path('detail/<int:id>/', views.article_detail, name='detail'),  # 文章详情
]

然后打开list.html，修改href链接代码如下：

                <!-- 摘要 -->
                <div class="card-body">
                    <h4 class="card-title">{{ article.title }}</h4>
                    <br>
                    <p class="card-text">{{ article.body|slice:'100' }}...</p>
                     <!-- 改写了这里的 href -->
                    <a href="{% url 'detail' article.id %}"  class="card-link">阅读本文</a>
                </div>

这个链接href 里面除了 url 名字外，还多了article.id，我们看下这个id是如何在url和视图函数中间传递，并最终获取到数据库中的数据的。

• 在list.html中，通过href="{% url 'detail' article.id %}"，将id传递给urls.py
• 在urls.py中，通过<int:id>传递给视图函数article_detail()
• 在视图函数article_detail()中，通过形参id取得了文章的id值，并进行处理，最终定位了需要获取的文章对象。

结语

本篇我们实现了文章详情的页面，同时通过修改模板里面的href 链接，我们增加了导航栏对首页的跳转和首页中跳转文章详情的入口。

在修改href的时候，我们熟悉了path函数中的name参数，通过模板标签 {% url %}，我们可以通过url名字反向解析url地址，增加了url配置的灵活性。

下篇我们将学习Django的Form，同时利用Form，实现创建文章的功能页面。