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

25098 views, 2020/07/22 updated   Go to Comments

注意:学本章之前请检查 Django 版本,确保安装的是 Django 2 而不是 Django 3,否则后面所有的章节都会遇到 staticfiles 无法载入的错误。

在虚拟环境中输入 pip list 即可查看。

上一章我们的网站页面实在太粗糙,你肯定不会拿来做真正的博客首页。因此这章我们要借助Bootstrap的力量,改写一个大气的博客。

配置Bootstrap 4

Bootstrap是用于网站开发的开源前端框架(“前端”指的是展现给最终用户的界面),它提供字体排印、窗体、按钮、导航及其他各种组件,旨在使动态网页和Web应用的开发更加容易。

Bootstrap有几个版本都比较流行,我们选择最新版本的Bootstrap 4:下载地址,并解压。

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

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

因为bootstrap.js依赖 jquery.js 和 popper.js 才能正常运行,因此这两个文件我们也需要一并下载保存。附上官网下载链接(进入下载页面,复制粘贴代码到新文件即可):

2020.07.22 更新:

由于 popper.js 版本兼容问题,教程改用 cdn 远程引入的形式,所以这里就不需要将 popper.js 下载到本地了。后面会讲到如何 cdn 引入。

现在我们的static/目录结构像这样:

my_blog
│
├─article
└─my_blog
│ ...
└─static
    └─bootstrap
    │   ├─css # 文件夹
    │   └─js # 文件夹
    └─jquery
    │   └─jquery-3.3.1.js # 文件
    └─popper
        └─popper-1.14.4.js # 文件 - 2020.07.22: 不用下载

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

my_blog/settings.py

...

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

再确认一下settings.py中有没有STATIC_URL = '/static/'字段,如果没有把它也加在后面。

编写模板

在根目录下的templates/中,新建三个文件:

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

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

  • footer.html是网页底部的注脚。

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

现在templates\的结构像下面这个样子:

templates
│
├─base.html
├─header.html
├─footer.html
└─article
    └─list.html # 上一章创建的

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

因为前端知识非常博大精深,并且也不是Django学习的重点,本教程不会展开篇幅去讲。如果之前没接触过前端知识也没关系,这里可以先复制粘贴,不影响后面Django的学习。

你可以试着改写其中的某段代码,看看会对页面产生什么样的影响;遇到不懂的就在Bootstrap官方文档找答案。慢慢就会明白它的运行机制,毕竟Bootstrap真的是非常简单易用的工具。

Bootstrap是非常优秀的前端框架,上手简单,所以很流行。你可以在官方网站上进行系统的学习。通篇看Bootstrap文档比较枯燥,因此建议你可以像查字典一样,需要用哪个模块,就到官网上找相关的代码,修改一下拷贝到你的项目中。

这里会一次性写大量代码,不要着急慢慢看,理解了就很简单了。

首先写base.html

templates/base.html

<!-- 
    载入静态文件
    使用 Django 3 学习的读者改为 {% load static %}
-->
{% 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' %} 引用静态文件。
  • HTML语法中,所有的内容都被标签包裹;标签及标签中的属性可以对内容进行排印、解释说明等作用。
  • <head></head>标签内包含网页的元数据,是不会在页面内显示出来的。<body></body>标签内才是网页会显示的内容。
  • 留意Bootstrap的css、js文件分别是如何引入的
  • jquery.js 和 popper.js 要在 bootstrap.js 前引入。

然后是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>

标签内的class属性是Bootstrap样式的定义方法。试着改写或删除其中一些内容,观察页面的变化。

然后改写之前的list.html

templates/article/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 %}
  • 留意{% block title %}{% block content %}是如何与base.html中相对应起来的。
  • 摘要中的{{ article.body|slice:'100' }}取出了文章的正文;其中的|slice:'100'是Django的过滤器语法,表示取出正文的前100个字符,避免摘要太长。

最后写入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 &copy; www.dusaiphoto.com 2018</p>
    </div>
</footer>

呼,真是一大堆的东西啊。

让我们来捋一捋发生了什么:

当我们通过url访问list.html时,顶部的{% extends "base.html" %}告诉Django:“这个文件是继承base.html的,你去调用它吧。”

于是Django就老老实实去渲染base.html文件:

  • 其中的{% include 'header.html' %}表明这里需要加入header.html的内容
  • {% include 'footer.html' %}加入footer.html的内容
  • {% block content %}{% endblock content %}表明这里应该加入list.html中的对应块的内容

运行服务器

老规矩,保存全部文件,进入虚拟环境,运行开发服务器,在浏览器中输入http://127.0.0.1:8000/article/article-list/,看到如下页面:

一个漂亮的博客界面就这样出现在眼前,非常神奇。

如果报错也不要着急,程序员就是不断与bug斗争的一个职业。仔细检查Django给出的错误提示,修复它,你一定行。

总结

本章我们引入了前端框架Bootstrap 4,借助它重新组织了模板的结构,编写了一个漂亮的博客网站的首页。

下一章我们将学习编写文章详情页面。




本文作者: 杜赛
发布时间: 2018年09月16日 - 09:25
最后更新: 2020年07月22日 - 10:10
转载请保留原文链接及作者
本站使用 Github 评论后端。鉴于国内复杂的网络环境,如遇评论无法加载、发表等问题,请尝试刷新页面,或更换上网姿势。