从0到1搭建个人博客-Django(六)

你好，我是goldsunC

让我们一起进步吧！

从0到1搭建个人博客-Django(六)

在以下链接快速回顾系列文章内容

从0到1搭建个人博客-Django(一)
从0到1搭建个人博客-Django(二)
从0到1搭建个人博客-Django(三)
从0到1搭建个人博客-Django(四)
从0到1搭建个人博客-Django(五)

编写模板

在项目目录下的templates下新建三个文件：

base.html：它是整个项目的页面基础，所有其它的网页都继承它。
header.html：它是网页顶部的导航栏。
footer.html：它是网页底部的注脚。

创建完成之后template和article文件夹目录如下所示：

templates
│  base.html
│  footer.html
│  header.html
│
└─article
        list.html

然后我们开始编写模板，首先打开base.html，写入以下代码：

<!DOCTYPE html>
<!--
    载入静态文件
    使用 Django 3 学习的读者改为 {% load static %}
-->
{% load staticfiles %}

<!-- 网站主语言 -->
<html lang="zh-cn">
<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 引入bootstrap的css文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
    <!-- 引入导航栏 -->
    {% include 'header.html' %}
    <!-- 预留具体页面的位置 -->
    {% block content %}{% endblock content %}
    <!-- 引入注脚 -->
    {% include 'footer.html' %}
    <!-- bootstrap.js 依赖 jquery.js 和popper.js，因此在这里引入 -->
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>

    <!--
        popper.js 采用 cdn 远程引入，意思是你不需要把它下载到本地。
        在实际的开发中推荐静态文件尽量都使用 cdn 的形式。
        教程采用本地引入是为了让读者了解静态文件本地部署的流程。
    -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

    <!-- 引入bootstrap的js文件 -->
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>

然后打开header.html，写入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- 定义导航栏 -->
<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">
          <a class="nav-link" href="#">文章</a>
        </li>
      </ul>
    </div>

  </div>
</nav>
</body>
</html>

接着打开footer.html，写入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{% load staticfiles %}
<!-- Footer -->
<div>
    <br><br><br>
</div>
<footer class="py-3 bg-dark fixed-bottom">
    <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; goldsunC爱编程 2020</p>
    </div>
</footer>
</body>
</html>

最后打开之前的list.html，写入如下代码：

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

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

<!-- 写入 base.html 中定义的 content -->
{% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>


<!-- 定义放置文章标题的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-header">{
   
   { article.title }}</h4>
                <!-- 摘要 -->
                <div class="card-body">
                    <p class="card-text">{
   
   { article.body|slice:'100' }}...</p>
                </div>
                <!-- 注脚 -->
                <div class="card-footer">
                    <a href="#" class="btn btn-primary">阅读本文</a>
                </div>
            </div>
        </div>
        {% endfor %}

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

这个时候启动服务器，输入网址http://127.0.0.1:8000/article/article-list/，看看出现了什么：

在这里插入图片描述

一个简单的博客页面就出现在我们眼前了，如何？现在你可以随便点点试试，比如点击那个蓝色的阅读原文，点了之后并没有发生什么。是的，这是我们还没有给它分配路由、分配视图函数等操作，接下来我们增加文章详情页。

增加视图函数

打开article/views.py，增加函数article_detail()：

#	注意是是增加，不要把之前的article_list函数删除了
#   显示文章详情
def article_detail(request, id):
    #   取出相应文章
    article = ArticlePost.objects.get(id=id)
    #   需要传递给模板的对象
    context = {
    
    'article':article}
    #   载入模板，返回context对象
    return render(request, 'article/detail.html',context)

这里除了传入request这个HTTP请求外，还有一个id，这个id并不是我们创建的模型类参数，它是Django自动生成的用于索引数据表的主键。不信你打开数据库看看，里面有自动生成的id主键。

视图函数编写好了，然后呢？当然是给视图配置路由地址，打开article/urls.py，在urlpatterns中增加如下代码：

    # 文章详情
    path('article-detail/<int:id>/', views.article_detail, name='article_detail'),

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

编写文章详情模板

在templates/article/中新建detail.html文件，输入如下代码：

<!DOCTYPE html>
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}
<body>
<!-- 写入 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-success">作者：{
   
   { article.author }}</div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{
   
   { article.body }}</p>
        </div>
    </div>
</div>

{% endblock content %}
</body>
</html>

然后运行服务器，输入网址：http://127.0.0.1:8000/article/article-list/1/，出现如下界面：

在这里插入图片描述

注意这里是输入了http://127.0.0.1:8000/article/article-list/1/才访问到了这个页面。如果你在article-list页面点击那个蓝色的阅读本文是无法访问这个页面的，因为我们还没有给其增加链接。

优化网页入口

现在我们来实现点击网页右上角文章就能返回到http://127.0.0.1:8000/article/article-list/导向的那个文章页面，然后在那个页面点击蓝色的阅读本文就能导向文章的http://127.0.0.1:8000/article/article-list/1/页面。

打开header.html文件，这个文件主要就是负责网页的头部导航栏，打开之后改写代码：

<a class="nav-link" href="{% url 'article:article_list' %}">文章</a>

主要找到这一行哦，标签中有个文章俩字的那一行，看到改写的哪里了吗？如果你有HTML基础就会知道href是链接的参数，改了它链接的地址就能实现返回博客首页URL的功能。

然后打开article/list.html文件，让用户可以点击阅读本文蓝色按钮可以进入文章详情：

    <a href="{% url 'article:article_detail' article.id %}" class="btn btn-primary">阅读本文</a>

也是把href的参数改变了，这样就可以了。

这个时候打开服务器，输入http:127.0.0.1:8000/article/article-list/，打开博客文章列表页。去吧，点点按钮试试看。