至此，后端工作基本构建完成。接下要开始设计和编程前端页面了。为了更容易构建出复杂的HTML前端页面，我们需要一套基础的CSS框架和jQuery作为操作DOM的JavaScript库。
如今好用流行的CSS框架有很多例如：Bootstrap, Pure CSS, Bulma, Semantic UI 等。此教程会使用UIkit 作为网站的CSS 框架，具体的教程请参考官方Documentation。请下载UIkit的最新版本(3.0.0或以上，最新的是3.4.2，廖大用的UIkit 2.0 将不适用)，将js和css文件放入www/static相应的文件目录中：
+- css/
| +- awesome.css ## 自定义的css
| +- uikit.min.css
+- js/
+- awesome.js ## 自定义的script
+- jquery.min.js
+- uikit.min.js
+- uikit-icons.min.js
+- sha1.min.js ## 计算HASH值
+- vue.min.js ## Vue是一种MVVM前端框架, 我们会用它将数据及数据操作与HTML页面显示联系起来
+- sticky.min.js ## 实现黏性布局
由于前端包含很多页面，而每个页面都会有相同的页眉和页脚，最有效率的方法就是构建可以继承的父模板, jinja2提供了很便捷方法用可替换的block来建立模板。例如最简单的父模板base.html：
<html>
<head>
<title>{% block title%} 子模板可替换title内容 {% endblock %}</title>
</head>
<body>
{% block content %} 子模板可替换content内容 {% endblock %}
</body>
</html>
对于子模板a.html, b.html, c.html，只需要把父模板的title和content替换掉：
{% extends 'base.html' %}
{% block title %} A or B or C {% endblock %}
{% block content %}
<h1>Chapter A or B or C</h1>
<p>blablabla...</p>
{% endblock %}
知道了如何用jinja2, 我们就可以用UIkit框架来完成网站父模板__base__.html的编写了（请将所有的html文件存放在www/templates目录下）。
<!DOCTYPE html>
<!--处理分页导航栏代码-->
{% macro pagination(page) %}
<ul class="uk-pagination uk-flex-center uk-margin-medium-top uk-margin-large-bottom">
{% if page.has_previous %}
<li><a href="?page={{ page.page_index - 1 }}"><span uk-pagination-previous></span></a></li>
{% else %}
<li class="uk-disabled"><a href="#"><span uk-pagination-previous></span></a></li>
{% endif %}
<li class="uk-active"><span>{{ page.page_index }}</span></li>
{% if page.has_next %}
<li><a href="?page={{ page.page_index + 1 }}"><span uk-pagination-next></span></a></li>
{% else %}
<li class="uk-disabled"><a href="#"><span uk-pagination-next></span></a></li>
{% endif %}
</ul>
{% endmacro %}
<!--导航页代码-->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width,initial-scale=0.9,minimum-scale=0.9,maximum-scale=0.9,user-scalable=no">
<meta name="wap-font-scale" content="no">
<!--jinja2 meta块-->
{% block meta %}<!-- block meta -->{% endblock %}
<!--jinja2 title块-->
<title>{% block title %} ? {% endblock %}| AwesomeDavidBlog</title>
<link rel="stylesheet" href="/static/css/uikit.min.css">
<link rel="stylesheet" href="/static/css/awesome.css" />
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/sha1.min.js"></script>
<script src="/static/js/uikit.min.js"></script>
<script src="/static/js/icons.min.js"></script>
<script src="/static/js/sticky.min.js"></script>
<script src="/static/js/vue.min.js"></script>
<script src="/static/js/awesome.js"></script>
<!--jinja2 beforehead块-->
{% block beforehead %}<!-- before head -->{% endblock %}
</head>
<!--导航页正文内容-->
<body>
<!--"uk-"开头的都是UIkit里的组件，具体请参考UIkit官网的Documents详解-->
<!--uk-visible@m是大于中等尺寸屏幕时显示的UI-->
<div class="uk-margin uk-visible@m" style="background-color:rgba(100,150,185,0);">
<div class="uk-container uk-container-medium">
<!--导航栏UI-->
<nav class="uk-navbar-container" uk-navbar style="background-color:rgba(255,255,255,0);">
<div class="uk-navbar-left uk-margin-medium-top uk-margin-medium-bottom">
<a class="uk-navbar-item uk-logo uk-margin-left" href="/">
<!--此处uk-icon为图标,读者可以选UIkit自带icon,也可以添加自定义icon重新打包uk-icon.js,详见官网Documentation-->
<span class="uk-icon uk-margin-small-right" uk-icon="pagekit" ratio="2"></span>
凹大卜
</a>
<ul class="uk-navbar-nav">
<li><a href="/"> Article | 日志</a></li>
<li><a href="https://aodabo.tech/tags/tutorial"> Tutorial | 教程</a></li>
<li><a href="https://aodabo.tech/tags/landscape"> Landscape | 景观</a></li>
<li><a href="https://aodabo.tech/tags/coding"> Coding | 编程</a></li>
</ul>
</div>
<div class="uk-navbar-right uk-margin-medium-top uk-margin-medium-bottom">
<ul class="uk-navbar-nav">
{% if __user__ %}
<li>
<a href="#0"> {{ __user__.name }}</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li><a href="/manage/"> Manage</a></li>
<li><a href="/signout"> Logout</a></li>
</ul>
</div>
</li>
{% else %}
<li><a href="/signin"> Login</a></li>
<li><a href="/register"> Register</a></li>
{% endif %}
</ul>
</div>
</nav>
</div>
</div>
<!--uk-hidden@m是小于中等尺寸屏幕时显示的UI-->
<nav class="uk-navbar-container uk-margin-medium uk-hidden@m" uk-navbar style="background-color:rgba(255,255,255,0);">
<div class="uk-navbar-left">
<a class="uk-navbar-item uk-logo" href="/">
<span class="uk-icon uk-margin-small-right" uk-icon="pagekit" ratio="2"></span>
凹大卜
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a class="uk-navbar-toggle" uk-toggle="target: #offcanvas-nav" uk-navbar-toggle-icon></a>
<div id="offcanvas-nav" uk-offcanvas="overlay: true; flip: true">
<div class="uk-offcanvas-bar uk-flex uk-flex-column">
<ul class="uk-nav uk-nav-default uk-margin-auto-vertical">
<li><a href="/"> Article | 日志</a></li>
<li><a href="https://aodabo.tech/tags/tutorial"> Tutorial | 教程</a></li>
<li><a href="https://aodabo.tech/tags/landscape"> Landscape | 景观</a></li>
<li><a href="https://aodabo.tech/tags/coding"> Coding | 编程</a></li>
{% if __user__ %}
<li><a href="/manage/">Manage | 管理</a></li>
<li><a href="/signout"> Logout | 注销</a></li>
{% else %}
<li><a href="/signin"> Login | 登陆</a></li>
<li><a href="/register"> Register | 注册</a></li>
{% endif %}
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="uk-container uk-container-medium">
<!-- jinja2 content块 -->
{% block content %}
{% endblock %}
</div>
<!-- 页面底部图标栏和网站信息 -->
<div class="uk-margin-medium">
<div class="uk-container uk-container-center uk-text-center">
<p>
<a target="_blank" href="https://github.com/yzyly1992" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="github" rel="noopener noreferrer"></a>
<a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="instagram" rel="noopener noreferrer"></a>
<a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.2" uk-icon="twitter" rel="noopener noreferrer"></a>
<a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.2" uk-icon="google-plus" rel="noopener noreferrer"></a>
<a target="_blank" href="#" class="uk-icon-button uk-margin-small-right" ratio="1.1" uk-icon="linkedin" rel="noopener noreferrer"></a>
</p>
<p class="uk-text-meta" style="line-height: 10px; padding: 10px 0; margin: 8px 0;">Powered by <a href="https://aodabo.tech">AwesomeDavidBlog!</a> Copyright © 2018.</p>
<p class="uk-text-meta" style="line-height: 0px; padding: 0px 0; margin: 0px 0;"><a href="https://aodabo.tech/" target="_blank" rel="noopener noreferrer">Zhiyuan Yang</a>. All rights reserved.</p>
</div>
</div>
</body>
</html>
