（八）丰富首页内容

1. 把静态资源文件放在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

2. 通过uikit框架完成父模板__base__.html的编写（templates文件夹下）：

    
    {% block meta %}{% endblock %}
    
    
    
    
    
    
    
    
    {% block beforehead %}{% endblock %}


    
    

        

            
            Awesome
            

                
 日志
                
                
 教程
                
 源码
            
            
            

                

                {% if user %}
                    
                    

                         {{ user.name }}
                        

                            

                                
 登出
                            
                        
                    
                {% else %}
                    
 登陆
                    
 注册
                {% endif %}
                
            
        
    

    

        

            {% block content %}{% endblock %}
        
    

    
    

        

            

                

                    
                    
                    
                    
                
                
Powered by Awesome Python Webapp. Copyright © 2017.  [Manage]
                
www.lx.com. All rights reserved.
                
            
        
    

3. 从__base__.html继承一个blogs.html，覆写里面的block：

{% extends '__base__.html' %}

{% block title %}日志{% endblock %}

{% block content %}

    

    {% for blog in blogs %}
        

            
{{ blog.name }}
            
            
发表于{{ blog.created_at|datetime }}
            
{{ blog.summary }}
            
继续阅读 
        
        

    {% endfor %}
    

    

        

            
友情链接
            

                
 编程
                
 读书
                
 Python教程
                
 Git教程
            
        
    
{% endblock %}

6. 为了测试效果，相应地调整一下handlers.py中的首页处理函数：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import re, time, json, logging, hashlib, base64, asyncio
from coroweb import get, post
from models import User, Comment, Blog, next_id

# 参数aiohttp.web.request实例，包含了所有浏览器发送过来的HTTP协议里面的信息
@get('/')
async 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='Write Sth', 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}

5. 测试下效果：

   
   
   

不过里面的东西都还点不了，只是有了大体的样貌。