{ { blog.name }}
# 若不加datetime则会显示浮点的时间,datetime在app.py中定义 # 因此通过jinja2的filter(过滤器),把一个浮点数转换成日期字符串。 { blog.created_at|datetime }}{
{ blog.summary }}本文共 3146 字,大约阅读时间需要 10 分钟。
前面已经构建好MVC,可以进行可视化,但是,老丑了,因此需要CSS等进行美化一下。这样形容一下,html为网页的骨架,JavaScript为网页的肌肉,css为网页的衣服。
感谢强大的互联网,我们可以通过找到已经写好的强大的CSS框架。它具备完善的响应式布局,漂亮的UI,以及丰富的HTML组件,让我们能轻松设计出美观而简洁的页面。
下载后,看了下与廖老师的代码对比,有点不一样呀,就直接下载了老师的,将static里的东西给复制过来。生成的许多前端网页html模板,当需要修改页眉页脚时候,需要所有的一个一个修改,老麻烦了,因此jinjia2的模板解决了这个问题,它具有“继承”的方式,实现模板的复用更简单。
接下来我们基于uikit这个css框架写一下templates文件夹中的基网页的模板__base__.html。之后的各个子网页均基于这个网页派生出来的。
“继承”模板的方式是通过编写一个“父模板”,在父模板中定义一些可替换的block(块)。然后,编写多个“子模板”,每个子模板都可以只替换父模板定义的block。当用的时候或做项目的时候直接在这个页面上修改即可。# 用于子页面定义一些meta,例如rss feed {% block meta %} {% endblock %} # 用于子页面覆盖当前页面的标题{% block title %} ? {% endblock %} - Awesome Python Webapp # 子页面可以在标签关闭前插入JavaScript代码 {% block beforehead %} {% endblock %}# 子页面的content布局和内容 {% block content %} {% endblock %}Powered by Awesome Python Webapp. Copyright © 2014. [Manage]
www.liaoxuefeng.com. All rights reserved.
接下来将上述__base__.html模板继承一个blogs.html出来,即将block替代。
# 强调继承自哪里{% extends '__base__.html' %}# 仅向block中的内容{% block title %}日志{% endblock %}{% block content %}{% for blog in blogs %}{% endblock %}{ { blog.name }}
# 若不加datetime则会显示浮点的时间,datetime在app.py中定义 # 因此通过jinja2的filter(过滤器),把一个浮点数转换成日期字符串。 { blog.created_at|datetime }}{
{ blog.summary }}
{% endfor %}
在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/