Django搭建个人博客--改写模板

原创

贝勒里恩 2022-09-20 10:33:52 博主文章分类：python ©著作权

文章标签 html bootstrap 静态文件 文章分类 运维

©著作权归作者所有：来自51CTO博客作者贝勒里恩的原创作品，请联系作者获取转载授权，否则将追究法律责任

Bootstrap4、jquery.js、popper.js 下载链接：

链接：https://pan.baidu.com/s/1HZ19327TDMtgkH5mXbRIcA
提取码：nx9p

一、配置Bootstrap 4

Bootstrap是用于网站开发的开源前端框架，下载好Bootstrap4之后解压。

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

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

Django搭建个人博客--改写模板_bootstrap

因为bootstrap.js依赖jquery.js和popper.js才能正常运行，因此这两个文件也需要下载并保存。

配置完之后的static目录如下：

Django搭建个人博客--改写模板_静态文件_02

Django搭建个人博客--改写模板_bootstrap_03

Django搭建个人博客--改写模板_html_04

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

Django搭建个人博客--改写模板_静态文件_05

二、编写模板

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

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

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

templates/现在的目录结构如下：

Django搭建个人博客--改写模板_html_06

2.1、编写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>
        <!-- 
            popper.js采用cdn远程引入，意思是不需要把它下载到本地。
            在实际开发中推荐静态文件尽量都使用cdn的形式。
            教程采用本地引入是为了让读者了解静态文件本地部署的流程
         -->
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1-lts/dist/umd/popper.min.js"></script>
        <!-- 引入bootstrap的js文件 -->
        <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    </body>
    
</html>

模板中要加上{% load staticfiles %}之后，才可使用{% static 'path' %}引用静态文件；
留意Bootstrap的css、js文件分别是如何引入的；
jquery.js和popper.js要在bootstrap.js前引入；

2.2、编写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>

2.3、编写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-body">{{ article.title }}</h4>
        <!-- 摘要 -->
        <div class="card-body">
          <p class="card-text">{{ article.body|slice:'100' }}</p>
        </div>
        <!-- 注脚 -->
        <div class="card-footer">
          <a class="btn btn-primary" href="#">阅读文本</a>
        </div>
      </div>
    </div>
    {% endfor %}

  </div>
</div>

留意{% block title %}和{% block content %}是如何与base.html中相对应起来的；
摘要中的{{ article.body|slice:'100' }}取出文字的正文；其中的|slice:'100'是Django的过滤器语法，表示取出正文的前100个字符，避免摘要太长；

2.4、编写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">Copyright © www.wangjichuan.cn 2020</p>
    </div>

</footer>