Python + Django4 搭建个人博客（九）：Bootstrap实现博客列表页面

李威威wiwi

已于 2022-08-31 14:17:03 修改

阅读量2k

点赞数 2

分类专栏： Python+Django4 搭建个人博客文章标签：前端 django bootstrap

于 2022-08-30 13:15:01 首次发布

本文链接：https://blog.csdn.net/agelee/article/details/126601815

版权

Python+Django4 搭建个人博客专栏收录该内容

20 篇文章 84 订阅

订阅专栏

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

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 %}

<!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 &copy; 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标签。

下篇我们将实现博客网站的另一重要功能，文章详情的展示。

李威威wiwi

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Python + Django4 搭建个人博客（九）：Bootstrap实现博客列表页面

本篇我们在上篇文章列表的模板上进行了一些修改，我们引入了Bootstrap框架的JS和Css静态文件。在模板上通过模板标签在模板文件中加载了对应的静态文件。我们还熟悉了django模板继承过程，模板继承的实现步骤如下：1、在模板子模板（比如：list.html）中使用{% extends "base.html" %}来继承模板base.html的代码。2、由标签{% block body %}在继承模板的基础上实现自定义模板的内容。3、由{% endblock %}结束block标签。......
复制链接

扫一扫