flask-模板(下)
来源:互联网 发布:南京网络问政 雨花 编辑:程序博客网 时间:2024/06/04 23:20
模板继承
模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”, 并定义子模板可以覆盖的块。模板继承是重复使用代码的一种强大方式,它类似于 Python 代码中的类继 承。
首先,创建一个名为 base.html 的基模板:
<html><head> {% block head %} <title> {% block title %} {% endblock %} - My Application </title> {% endblock %}</head><body> {% block body %} {% endblock %</body></html>
block 标签定义的元素可在衍生模板中修改。上例中,定义了名为 head、title和body的块。注意, title 包含在head中。下面这个示例是基模板的衍生模板: 【extend.html】
{% extends "base.html" %}{% block title %}Index{% endblock %}{% block head %} {{ super() }} <h1>super</h1>{% endblock %}{% block body %} <h1>Hello, World!</h1>{% endblock %}
extends声明这个模板继承自base.html。在extends之后,基模板中的三个三个块被重新定义,模板引擎会将其插入适当的位置。若想添加内容到父模板内已经定义的块,又不想失去父模板里面的内容,可以使用super()函数
Flask-Bootstrap
Bootstrap是Twitter开发的一个开源框架,它提供的用户界面组件可用于创建整洁且具有吸引力的网页,而且这些网页还能兼容所有现代Web浏览器。
Bootstrap是客户端框架,因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap 层叠样式(CSS)和JavaScript文件的 HTML响应,并在HTML、CSS和JavaScript代码中实例化所需组件。这些操作最想的执行场所就是模板。
要想在程序中集成 Bootstrap, 显然要对模板做所有必要的改动。不过,更简单的方法是使用一个名为 Flask-Bootstrap 的 Flask 扩展,简化集成的过程。 Flask-Bootstrap 使用 pip安装:
(venv) $ pip install flask-bootstrap
Flask 扩展一般都在创建程序实例后就初始化。
初始化 Flask-Bootstrap 之后,就可以在程序中使用一个包含所有 Bootstrap 文件的基模板。
【boootstrap.html】
{% extends "bootstrap/base.html" %}{% block title %}Flasky{% endblock %}{% block navbar %}<div class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Flasky</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="/">Home</a></li> </ul> </div> </div></div>{% endblock %}{% block content %}<div class="container"> <div class="page-header"> <h1>Hello, {{ name }}!</h1> </div></div>{% endblock %}
Jinja2 中的 extends 指令从 Flask-Bootstrap 中导入 bootstrap/base.html,从而实现模板继承。
基模板中 block 和 endblock 指令定义的块中的内容可添加到基模板中。
上面这个模板,title 块的作用很明显,其中的内容会出现在渲染后的 HTML 文档 头部,放在 <title> 标签中。 navbar 和 content 这两个块分别表示页面中的导航条和主体内容。
在这个模板中, navbar 块使用 Bootstrap 组件定义了一个简单的导航条。content 块中有个<div> 容器, 其中包含一个页面头部。之前版本的模板中的欢迎信息,现在就放在这个页面头部。
from flask_bootstrap import Bootstrapbootstrap = Bootstrap(app)@app.route('/bootstrap/<name>')def bootstraptemplate(name): return render_template('boootstrap.html',name = name)
【注意】
很多块都是 Flask-Bootstrap 自用的,如果直接重定义可能会导致一些问题。例如, Bootstrap 所需的文 件在 styles 和 scripts 块中声明。如果程序需要向已经有内容的块中添加新内容,必须使用Jinja2 提供 的 super() 函数。例如,如果要在衍生模板中添加新的 JavaScript 文件,需要这么定义 scripts 块:
{% block scripts %}{{ super() }}<script type="text/javascript" src="my-script.js"></script>{% endblock %}
自定义错误页面
如果你在浏览器的地址栏中输入了不可用的路由,那么会显示一个状态码为 404 的错误页面。现在这个错误 页面太简陋、平庸,而且样式和使用了 Bootstrap 的页面不一致。
像常规路由一样, Flask 允许程序使用基于模板的自定义错误页面。最常见的错误代码有两个:
- 404, 客 户端请求未知页面或路由时显示;
- 500,有未处理的异常时显示。为这两个错误代码指定自定义处理程序的 方式如下所示: 【templates/404.html】
<h1> Page is not Found </h1>@app.errorhandler(404)def page_not_found(e): #这个e即使用不到,也必须要写上 return render_template('404.html'), 404
此时随便访问一个没有相应视图函数的网页,就会显示404.html。和视图函数一样,错误处理程序也会返回 响应。它们还返回与该错误对应的数字状态码。
静态文件
Web 程序不是仅由 Python 代码和模板组成。大多数程序还会使用静态文件,例如 HTML代码中引用的图片、 JavaScript 源码文件和 CSS。
默认设置下, Flask 在程序根目录中名为 static 的子目录中寻找静态文件。如果需要,可在static 文件 夹中使用子文件夹存放文件。给静态文件生成 URL ,使用特殊的 'static' 端点名:
【image.html】
<img src = "{{url_for('static',filename = 'd.jpg')}}">
@app.route('/images/')def images(): return render_template('image.html')
这个图片文件应该存储在文件系统上的 static/d.jpg 。
使用Flask-Moment本地化日期和时间
如果 Web 程序的用户来自世界各地,那么处理日期和时间不是一个简单的任务。
服务器需要统一时间单位, 这和用户所在的地理位置无关,所以一般使用协调世界时(Coordinated Universal Time,UTC)。不过用户看到 UTC 格式的时间会感到困惑,他们更希望看到当地时间,而且采用 当地惯用的格式。
要想在服务器上只使用 UTC 时间,一个优雅的解决方案是,把时间单位发送给 Web 浏览器,转换成当地时 间, 然后渲染。 Web 浏览器可以更好地完成这一任务,因为它能获取用户电脑中的时区和区域设置。
有一个使用 JavaScript 开发的优秀客户端开源代码库,名为 moment.js,它可 以在浏览器中渲染日期和时间。 Flask-Moment 是一个 Flask 程序扩展,能把moment.js 集成到 Jinja2 模 板中。 Flask-Moment 可以使用 pip 安装:
(venv) $ pip install flask-moment
这个扩展的初始化方法和Bootstrap一样,以程序实例app为参数:
from flask_moment import Momentmoment = Moment(app)
【base.html中增加了】
{% block scripts %}{{ super() }}{{ moment.include_moment() }}{% endblock %}
【moment.html】
{% extends "base.html" %}{% block page_content %}<div class="page-header"> <h1>Hello World!</h1></div><p>The local date and time is {{moment(current_time).format('LLL')}}.</p><p>That was {{moment(current_time).fromNow(refresh = true)}}.</p>{% endblock %}
format('LLL') 根据客户端电脑中的时区和区域设置渲染日期和时间。参数决定了渲染的方式, 'L' 到 'LLLL' 分别对应不同的时间显示格式。
fromNow() 渲染相对时间戳,会随着时间的推移自动刷新显示时间。 (这个时间戳最开始显 示为“a few seconds ago”,但指定 refresh 参数后,其内容会随着时间的推移而更新。 如果一直待在这 个页面,几分钟后,会看到显示的文本变成“a minuteago”“2 minutes ago”等)
增加路由。把变量current_time 传入模板进行渲染。
from datetime import datetime@app.route('/moment/')def momenttemplate():
return render_template('moment.html',current_time = datetime.utcnow())
- flask-模板(下)
- Flask模板
- flask模板
- Flask Web Development —— 模板(下)
- [Flask]学习杂记--模板
- flask使用渲染模板
- Flask中的模板
- flask笔记:3:模板
- flask学习笔记(-模板)
- Flask 学着用模板 render_template
- Flask 之模板
- Flask-模板渲染
- flask-模板(上)
- Flask入门四:模板
- Flask Jinja2模板
- Flask 教程,第二部分:模板
- Flask-HelloWorld-02 模板基础
- Flask的大型网站模板
- 十大悖论
- 一文读懂遗传算法工作原理(附Python实现)
- 范式理论(?NF)
- Socket连接与HTTP连接
- 光伏发电的基本原理
- flask-模板(下)
- 得到Class实例的三个方法是什么?
- Crontab使用语法格式
- 16.java中的框架
- python 创建txt文件
- soj2198: Highways_最小生成树Prim
- Unity入门操作_UGUI_Toggle_027
- 如何使用Kotlin的语言特性创建一个层次分明的URL建造器
- 自做CA自签发SSL证书