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

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

猜你喜欢