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