Wagtail 教程 3：引入 Bootstrap 4，Font Awesome，页面布局优化

Wagtail 教程系列 记录了基于 Wagtail 搭建博客站点的整个过程，博客站点 所呈现的即是搭建过程的最新效果。

更多 Wagtail 内容：https://slowread.cn/wagtail-tutorials

此部分属于通用内容，非 Wagtail 必需内容，是为了完善/优化基于 Wagtail 搭建的博客。

引入 Bootstrap 4

http://getbootstrap.com/
https://code.z01.com/v4/

打开上面网址，下载以下文件并放置到相应项目目录下：

/slowread/static/css/bootstrap.min.css

/slowread/static/js/jquery-3.3.1.slim.min.js
/slowread/static/js/popper.min.js
/slowread/static/js/bootstrap.min.js

修改 /slowread/templates/base.html ，加入以下内容：

{# Global stylesheets #}
...
<link rel="stylesheet" type="text/css" href="{% static 'css/slowread.css' %}">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">

...

{# Global javascript #}
...
<script src="{% static 'js/jquery-3.3.1.slim.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/popper.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>

引入 Font Awesome

https://fontawesome.com/
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

下载文件，然后拷贝 /webfonts 和 /css/all.css 到 /slowread/static 目录下，结果如下：

/slowread/static/webfonts/fa-*.* 多个文件
/slowread/static/css/all.min.css 一个文件

修改 /slowread/templates/base.html ，加入以下内容：

{# Global stylesheets #}
...
<link href="{% static 'css/all.min.css' %}" rel="stylesheet" type="text/css">

页头

新建 /slowread/templates/header.html ，内容如下：

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="conta