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

原创

贝勒里恩 2022-09-20 10:34:06 博主文章分类：python ©著作权

文章标签 html django 导航栏 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者贝勒里恩的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

一、编写视图函数

打开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/：

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

五、优化网页入口

虽然已经实现了文章详情功能，但是通过输入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>

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