Python Django个人网站搭建4-配置使用 Bootstrap 4 并改写模板文件

zifan

发布于 2021-12-14 12:22:30

1.9K0

发布于 2021-12-14 12:22:30

文章被收录于专栏：个人编程技术学习与分享

作者： zifanwang 发布于2020-05-08

这篇文章主要讲关于Bootstrap的配置并改写模板文件，以后所有的html文件都需要用到这些文件， Bootstrap的版本不同，显示效果会略有差别。

1. 配置Bootstrap 4及依赖文件

本站Bootstrap下载地址为https://zifan.site/down/files/11/ Bootstrap 4 的下载地址为 https://getbootstrap.com/docs/4.1/getting-started/download/ 下载并解压js和css两个文件夹到新建目录c:/mysite/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 static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
    {% include 'header.html' %}
    {% block content %}{% endblock content %}
    {% include 'footer.html' %}
    <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
    <script src="{% static 'popper/popper-1.14.4.js' %}"></script>    
    <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="#">My Site</a>
    <div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Article</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

footer.html

{% load static %}
<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" %}
{% load static %}
{% block title %}
    Article
{% endblock title %}
{% block content %}
<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">read</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock content %}

最后运行服务器 (打开cmd，cd到mysite目录下然后输入命令python manage.py runserver，下次就不说了。) 在浏览器中输入: http://127.0.0.1:8000/article/list/：