Django搭建个人博客--文章详情

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

一、编写视图函数

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

...
# 文章详情
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自动生成的用于索引数据表的主键。有了它才有办法知道到顶应该取出哪篇文章。
• ArticlePost.objects.get(id=id)：意思是在所有文章中，取出id值相符合的唯一的一篇文章。

---

二、配置路由地址

打开article/urls.py，配置article-detail路由地址：

# 引入path
from django.urls import path
# 引入views.py
from . import views

# 正在部署的应用的名称
app_name = 'article'

urlpatterns = [
    # path函数将url映射到视图
    path('article-list/', views.article_list, name='article_list'),
    # 文章详情
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),

]

• <int:id>：Django2.0的path新语法用尖括号<>定义需要传递的参数。这里需要传递名叫id的整数到视图函数中去。

---

三、编写模板

在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-l2 mt-4 mb-4">{{ article.title }}</h1>
		<div class="col-l2 alert alert-success">作者：{{ article.author }}</div>
		<!-- 文章正文 -->
		<div class="col-l2">
			<p>{{ article.body }}</p>
		</div>
	</div>
</div>

{% endblock content %}

---

四、查看效果

启动服务器，浏览器输入http://127.0.0.1:8000/article/article-detail/2/：

---

五、优化网页入口

虽然已经实现了文章详情功能，但是通过输入url访问的方式实在是太不友好。

5.1、改写header.html

改写header.html，让用户可通过导航栏右侧的文字链接返回首页：

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

        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="{% url 'article:article_list' %}">我的博客</a>

        <!-- 导航入口 -->
        <div>
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'article:article_list' %}">文章</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

• href定义了链接跳转的地址；
• {% url '...' %}是Django规定的模板解耦语法，用它可以根据我们在urlss.py中设置的名字，反向解析到对应的url中去；

关于其中的 article:article_list 的解释：

• 前面的article是在项目根目录的urls.py中定义的app的名称；
• 后面的article_list是在app中的urls.py中定义的具体的路由地址

通过这样的方法就将链接跳转的指向给配置好了，只要对应的url名称不变，url本身无论怎么变化，Django都可以解析到正确的地址，很灵活。

当然也可以直接在href中写入url的地址，但是一旦url有变化，所有相关的链接都会失效，维护性不好。

5.2、改写list.html

改写list.html，让用户可点击阅读文本进入文字详情：

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

<!-- 写入 base.html 中定义的 title  -->
{% block title %}
	首页
{% endblock title %}

<!-- 写入 base.html 中定义的content -->
{% block content %}

<!-- 定义放置文章标题的div容器 -->
<div class="container">
	<div class="row mt-2">

		{% for article in articles %}
		<!-- 文章内容 -->
		<div class="col-4 mb-4">
			<!-- 卡片容器 -->
			<div class="card h-100">
				<!-- 标题 -->
				<h4 class="card-body">{{ article.title }}</h4>
				<!-- 摘要 -->
				<div class="card-body">
					<p class="card-text">{{ article.body|slice:'100' }}</p>
				</div>
				<!-- 注脚 -->
				<div class="card-footer">
					<a class="btn btn-primary" href="{% url 'article:article_detail' article.id %}">阅读文本</a>
				</div>
			</div>
		</div>
		{% endfor %}

	</div>
</div>
{% endblock content %}

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值，并进行处理，最终定位了需要获取的文字对象；

六、查看效果

接下来就可以在list页面中通过点击阅读文本进入detail页面，通过点击文章返回list页面了。