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="container"><!-- 导航栏标识 --><a class="navbar-brand" href="/">慢读 慢生活</a><!-- 导航入口 --><div><ul class="navbar-nav"><!-- 条目 --><li class="nav-item"><a class="nav-link" href="/blog">博客文章</a></li></ul></div></div>
</nav>

页脚

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

<!-- Footer -->
<footer class="py-3 bg-primary"><div class="container"><p class="m-0 text-center text-white">Copyright &copy; <a class="m-0 text-center text-white" href="https://slowread.net">SlowRead.net</a> 2018</p></div>
</footer>

base.html

编辑页面模板文件 /slowread/templates/base.html ，内容如下：

{% load static wagtailuserbar %}<!DOCTYPE html>
<html lang="zh_cn"><head><meta charset="utf-8" /><title>{% block title %}{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}{% endblock %}{% block title_suffix %}{% with self.get_site.site_name as site_name %}{% if site_name %}- {{ site_name }}{% endif %}{% endwith %}{% endblock %}</title><meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="icon" type="image/png" sizes="32x32" href="{% static 'media/slowread-32x32.ico' %}"><link rel="icon" type="image/png" sizes="16x16" href="{% static 'media/slowread-16x16.ico' %}">{# 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"><link href="{% static 'css/all.min.css' %}" rel="stylesheet" type="text/css">{% block extra_css %}{# Override this in templates to add extra stylesheets #}{% endblock %}</head><body class="{% block body_class %}{% endblock %}"><!-- 引入导航栏 -->{% include 'header.html' %}{% wagtailuserbar %}<div class="container">{% block content %}{% endblock %}</div><!-- 引入注脚 -->{% include "footer.html" %}{# Global javascript #}<script type="text/javascript" src="{% static 'js/slowread.js' %}"></script><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>{% block extra_js %}{# Override this in templates to add extra javascript #}{% endblock %}</body>
</html>

首页布局

编辑 /slowread/home/models.py ，内容如下：

class HomePage(Page):body = RichTextField(blank=True)def get_context(self, request):# Update context to include only published posts, ordered by reverse-chroncontext = super().get_context(request)page = Page.objects.get(title="文章列表")blogpages = page.get_children().live().order_by('-first_published_at')[:3]context['blogpages'] = blogpagesreturn contextcontent_panels = Page.content_panels + [FieldPanel('body', classname="full"),]

编辑 /slowread/home/templates/home/home_page.html ，内容如下：

{% extends "base.html" %}{% load wagtailcore_tags wagtailimages_tags %}{% block body_class %}template-homepage{% endblock %}{% block content %}<h1 class="mt-2">{{ self.title }}</h1>{{ page.body|richtext }}<hr><div class="card-deck mb-2">{% for post in blogpages %}{% with post=post.specific %}<div class="card" style="width: 18em;">{% with post.main_image as main_image %}{% if main_image %}{% image main_image fill-320x240 as header_image %}<a href="{% pageurl post %}"><img src="{{ header_image.url }}"  class="card-img-top" /></a>{% endif %}{% endwith %}<div class="card-body"><h5 class="card-title"><a href="{% pageurl post %}">{{ post.title }}</a></h5><p class="card-text">{% if post.intro %}{{ post.intro|richtext }}{% else %}{{ post.body|richtext|truncatewords_html:80 }}{% endif %}</p></div><div class="card-footer"><small class="text-muted"><a href="{% pageurl post %}" class="btn btn-primary">阅读全文</a></small></div></div>{% endwith %}{% endfor %}</div><hr><a class="nav-link text-center" href="/blog">更多文章</a><hr>{% endblock %}

文章列表页分页

编辑 /slowread/blog/models.py ，修改 BlogIndexPage 内容如下：

class BlogIndexPage(Page):intro = RichTextField(blank=True)def get_context(self, request):# Update context to include only published posts, ordered by reverse-chroncontext = super().get_context(request)blogpages = self.get_children().live().order_by('-first_published_at')paginator = Paginator(blogpages, 3) # Show 3 resources per pagepage = request.GET.get('page')try:blogpages = paginator.page(page)except PageNotAnInteger:# If page is not an integer, deliver first page.blogpages = paginator.page(1)except EmptyPage:# If page is out of range (e.g. 9999), deliver last page of results.blogpages = paginator.page(paginator.num_pages)# make the variable 'resources' available on the templatecontext['blogpages'] = blogpagesreturn contextcontent_panels = Page.content_panels + [FieldPanel('intro', classname="full")]

采用Boostrap 4 的分页 Pagination 导航样式，编辑 /slowread/blog/templates/blog/blog_index_page.html ，内容如下：

{% extends "base.html" %}{% load wagtailcore_tags wagtailimages_tags %}{% block body_class %}template-blogindexpage{% endblock %}{% block content %}<h1 class="mt-2">{{ page.title }}</h1><!-- <div class="intro">{{ page.intro|richtext }}</div> -->{% for post in blogpages %}{% with post=post.specific %}<div class="card mb-2"><h4 class="card-header"><a href="{% pageurl post %}">{{ post.title }}</a></h4><div class="card-body"><div class="row"><div class="col-auto mr-auto">{% if post.intro %}{{ post.intro|richtext }}{% else %}{{ post.body|richtext|truncatewords_html:80 }}{% endif %}<a href="{% pageurl post %}" class="btn btn-primary mt-2 mb-2">阅读全文</a></div><div class="col-auto">{% with post.main_image as main_image %}{% if main_image %}<a href="{% pageurl post %}">{% image main_image fill-160x100 %}</a>{% endif %}{% endwith %}</div></div></div></div>{% endwith %}{% endfor %}<nav aria-label="Page navigation"><ul class="pagination justify-content-center">{% if blogpages.has_previous %}<li class="page-item"><a class="page-link" href="?page={{ blogpages.previous_page_number }}">&laquo;</a></li>{% endif %}{% for page_num in blogpages.paginator.page_range %}<li {% if page_num == blogpages.number %} class="active page-item"{% endif %}><a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a></li>{% endfor %}{% if blogpages.has_next %}<li class="page-item"><a class="page-link" href="?page={{ blogpages.next_page_number }}">&raquo;</a></li>{% endif %}</ul></nav><hr>{% endblock %}