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

Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块
1. 配置Bootstrap 4及依赖文件

Bootstrap 4 下载地址 https://getbootstrap.com/docs/4.1/getting-started/download/
下载并解压js和css两个文件夹到新建目录**static/bootsrap/**下
因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行，因此这两个文件我们也需要一并下载保存。附上官网下载链接（进入下载页面，复制粘贴代码到新文件即可）：
jquery.js: https://jquery.com/download/
popper.js: https://popper.js.org/
全部完成后目录结构如图

同时我们应该告诉django我们静态文件的位置,因此在settings.py文件末尾加入如下代码:

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

2. 编写模板
在templates/中新建三个文件

base.html是整个项目的模板基础，所有的网页都从它继承；

header.html是网页顶部的导航栏；

footer.html是网页底部的注脚。
编写base.html

<!-- 载入静态文件 -->
{% load staticfiles %}
<!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 依赖 jquery.js 和popper.js，因此在这里引入 --><script src="{% static 'jquery/jquery-3.3.1.js' %}"></script><script src="{% static 'popper/popper-1.14.4.js' %}"></script>    <!-- 引入bootstrap的js文件 --><script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</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 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">footer</p></div>
</footer>

最后编写list.html

<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}首页
{% endblock title %}
<!-- 写入 base.html 中定义的 content -->
{% block content %}
<!-- 定义放置文章标题的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 %}

最后运行服务器在浏览器中输入: http://127.0.0.1:8000/article/article-list/

目录
Django个人博客搭建1-创建Django项目和第一个App
Django个人博客搭建2-编写文章Model模型,View视图
Django个人博客搭建3-创建superuser并向数据库中添加数据并改写视图
Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件
Django个人博客搭建5-编写文章详情页面并支持markdown语法
Django个人博客搭建6-对文章进行增删查改
Django个人博客搭建7-对用户登陆注册等需求的实现
Django个人博客搭建8-优化文章模块
Django个人博客搭建9-增加文章评论模块

Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件相关推荐

Django个人博客搭建8-优化文章模块
Django个人博客搭建1-创建Django项目和第一个App Django个人博客搭建2-编写文章Model模型,View视图 Django个人博客搭建3-创建superuser并向数据库中添加数据 ...
【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布
文章目录一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建三.Hexo博客搭建 3.1 基 ...
Django个人博客搭建教程---用Vue写你的第一个前后端分离页面
一.构建Vue.js前端项目 npm install vue-cli -g npm install webpack -g 在项目根目录下(和你的app目录平级) vue init webpack my ...
【个人博客搭建及配置四】站长统计
使用一个站长统计工具,可以为博客添加一个如上面似的详细的访问报表. 站长统计工具有很多,每个工具大同小异,这里我选择了CNZZ. CNZZ配置 1.注册一个账号. 2.添加网站. 按照如下要求添加网站 ...
Django个人博客搭建教程---图片存储与展示
写在最前面: 自己在阿里云部署的一个Django项目,自己给自己提了一个需求,随机展示一张图片配上文字,这样的话数据库就必须存储图片了下面上代码,仅仅做了admin的存储与前端展示 models.p ...
Django个人博客开发 | 前言
本渣渣不专注技术,只专注使用技术,不是一个资深的coder,是一个不折不扣的copier 1.前言自学 Python,始于 Django 框架,Scrapy 框架,elasticsearch搜索引擎 ...
【博客搭建2】Sakura主题的配置
提示:该文章适合纯新手,效果可进入我的博客bigdataxy.cc进行查看. [博客搭建2]Sakura主题的配置主题下载安装 github下载安装包相关文件介绍 CDN搭建第一步:创建gith ...
Django 系列博客（二）
Django 系列博客(二) 前言今天博客的内容为使用 Django 完成第一个 Django 页面,并进行一些简单页面的搭建和转跳. 命令行搭建 Django 项目创建纯净虚拟环境在上一篇博客 ...
基于Django的博客BBS项目
基于Django的博客BBS项目项目流程内容概要第一部分第二部分第三部分第四部分项目具体流程 1.数据库表创建及同步 1.1创建项目 1.2创建数据库 1.3修改配置文件与__init__ ...

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

Django个人博客搭建4-配置使用 Bootstrap 4 改写模板文件相关推荐

最新文章

热门文章