这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战

添加博客详情页视图，显示博客详情

在上一节，我们成功的在博客页面显示了博客列表，这一节，我们将实现博客详情页的显示，当然现在的博客页面十分简陋，先实现基础逻辑，了解清楚项目开发路径，后面优化前端显示就会轻松很多。

首先我们需要添加一个新的视图ArticleDetailView，我们打开blog/views.py添加下面代码即可，

class ArticleDetailView(DetailView):
    model = Article
    template_name = 'article_detial.html'

这里ArticleDetailView类继承自DetailView，这样我们就可以轻松的对单个文章进行操作了。

添加好视图后，我们在templates中新建一个article_detial.html文件，用来展示文章详情页面内容。

<title>老表的博客</title>
<h1>{{article.title}}</h1>
<span>作者：{{article.author}}</span>
<hr/>
<blockquote style="margin:0 0 24px;background:#eef0f4;border-left:8px solid #dddfe4;">
    {{article.summary}}
</blockquote>
<div>
    <p>{{article.content}}</p>
</div>

简单展示文章内容，这里我们直接利用article对象即可，因为DetialView类会帮我们解析出来，前端显示新增了<span>短语显示标签，<hr/>分隔线，<blockquote>块引用标签，主要用做引用样式制作，并设置了style(标签样式，这里设置了背景颜色和左边界宽和颜色)，另外

块级元素，用作内容分隔。

设置好这些，我们需要配置下路由，打开blog/urls.py，添加一句

from django.urls import path
from blog import views

urlpatterns = [
    # 第一个参数：路由地址
    # 第二个参数：视图函数，直接通过views调用即可，要加上as_view
    # 第三个参数：路由名
    path('', views.HomeView.as_view(), name='home'),
    # <int:pk> pk表示文章的编号，系统自带的主键
    path('article/<int:pk>', views.ArticleDetailView.as_view(), name='detial'),
    
]

路由配置好了，还有一个地方我们需要修改下，就是博客主页面，我们需要给文章列表加上文字链接，这样我们点击对应的文章就可以跳转到对应文章的详情页面了，打开templates/home.html

<title>老表的博客</title>
<h1>博客列表</h1>

<ul>
{% for article in object_list %}
    <li>
        <a href="{% url 'detial' article.pk %}">{{article.title}} - {{article.author}}</a></br>
        {{article.summary}}
    </li>
{% endfor %}
</ul>

主要修改是给标题作者添加了一个a标签，设置了超链接，通过Django模版解析，设置为路由到名为detial的路由地址去，并且有一个值为article.pk，即文章id。

都设置好后我们就可以运行程序看效果啦～感觉还行，下一步，我们就来优化页面吧～

引入Bootstrap前端框架，优化页面

在前面我们已经完成了博客首页和详情页面的简单展示，这一节我们将引入前端框架 Bootstrap，帮我们美化前端显示页面，直接使用框架也能提升我们的开发效率，把更多时间花在业务逻辑上，而非前端样式编写上。

关于bootstrap的相关配置、入门介绍，在官网有很详细的介绍，

官方网站：getbootstrap.com/
国内教程网站：www.bootcss.com/

英文不是很好的推荐先看国内的教程网站，基本一模一样，有点英文基础的我都推荐看国外官网，不断锻炼自己英语阅读能力，不会的还可以直接谷歌翻译，也可以中英文教程对着看，总之在能提升英文阅读能力的前提下怎么舒服怎么来。

进入官网后，直接点击Get started进入教程，先不急将相关文件下载下来哈～

进入入门教程后，我们可以简单了解下，里面有说怎么引入css、js或者单个插件。

我们向下，可以找到Starter template入门模板，里面就已经包含了前面说的css js加载和html基本框架了。

我们直接复制模板代码，在templates中新建一个base.html文件，并将复制的bootstrap入门模板粘贴到文件内，base.html将作为我们所有页面的基础页面。

一般来说一个博客网站的头部和底部是基本不变的，头部一般是一个网站的导航栏，可以连接到网站的任意一个地方，而底部则往往是网站的声明和一些说明信息、友情链接等，如下截图所示：

以Bootstrap官网为例：头部

以Bootstrap官网为例：底部

所以我们对基础模板也进行简单的调整，先简单点，我们先将模板中的标题和正文内容设置的让其他页面可以自定义，很简单，我们将需要自定义内容的地方加上：

{% block block_name %}
(这里我们也可以设置一些默认值)
{% endblock %}

这样我们在子模块中就能直接使用{% eatends 'base.html' %}继承base.html内容了，base.html内容如下

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!-- 注意这里 标题内容添加了block标签，这样我们可以在子页面自定义title -->
  <title>
    {% block title %}

    {% endblock %}
  </title>
</head>

<body>
  <!-- 注意这里 body内容添加了block标签，这样我们可以在子页面自定义body内容了 -->
  {% block content %}

  {% endblock %}

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
</body>

</html>

避免大家出错，这里我把其他两个页面内容也发出来，首先是home.html：

{% extends 'base.html' %}

{% block title %}
老表的博客
{% endblock %}

{% block content %}
    
<h1>博客列表</h1>

<ul>
{% for article in object_list %}
    <li>
        <a href="{% url 'detial' article.pk %}">{{article.title}} - {{article.author}}</a></br>
        {{article.summary}}
    </li>
{% endfor %}
</ul>
{% endblock %}

文章详情页面article_detail.html：

{% extends 'base.html' %}

{% block title %}
    老表的博客-{{article.title}}
{% endblock %}

{% block content %}

<h1>{{article.title}}</h1>
<span>作者：{{article.author}}</span>
<hr/>
<blockquote style="margin:0 0 24px;background:#eef0f4;border-left:8px solid #dddfe4;">
    {{article.summary}}
</blockquote>
<div>
    <p>{{article.content}}</p>
</div>
{% endblock %}

是不是很简单，这样我们就在我们的项目中引入了Bootstrap前端框架，这里需要注意的是，子模块内{% extends 'base.html' %}必须在第一行，必须是子模块中的第一个标签。

上面都修改好后，我们可以试运行下项目，效果如下：

也许你会发现好像和之前没什么变化，没关系，通过文章详情页标题的变化和项目没有报错，我们知道我们应该是配置成功了。

接下来，我们就来应用更多Bootstrap的模块和插件、美化页面。

首先我们添加个导航栏，我们在官网打开Components/Navbar，就可以看到关于导航栏相关介绍和案例了，在介绍开头给了我们一个比较完整的导航栏示例代码，我们直接复制，然后粘贴到base.html。

如果你不知道该粘贴到什么地方，没关系，你可以随便打开一个博客网站，然后按住f12，审查元素，看看它的导航栏在什么标签下，一般会在body标签下，所以我们也放在body下面。保存代码后，我们再刷新页面，就会发现多了一个导航栏～我们修改下导航栏样式和内容，最终效果如下：是不是有一点酷了～只对导航栏部分进行修改哈，下面只展示导航栏部分代码：

<!-- 添加导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="{% url 'home' %}">
        <img src="https://files.mdnice.com/user/16444/ed3007c0-ae8d-43a9-aa25-e17c81bdef87.jpeg" alt="" width="24" height="24">
        老表的博客
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="{% url 'home' %}">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Python</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Go</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">程序人生</a>
          </li>
          
          <li class="nav-item">
            <a class="nav-link disabled">开发ing</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>

点赞在看留言转发，四连支持，原创不易。好的，那么下期见，我是爱猫爱技术，更爱思思的老表⁽⁽ଘ( ˙꒳˙ )ଓ⁾⁾

添加博客详情页视图，引入Bootstrap优化页面

添加博客详情页视图，显示博客详情

引入Bootstrap前端框架，优化页面