上篇我们引入了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，实现创建文章的功能页面。

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

Python + Django4 搭建个人博客（十五）：注册功能页面实现
上篇我们实现了用户的登录和登出. 本篇我们完善用户管理的另一个重要功能:注册. 编写注册表单类用户注册时会用到表单来提交账号.密码等数据,所以需要写注册用的表单/userprofile/forms. ...
Python + Django4 搭建个人博客（六）: 数据库表和模型设计
目录数据库表设计数据模型定义数据模型说明模块导入类字段数据迁移(Migrations) 结语上篇我们已经提到,Django是通过模型来对应实体数据库,然后通过ORM来实现对实体数据库的 ...
python开发个人博客_手把手教你用 Python + Flask 搭建个人博客
Python 的语言特性使得自身编写 Web 框架极其容易,现在已经有上百种用 Python 编写的 Web 开发框架,其中用户量最大的两个就是 Django 和 Flask. Django 和 Fl ...
Django搭建个人博客：给文章加个漂亮的标题图
现在虽然博客的功能大都实现了,但是界面还是比较朴素,特别是首页的文章列表几乎全是文字,看多了难免疲劳.因此,给每个文章标题配一张标题图,不仅美观,用户也能通过图片快速了解文章内容.实际上大部分社交网站 ...
python个人网站开发_python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
python 全栈开发，Day81(博客系统个人主页,文章详情页)
一.个人主页随笔分类需求:查询当前站点每一个分类的名称以及对应的文章数完成这个需求,就可以展示左侧的分类它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...

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

编写视图函数

编写配置路由地址

编写模板

增加首页查看文章入口

结语

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

最新文章

热门文章