网站搭建笔记精简版---廖雪峰WebApp实战-Day8:构建前端笔记

阅读量：4166 次

发布时间：2019-05-26

本文共 3146 字，大约阅读时间需要 10 分钟。

前面已经构建好MVC，可以进行可视化，但是，老丑了，因此需要CSS等进行美化一下。这样形容一下，html为网页的骨架，JavaScript为网页的肌肉，css为网页的衣服。

模板下载

感谢强大的互联网，我们可以通过找到已经写好的强大的CSS框架。它具备完善的响应式布局，漂亮的UI，以及丰富的HTML组件，让我们能轻松设计出美观而简洁的页面。

下载后，看了下与廖老师的代码对比，有点不一样呀，就直接下载了老师的，将static里的东西给复制过来。

模板生成

生成的许多前端网页html模板，当需要修改页眉页脚时候，需要所有的一个一个修改，老麻烦了，因此jinjia2的模板解决了这个问题，它具有“继承”的方式，实现模板的复用更简单。

base.html父模板编写

接下来我们基于uikit这个css框架写一下templates文件夹中的基网页的模板__base__.html。之后的各个子网页均基于这个网页派生出来的。

“继承”模板的方式是通过编写一个“父模板”，在父模板中定义一些可替换的block（块）。然后，编写多个“子模板”，每个子模板都可以只替换父模板定义的block。当用的时候或做项目的时候直接在这个页面上修改即可。

    
       # 用于子页面定义一些meta，例如rss feed    {% block meta %}
   {% endblock %}    # 用于子页面覆盖当前页面的标题    {% block title %} ? {% endblock %} - Awesome Python Webapp    
       
       
                       # 子页面可以在标签关闭前插入JavaScript代码    {% block beforehead %}
   {% endblock %}    
           
                
     Awesome            
                     
       日志
                
       教程
                
       源码
            
     
            
                     
      
                       {% if user %}                    
                                { { user.name }}                        
         
          
           登出
 
         
 
        
                    
                {% else %}                    
        登陆
                    
        注册
                {% endif %}                
      
            
     
        
    
    
   
    
           
    
                 # 子页面的content布局和内容            
                 {% block content %}            {% endblock %}            
             
    
    
   
    
           
                
                     
                                                                                                      
                
      Powered by Awesome Python Webapp. Copyright © 2014. [Manage]
                
      www.liaoxuefeng.com. All rights reserved.

blogs.html

接下来将上述__base__.html模板继承一个blogs.html出来，即将block替代。

# 强调继承自哪里{% extends '__base__.html' %}# 仅向block中的内容{% block title %}日志{% endblock %}{% block content %}    
   
            {% for blog in blogs %}            
                    
     {
  { blog.name }}
                # 若不加datetime则会显示浮点的时间，datetime在app.py中定义                # 因此通过jinja2的filter（过滤器），把一个浮点数转换成日期字符串。                
     发表于{
  { blog.created_at|datetime }}
                
     {
  { blog.summary }}
                
     继续阅读 
            
    
            
    
        {% endfor %}    
   
    
           
                
     友情链接
            
                     
       编程
                
       读书
                
       Python教程
                
       Git教程
            
     
        
    
    
   
{% endblock %}

app代码更改

在app.py中增加如下代码。

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))...

改后的app.py代码如图

模板应用

接下来直接在cmd命令行输入：python app.py，在浏览器输入http://localhost:9000/即可。

参考博客

转载地址：http://pmlxi.baihongyu.com/

你可能感兴趣的文章

模板下载

模板生成

base.html父模板编写

blogs.html

{ { blog.name }}

友情链接

app代码更改

模板应用

{
{ blog.name }}