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 #}
...
...
{# Global javascript #}
...
引入 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 #}
...
页头
新建 /slowread/templates/header.html ，内容如下：
页脚
新建 /slowread/templates/footer.html ，内容如下：
base.html
编辑页面模板文件 /slowread/templates/base.html ，内容如下：
{% load static wagtailuserbar %}
{% 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 %}
{# Global stylesheets #}
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% include 'header.html' %}
{% wagtailuserbar %}
{% block content %}
{% endblock %}
{% include "footer.html" %}
{# Global javascript #}
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock %}
首页布局
编辑 /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-chron
context = super().get_context(request)
page = Page.objects.get(title="文章列表")
blogpages = page.get_children().live().order_by('-first_published_at')[:3]
context['blogpages'] = blogpages
return context
content_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 %}
{{ self.title }}
{{ page.body|richtext }}
{% for post in blogpages %}
{% with post=post.specific %}
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image fill-320x240 as header_image %}
{% endif %}
{% endwith %}
{{ post.title }}
{% if post.intro %}
{{ post.intro|richtext }}
{% else %}
{{ post.body|richtext|truncatewords_html:80 }}
{% endif %}
{% endwith %}
{% endfor %}
更多文章
{% 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-chron
context = super().get_context(request)
blogpages = self.get_children().live().order_by('-first_published_at')
paginator = Paginator(blogpages, 3) # Show 3 resources per page
page = 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 template
context['blogpages'] = blogpages
return context
content_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 %}
{{ page.title }}
{% for post in blogpages %}
{% with post=post.specific %}
{{ post.title }}
{% if post.intro %}
{{ post.intro|richtext }}
{% else %}
{{ post.body|richtext|truncatewords_html:80 }}
{% endif %}
阅读全文
{% with post.main_image as main_image %}
{% if main_image %}
{% image main_image fill-160x100 %}
{% endif %}
{% endwith %}
{% endwith %}
{% endfor %}
{% endblock %}