2. Day 8 - 构建前端
    4. 阅读: 40099
    5. 虽然我们跑通了一个最简单的MVC，但是页面效果肯定不会让人满意。
    7. 对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。
    9. 从零开始写CSS不如直接从一个已有的功能完善的CSS框架开始。有很多CSS框架可供选择。我们这次选择uikit这个强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。
    11. 可以从uikit首页下载打包的资源文件。
    13. 所有的静态资源文件我们统一放到www/static目录下，并按照类别归类：
    15. static/
    16. +- css/
    17. |  +- addons/
    18. |  |  +- uikit.addons.min.css
    19. |  |  +- uikit.almost-flat.addons.min.css
    20. |  |  +- uikit.gradient.addons.min.css
    21. |  +- awesome.css
    22. |  +- uikit.almost-flat.addons.min.css
    23. |  +- uikit.gradient.addons.min.css
    24. |  +- uikit.min.css
    25. +- fonts/
    26. |  +- fontawesome-webfont.eot
    27. |  +- fontawesome-webfont.ttf
    28. |  +- fontawesome-webfont.woff
    29. |  +- FontAwesome.otf
    30. +- js/
    31.    +- awesome.js
    32.    +- html5.js
    33.    +- jquery.min.js
    34.    +- uikit.min.js
    35. 由于前端页面肯定不止首页一个页面，每个页面都有相同的页眉和页脚。如果每个页面都是独立的HTML模板，那么我们在修改页眉和页脚的时候，就需要把每个模板都改一遍，这显然是没有效率的。
    37. 常见的模板引擎已经考虑到了页面上重复的HTML部分的复用问题。有的模板通过include把页面拆成三部分：
    39. <html>
    40.     <% include file="inc_header.html" %>
    41.     <% include file="index_body.html" %>
    42.     <% include file="inc_footer.html" %>
    43. </html>
    44. 这样，相同的部分inc_header.html和inc_footer.html就可以共享。
    46. 但是include方法不利于页面整体结构的维护。jinjia2的模板还有另一种“继承”方式，实现模板的复用更简单。
    48. “继承”模板的方式是通过编写一个“父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。比如，定义一个最简单的父模板：
    50. <!-- base.html -->
    51. <html>
    52.     <head>
    53.         <title>{% block title%} 这里定义了一个名为title的block {% endblock %}</title>
    54.     </head>
    55.     <body>
    56.         {% block content %} 这里定义了一个名为content的block {% endblock %}
    57.     </body>
    58. </html>
    59. 对于子模板a.html，只需要把父模板的title和content替换掉：
    61. {% extends 'base.html' %}
    63. {% block title %} A {% endblock %}
    65. {% block content %}
    66.     <h1>Chapter A</h1>
    67.     <p>blablabla...</p>
    68. {% endblock %}
    69. 对于子模板b.html，如法炮制：
    71. {% extends 'base.html' %}
    73. {% block title %} B {% endblock %}
    75. {% block content %}
    76.     <h1>Chapter B</h1>
    77.     <ul>
    78.        <li>list 1</li>
    79.        <li>list 2</li>
    80.     </ul>
    81. {% endblock %}
    82. 这样，一旦定义好父模板的整体布局和CSS样式，编写子模板就会非常容易。
    84. 让我们通过uikit这个CSS框架来完成父模板__base__.html的编写：
    86. <!DOCTYPE html>
    87. <html>
    88. <head>
    89.     <meta charset="utf-8" />
    90.     {% block meta %}<!-- block meta  -->{% endblock %}
    91.     <title>{% block title %} ? {% endblock %} - Awesome Python Webapp</title>
    92.     <link rel="stylesheet" href="/static/css/uikit.min.css">
    93.     <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    94.     <link rel="stylesheet" href="/static/css/awesome.css" />
    95.     <script src="/static/js/jquery.min.js"></script>
    96.     <script src="/static/js/md5.js"></script>
    97.     <script src="/static/js/uikit.min.js"></script>
    98.     <script src="/static/js/awesome.js"></script>
    99.     {% block beforehead %}<!-- before head  -->{% endblock %}
    100. </head>
    101. <body>
    102.     <nav class="uk-navbar uk-navbar-attached uk-margin-bottom">
    103.         <div class="uk-container uk-container-center">
    104.             <a href="/" class="uk-navbar-brand">Awesome</a>
    105.             <ul class="uk-navbar-nav">
    106.                 <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
    107.                 <li><a target="_blank" href="#"><i class="uk-icon-book"></i> 教程</a></li>
    108.                 <li><a target="_blank" href="#"><i class="uk-icon-code"></i> 源码</a></li>
    109.             </ul>
    110.             <div class="uk-navbar-flip">
    111.                 <ul class="uk-navbar-nav">
    112.                 {% if user %}
    113.                     <li class="uk-parent" data-uk-dropdown>
    114.                         <a href="#0"><i class="uk-icon-user"></i> {{ user.name }}</a>
    115.                         <div class="uk-dropdown uk-dropdown-navbar">
    116.                             <ul class="uk-nav uk-nav-navbar">
    117.                                 <li><a href="/signout"><i class="uk-icon-sign-out"></i> 登出</a></li>
    118.                             </ul>
    119.                         </div>
    120.                     </li>
    121.                 {% else %}
    122.                     <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陆</a></li>
    123.                     <li><a href="/register"><i class="uk-icon-edit"></i> 注册</a></li>
    124.                 {% endif %}
    125.                 </ul>
    126.             </div>
    127.         </div>
    128.     </nav>
    130.     <div class="uk-container uk-container-center">
    131.         <div class="uk-grid">
    132.             <!-- content -->
    133.             {% block content %}
    134.             {% endblock %}
    135.             <!-- // content -->
    136.         </div>
    137.     </div>
    139.     <div class="uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
    140.         <div class="uk-container uk-container-center uk-text-center">
    141.             <div class="uk-panel uk-margin-top uk-margin-bottom">
    142.                 <p>
    143.                     <a target="_blank" href="#" class="uk-icon-button uk-icon-weibo"></a>
    144.                     <a target="_blank" href="#" class="uk-icon-button uk-icon-github"></a>
    145.                     <a target="_blank" href="#" class="uk-icon-button uk-icon-linkedin-square"></a>
    146.                     <a target="_blank" href="#" class="uk-icon-button uk-icon-twitter"></a>
    147.                 </p>
    148.                 <p>Powered by <a href="#">Awesome Python Webapp</a>. Copyright &copy; 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
    149.                 <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
    150.                 <a target="_blank" href="#"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
    151.             </div>
    152.         </div>
    153.     </div>
    154. </body>
    155. </html>
    156. __base__.html定义的几个block作用如下：
    158. 用于子页面定义一些meta，例如rss feed：
    160. {% block meta %} ... {% endblock %}
    161. 覆盖页面的标题：
    163. {% block title %} ... {% endblock %}
    164. 子页面可以在<head>标签关闭前插入JavaScript代码：
    166. {% block beforehead %} ... {% endblock %}
    167. 子页面的content布局和内容：
    169. {% block content %}
    170.     ...
    171. {% endblock %}
    172. 我们把首页改造一下，从__base__.html继承一个blogs.html：
    174. {% extends '__base__.html' %}
    176. {% block title %}日志{% endblock %}
    178. {% block content %}
    180.     <div class="uk-width-medium-3-4">
    181.         {% for blog in blogs %}
    182.             <article class="uk-article">
    183.                 <h2><a href="/blog/{{ blog.id }}">{{ blog.name }}</a></h2>
    184.                 <p class="uk-article-meta">发表于{{ blog.created_at}}</p>
    185.                 <p>{{ blog.summary }}</p>
    186.                 <p><a href="/blog/{{ blog.id }}">继续阅读 <i class="uk-icon-angle-double-right"></i></a></p>
    187.             </article>
    188.             <hr class="uk-article-divider">
    189.         {% endfor %}
    190.     </div>
    192.     <div class="uk-width-medium-1-4">
    193.         <div class="uk-panel uk-panel-header">
    194.             <h3 class="uk-panel-title">友情链接</h3>
    195.             <ul class="uk-list uk-list-line">
    196.                 <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">编程</a></li>
    197.                 <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">读书</a></li>
    198.                 <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Python教程</a></li>
    199.                 <li><i class="uk-icon-thumbs-o-up"></i> <a target="_blank" href="#">Git教程</a></li>
    200.             </ul>
    201.         </div>
    202.     </div>
    204. {% endblock %}
    205. 相应地，首页URL的处理函数更新如下：
    207. @get('/')
    208. def index(request):
    209.     summary = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
    210.     blogs = [
    211.         Blog(id='1', name='Test Blog', summary=summary, created_at=time.time()-120),
    212.         Blog(id='2', name='Something New', summary=summary, created_at=time.time()-3600),
    213.         Blog(id='3', name='Learn Swift', summary=summary, created_at=time.time()-7200)
    214.     ]
    215.     return {
    216.         '__template__': 'blogs.html',
    217.         'blogs': blogs
    218.     }
    219. Blog的创建日期显示的是一个浮点数，因为它是由这段模板渲染出来的：
    221. <p class="uk-article-meta">发表于{{ blog.created_at }}</p>
    222. 解决方法是通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。我们来编写一个datetime的filter，在模板里用法如下：
    224. <p class="uk-article-meta">发表于{{ blog.created_at|datetime }}</p>
    225. filter需要在初始化jinja2时设置。相关代码如下：
    227. def datetime_filter(t):
    228.     delta = int(time.time() - t)
    229.     if delta < 60:
    230.         return '1分钟前'
    231.     if delta < 3600:
    232.         return '%s分钟前' % (delta // 60)
    233.     if delta < 86400:
    234.         return '%s小时前' % (delta // 3600)
    235.     if delta < 604800:
    236.         return '%s天前' % (delta // 86400)
    237.     dt = datetime.fromtimestamp(t)
    238.     return '%s年%s月%s日' % (dt.year, dt.month, dt.day)
    240. ...
    241. init_jinja2(app, filters=dict(datetime=datetime_filter))
    242. ...
    243. 现在，完善的首页显示如下：
    247. 参考源码
    249. day-08