Flask 模板

模板

1.使用Flask-Bootstrap集成Twitter Bootstrap

#Flask-Bootstrap 的初始化方法
from flask.ext.bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)

初始化 Flask-Bootstrap 之后,就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。这个模板利用 Jinja2 的模板继承机制,让程序扩展一个具有基本页面结构的基模板,其中就有用来引入 Bootstrap 的元素。

# 从 Flask-Bootstrap 中导入 bootstrap/base.html,从而实现模板继
承。
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}

{% endblock %}
{% block content %}
{% endblock %}

super

很多块都是 Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如,Bootstrap 所需的文件在 styles 和 scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用 Jinja2 提供的 super() 函数。例如,如果要在衍生模板中添加新的 JavaScript 文件,需要这么定义 scripts 块:

{% block scripts %}
{{ super() }}

{% endblock %}

2.自定义错误页面

像常规路由一样,Flask 允许程序使用基于模板的自定义错误页面。最常见的错误代码有两个:404,客户端请求未知页面或路由时显示;500,有未处理的异常时显示。为这两个错误代码指定自定义处理程序的方式如示例 3-6 所示。

@app.errorhandler(404)
def page_not_found(e):
 return render_template('404.html'), 404
@app.errorhandler(500)
def internal_server_error(e):
 return render_template('500.html'), 500

和视图函数一样,错误处理程序也会返回响应。它们还返回与该错误对应的数字状态码。

3.链接

url_for

Flask 提供了 url_for() 辅助函数,它可以使用程序 URL 映射中保存的信息生成 URL。

url_for() 函数最简单的用法是以视图函数名(或者 app.add_url_route() 定义路由时使用的端点名)作为参数,返回对应的 URL。例如,在当前版本的 hello.py 程序中调用 url_for('index') 得到的结果是 /。调用 url_for('index', _external=True) 返回的则是绝对地址,在这个示例中是 http://localhost:5000/。

使用 url_for() 生成动态地址时,将动态部分作为关键字参数传入。例如,url_for('user', name='john', _external=True) 的返回结果是 http://localhost:5000/user/john。
传入 url_for() 的关键字参数不仅限于动态路由中的参数。函数能将任何额外参数添加到查询字符串中。例如,url_for('index', page=2) 的返回结果是 /?page=2。

4.静态文件

默认设置下,Flask 在程序根目录中名为 static 的子目录中寻找静态文件。如果需要,可在static 文件夹中使用子文件夹存放文件。服务器收到前面那个 URL 后,会生成一个响应,包含文件系统中 static/css/styles.css 文件的内容。

href="{{ url_for('static', filename = 'favicon.ico') }}"

# templates/base.html:定义收藏夹图标
{% block head %}
# 注意如何使用 super() 保留基模板中定义的块的原始内容。
{{ super() }}


{% endblock %}

5.使用Flask-Moment本地化日期和时间

Flask-Moment 是一个 Flask 程序扩展,能把moment.js 集成到 Jinja2 模板中。

# 初始化 Flask-Moment
from flask.ext.moment import Moment
moment = Moment(app)

除了 moment.js,Flask-Moment 还依赖 jquery.js。要在 HTML 文档的某个地方引入这两个库,可以直接引入,这样可以选择使用哪个版本,也可使用扩展提供的辅助函数,从内容分发网络(Content Delivery Network,CDN)中引入通过测试的版本。Bootstrap 已经引入了 jquery.js,因此只需引入 moment.js 即可。示例 3-12 展示了如何在基模板的 scripts 块中引入这个库。

# templates/base.html:引入 moment.js 库
{% block scripts %}
{{ super() }}
{{ moment.include_moment() }}
{% endblock %}

为了处理时间戳,Flask-Moment 向模板开放了 moment 类。示例 3-13 中的代码把变量current_time 传入模板进行渲染。

from datetime import datetime
@app.route('/')
def index():
 return render_template('index.html',current_time=datetime.utcnow())

如何在模板中渲染 current_time。

The local date and time is {{ moment(current_time).format('LLL') }}.

That was {{ moment(current_time).fromNow(refresh=True) }}

format('LLL') 根据客户端电脑中的时区和区域设置渲染日期和时间。参数决定了渲染的方式,'L' 到 'LLLL' 分别对应不同的复杂度。format() 函数还可接受自定义的格式说明符。
第二行中的 fromNow() 渲染相对时间戳,而且会随着时间的推移自动刷新显示的时间。这个时间戳最开始显示为“a few seconds ago”,但指定 refresh 参数后,其内容会随着时间的推移而更新。如果一直待在这个页面,几分钟后,会看到显示的文本变成“a minuteago”“2 minutes ago”等。

还有format()、fromNow()、fromTime()、calendar()、valueOf()和 unix() 方法对时间进行格式化

# 将时间本地化  语言可在模板中选择,把语言代码传给 lang() 函数即可:
{{ moment.lang('es') }}

你可能感兴趣的:(Flask 模板)