Django搭建个人博客：使用 Bootstrap 4 改写模板文件

最新推荐文章于 2022-07-07 10:13:29 发布

「已注销」

最新推荐文章于 2022-07-07 10:13:29 发布

阅读量5.4k

点赞数 3

分类专栏： Django 文章标签： django python

本文链接：https://blog.csdn.net/weixin_43217710/article/details/82776955

版权

本文介绍如何在Django项目中配置Bootstrap 4，创建静态文件夹，引入jQuery和popper.js，修改模板文件以实现美观的博客布局。通过详细步骤指导，包括设置静态文件路径，编写base.html、navbar.html、footer.html和index.html，展示了Bootstrap在Django中的应用，帮助初学者理解前后端交互并构建专业外观的博客页面。

摘要由CSDN通过智能技术生成

上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。

配置Bootstrap 4

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

Bootstrap有几个版本都比较流行，我们选择最新版本的Bootstrap 4：下载地址，并解压。

然后在项目根目录下新建目录static/bootsrap/，用于存放Bootstrap静态文件。静态文件通常指那些不会改变的文件。Bootstrap中的css、js文件，就是静态文件。

把刚才解压出来的css和js两个文件夹复制进去。

**因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行，因此这两个文件我们也需要一并下载保存。**附上官网下载链接（进入下载页面，复制粘贴代码到新文件即可）：

2018-10-29 新增：

不清楚popper.js如何下载的戳这个链接：

https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js

进去后页面显示很长一段代码，把这段代码全部拷贝；在项目中新建名叫popper.js的文件，把刚拷贝的代码复制进去就可以了。很多开源js文件都是通过这样的方式下载。

现在我们的static/目录结构像这样：

my_blog
│
├─article
└─my_blog
│ ...
└─static
    └─bootstrap
    │   ├─css # 文件夹
    │   └─js # 文件夹
    └─jquery
    │   └─jquery-3.3.1.js # 文件
    └─popper
        └─popper-1.14.4.js # 文件

因为在Django中需要指定静态文件的存放位置，才能够在模板中正确引用它们。因此在settings.py的末尾加上：

my_blog/settings.py

...

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

再确认一下settings.py中有没有STATIC_URL = '/static/'字段，如果没有把它也加在后面。

编写模板

在根目录下的templates/中，新建三个文件：

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

这三个文件在每个页面中通常都是不变的，独立出来可以避免重复写同样的代码，提高维护性。

现在templates\的结构像下面这个样子：

templates
│
├─base.html
├─header.html
├─footer.html
└─article
    └─list.html # 上一章创建的

加上之前的list.html，接下来就要重新写这4个文件了。

因为前端知识非常博大精深，并且也不是Django学习的重点，本教程不会展开篇幅去讲。如果之前没接触过前端知识也没关系，这里可以先复制粘贴，不影响后面Django的学习。

你可以试着改写其中的某段代码，看看会对页面产生什么样的影响；遇到不懂的就在Bootstrap官方文档找答案。慢慢就会明白它的运行机制，毕竟Bootstrap真的是非常简单易用的工具。

这里会一次性写大量代码，不要着急慢慢看，理解了就很简单了。

首先写base.html：

templates/base.html

<!-- 载入静态文件 -->
{% load staticfiles %}

<!DOCTYPE html>
<!-- 网站主语言 -->
<html lang="zh-cn">

<head>
    <!-- 网站采用的字符编码 -->
    <meta charset="utf-8">
    <!-- 预留网站标题的位置 -->
    <title

最低0.47元/天解锁文章

「已注销」

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Django搭建个人博客：使用 Bootstrap 4 改写模板文件

上一章我们的网站页面实在太粗糙，你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量，改写一个大气的博客。配置Bootstrap 4Bootstrap是用于网站开发的开源前端框架（“前端”指的是展现给最终用户的界面），它提供字体排印、窗体、按钮、导航及其他各种组件，旨在使动态网页和Web应用的开发更加容易。Bootstrap有几个版本都比较流行，我们选择最新版本的Boo...
复制链接

扫一扫