Python + Django4 搭建个人博客（九）：引入Bootstrap渲染和美化博文列表

上篇我们实现了一个简单的展示博文信息的网页，但是网页看起来有点简陋。

Python + Django4 搭建个人博客（八）:实现博文列表页面的视图函数和模板_李威威wiwi的博客-CSDN博客

本篇我们在上篇的基础上，引入Bootstrap框架，对我们的模板进行修改，实现网页的渲染美化。

静态资源准备

在进行模板修改之前，我们先准备一下我们需要用到的静态资源。

这里我们直接使用当前最新的Bootstrap版本5 .13。

Bootstrap是用于网站开发的开源前端框架（“前端”指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。

先去Bootstrap的官网下载相关的生产文件：下载 Bootstrap · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网，并解压备用。

接着，我们新建文件夹，用来存放静态资源文件。

• 在项目根目录下新建目录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 %}
 
"zh-cn">
    
    "utf-8">
    
    
    
    "stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
 
{% include 'header.html' %}
{% block content %}{% endblock content %}
{% include 'footer.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

  
class="container">
    
    
    class="navbar-brand" href="#">我的博客
    
    
    
      
class="navbar-nav">
        
        
class="nav-item">