你好，我是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/popper.js@1.16.1-lts/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 © 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/，打开博客文章列表页。去吧，点点按钮试试看。
