Day 8 – 构建前端

  • 2017-04-03
  • 21
  • 0

虽然我们跑通了一个最简单的MVC,但是页面效果肯定不会让人满意。

对于复杂的HTML前端页面来说,我们需要一套基础的CSS框架来完成页面布局和基本样式。另外,jQuery作为操作DOM的JavaScript库也必不可少。

从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局,漂亮的UI,以及丰富的HTML组件,让我们能轻松设计出美观而简洁的页面。

可以从uikit首页下载打包的资源文件。

所有的静态资源文件我们统一放到www/static目录下,并按照类别归类:

由于前端页面肯定不止首页一个页面,每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板,那么我们在修改页眉和页脚的时候,就需要把每个模板都改一遍,这显然是没有效率的。

常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分:

这样,相同的部分inc_header.htmlinc_footer.html就可以共享。

但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种“继承”方式,实现模板的复用更简单。

“继承”模板的方式是通过编写一个“父模板”,在父模板中定义一些可替换的block(块)。然后,编写多个“子模板”,每个子模板都可以只替换父模板定义的block。比如,定义一个最简单的父模板:

对于子模板a.html,只需要把父模板的titlecontent替换掉:

对于子模板b.html,如法炮制:

这样,一旦定义好父模板的整体布局和CSS样式,编写子模板就会非常容易。

让我们通过uikit这个CSS框架来完成父模板__base__.html的编写:

__base__.html定义的几个block作用如下:

用于子页面定义一些meta,例如rss feed:

覆盖页面的标题:

子页面可以在<head>标签关闭前插入JavaScript代码:

子页面的content布局和内容:

我们把首页改造一下,从__base__.html继承一个blogs.html

相应地,首页URL的处理函数更新如下:

Blog的创建日期显示的是一个浮点数,因为它是由这段模板渲染出来的:

解决方法是通过jinja2的filter(过滤器),把一个浮点数转换成日期字符串。我们来编写一个datetime的filter,在模板里用法如下:

filter需要在初始化jinja2时设置。相关代码如下:

现在,完善的首页显示如下:

Day 8 - 构建前端

参考源码

day-08

评论

还没有任何评论,也用不到你