上篇我们实现了一个简单的展示博文信息的网页，但是网页看起来有点简陋。
本篇我们在上篇的基础上，引入Bootstrap框架，对我们的模板进行修改，实现网页的渲染美化。
静态资源准备
在进行模板修改之前，我们先准备一下我们需要用到的静态资源。
这里我们直接使用当前最新的Bootstrap版本5 .13。
Bootstrap是用于网站开发的开源前端框架（“前端”指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。
接着，我们新建文件夹，用来存放静态资源文件。
- 在项目根目录下新建目录
static/bootstrap/，用于存放Bootstrap静态文件。
最后将我们之前解压的Bootstrap文件夹内的CSS 和JS文件夹复制到我们刚刚新建的文件夹static/bootstrap/中。
静态资源配置
静态资源要在Django项目中被使用的话，我们需要修改相关的配置文件，以便Django可以识别到对应的路径。
我们在配置文件settin.py 中增加如下代码，告诉Django我们静态文件所在的位置：
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'), # 添加此项
]
改写模板
基础模板
Djang模板可以有继承的概念，相同结构的网页模板，我们可以做一个基础模板：先划分块，然后再根据实际的页面要求我们在不同的块里面填充我们的内容。
模板开发的过程实际上大部分是前端代码部分，以下开发代码部分涉及Bootstrap框架的内容，这里我们不做详细的说明，大家可以去Bootstrap的官方文档地址自行查阅学习： 简介 · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
这部分暂时不熟悉不影响我们学习Django。
比如我们先新建一个基础模板base.html:
<!-- 载入静态文件-->
{% load static %}
<!DOCTYPE html>
<!-- 网站主语言 -->
<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 依赖popper.js，因此在这里引入 -->
<!--
popper.js 采用 cdn 远程引入，意思是你不需要把它下载到本地。
在实际的开发中推荐静态文件尽量都使用 cdn 的形式。
教程采用本地引入是为了让读者了解静态文件本地部署的流程。
-->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- 引入bootstrap的js文件 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>这里我们又遇到了一些Django模板语法，新的标签语法说明如下：
{% load static %}：载入static静态文件，先载入static静态文件才能使用{% static ... %}标签引用静态文件。
{% static 'bootstrap/css/bootstrap.min.css' %}：引入 bootstrap的css文件。
{% block title %}{% endblock %}：预留网站标题的位置，此部分可以在继承此模板的子模板中通过{% block title %}{% endblock %}标签重新编写内容。
{% include 'header.html' %}：包含 header.html文件，相当于将header.html文件中的代码填充在指定位置。
下表是Django模板中常见的标签语法：
包含模板文件
接着我们分别编写两个包含在base.html中的子文件：
header.html
<!-- 定义导航栏 -->
<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>footer.html
{% load static %}
<!-- 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 © django4blog</p>
</div>
</footer>最后，我们改写下列表templates/article/list.html:
<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的div容器 -->
<div class="container">
{% for article in articles %}
<div class="row mt-2">
<!-- 文章内容 -->
<div class="col-sm-12">
<!-- 卡片容器 -->
<div class="card h-100">
<!-- 标题 -->
<!-- 摘要 -->
<div class="card-body">
<h4 class="card-title">{{ article.title }}</h4>
<p class="card-text">{{ article.body|slice:'100' }}...</p>
<a href="" class="card-link">阅读本文</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}我们重新运行服务器，打开地址：http://127.0.0.1:8000/article/
最后的效果图如下：
结语
本篇我们在上篇文章列表的模板上进行了一些修改，我们引入了Bootstrap框架的JS和Css静态文件。
在模板上通过模板标签在模板文件中加载了对应的静态文件。
本篇我们新学习了几个Django模板标签
-
{% load static %}：载入static静态文件，先载入static静态文件才能使用{% static ... %}标签引用静态文件。 -
{% static 'bootstrap/css/bootstrap.min.css' %}：引入bootstrap的css文件。 -
{% block title %}{% endblock %}：预留网站标题的位置，此部分可以在继承此模板的子模板中通过{% block title %}{% endblock %}标签重新编写内容。 -
{% include 'header.html' %}：包含header.html文件，相当于将header.html文件中的代码填充在指定位置。
另外我们还熟悉了django模板继承过程，模板继承的实现步骤如下：
1、在模板子模板（比如：list.html）中使用{% extends "base.html" %}来继承模板base.html的代码。
2、由标签{% block body %}在继承模板的基础上实现自定义模板的内容。
3、由{% endblock %}结束block标签。
下篇我们将实现博客网站的另一重要功能，文章详情的展示。
