96.Day8构建前端
虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。
对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。
从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。
可以从uikit首页下载打包的资源文件。
所有的静态资源文件我们统一放到www/static目录下，并按照类别归类：
static/
+- css/
| +- addons/
| | +- uikit.addons.min.css
| | +- uikit.almost-flat.addons.min.css
| | +- uikit.gradient.addons.min.css
| +- awesome.css
| +- uikit.almost-flat.addons.min.css
| +- uikit.gradient.addons.min.css
| +- uikit.min.css
+- fonts/
| +- fontawesome-webfont.eot
| +- fontawesome-webfont.ttf
| +- fontawesome-webfont.woff
| +- FontAwesome.otf
+- js/
+- awesome.js
+- html5.js
+- jquery.min.js
+- uikit.min.js
由于前端页面肯定不止首页一个页面，每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板，那么我们在修改页眉和页脚的时候，就需要把每个模板都改一遍，这显然是没有效率的。
常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分：
<% include file=”inc_header.html” %>
<% include file=”index_body.html” %>
<% include file=”inc_footer.html” %>
这样，相同的部分inc_header.html和inc_footer.html就可以共享。
但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种”继承”方式，实现模板的复用更简单。
“继承”模板的方式是通过编写一个”父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个”子模板”，每个子模板都可以只替换父模板定义的block。比如，定义一个最简单的父模板：
}% block content %} 这里定义了一个名为content的block }% endblock %}
对于子模板a.html，只需要把父模板的title和content替换掉：
}% extends ‘base.html’ %}
}% block title %} A }% endblock %}
}% block content %}
Chapter A
blablabla...
}% endblock %}
对于子模板b.html，如法炮制：
}% extends ‘base.html’ %}
}% block title %} B }% endblock %}
}% block content %}
Chapter B
- list 1
- list 2
}% endblock %}
这样，一旦定义好父模板的整体布局和CSS样式，编写子模板就会非常容易。
让我们通过uikit这个CSS框架来完成父模板__base__.html的编写：
}% block meta %}}% endblock %}
}% block beforehead %}}% endblock %}
}% block content %}
}% endblock %}
Powered by Awesome Python Webapp. Copyright © 2014. [Manage]
www.liaoxuefeng.com. All rights reserved.
base.html定义的几个block作用如下：
用于子页面定义一些meta，例如rss feed：
}% block meta %} … }% endblock %}
覆盖页面的标题：
}% block title %} … }% endblock %}
子页面可以在
标签关闭前插入JavaScript代码：}% block beforehead %} … }% endblock %}
子页面的content布局和内容：
}% block content %}
…
}% endblock %}
我们把首页改造一下，从__base__.html继承一个blogs.html：
}% extends ‘base.html’ %}
}% block title %}日志}% endblock %}
}% block content %}
}% endblock %}
相应地，首页URL的处理函数更新如下：
@get(‘/‘)
def index(request):
summary = ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.’
blogs = [
Blog(id=’1’, name=’Test Blog’, summary=summary,
created_at=time.time()-120),
Blog(id=’2’, name=’Something New’, summary=summary,
created_at=time.time()-3600),
Blog(id=’3’, name=’Learn Swift’, summary=summary,
created_at=time.time()-7200)
]
return }
‘template‘: ‘blogs.html’,
‘blogs’: blogs
}
Blog的创建日期显示的是一个浮点数，因为它是由这段模板渲染出来的：
解决方法是通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。我们来编写一个datetime的filter，在模板里用法如下：
filter需要在初始化jinja2时设置。相关代码如下：
def datetime_filter(t):
delta = int(time.time() - t)
if delta < 60:
return ‘1分钟前’
if delta < 3600:
return ‘%s分钟前’ % (delta // 60)
if delta < 86400:
return ‘%s小时前’ % (delta // 3600)
if delta < 604800:
return ‘%s天前’ % (delta // 86400)
dt = datetime.fromtimestamp(t)
return ‘%s年%s月%s日’ % (dt.year, dt.month, dt.day)
…
init_jinja2(app, filters=dict(datetime=datetime_filter))
…
现在，完善的首页显示如下：
本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！