[学习：Django搭建个人博客 5]使用 Bootstrap 4 改写模板文件下载 jquery、bootstrap，

配置Bootstrap 4

下载 jquery、bootstrap，过程省略。

在 article 文件夹下新建 static 文件夹,在 static 文件下再新建 article 文件，将下载的 jquery 、 bootstrap 拷贝进去。

目录如下:

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

确认一下settings.py中有STATIC_URL = '/static/'。

编写模板

在templates/中，新建三个文件：

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

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

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

base.html :

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

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

     <!-- 预留网站标题的位置 -->
    <title>{% block title %}{% endblock title %}</title>

    <!-- Bootstrap 的 CSS 文件 -->
    <link
      rel="stylesheet"
      href=" {% static 'bootstrap\css\bootstrap.min.css' %} "
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    
    <!-- 引入导航栏 -->
    {% include 'header.html' %}

    <!-- 预留具体页面的位置 -->
    {% block content %}{% endblock content %}

    <!-- 引入注脚 -->
    {% include 'footer.html' %}
    
    <!-- jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="{% static 'jquery\jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'bootstrap\js\bootstrap.bundle.min.js' %}"></script>
  </body>
</html>

header.html :

templates/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>

list.html

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

摘要中的{{ article.body|slice:'100' }}取出了文章的正文；其中的|slice:'100'是Django的过滤器语法，表示取出正文的前100个字符，避免摘要太长。

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;Nanaaa 2021</p>
    </div>
</footer>

[学习：Django搭建个人博客 5]使用 Bootstrap 4 改写模板文件

配置Bootstrap 4

编写模板

base.html :

header.html :

list.html

footer.html

运行服务器