3 模板
模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。
3.1 模板基本使用
HTML实体:https://dev.w3.org/html5/html-author/charref
Jinja2定界符:
- 语句:
{% ... %}
- 表达式:
{{ ... }}
- 注释:
{# ... #}
注:适度使用模板,仅放和输出控制有关的逻辑操作。
补充:
render_template()
中,也可以传入python函数,并在模板中调用。
上下文:
-
在模板中定义变量:使用
set
标签。(p80) - 内置上下文变量:config,request,session,g。
-
自定义上下文:
@app.context_processor
,等(p81)
全局对象:
-
Flask内置模板全局函数:
url_for()
用于生产URL,get_flashed_messages()
用于获取flask消息。
自定义全局函数:@app.template_global()
装饰器
过滤器:修改和过滤变量值的特殊函数。
{{ name|title }}
{% filter upper %}
This itext becomes upperase.
{% endfilter %}
Jinja2常用内置过滤器(p83)
-
自定义过滤器:
@app.emplate_filter()
测试器:测试变量或表达式,返回布尔值 ,使用@app.template_test()
自定义。
{% if foo is sameas(bar) %}...
模板环境对象:控制渲染行为,包含配置选项、上下文变量、全局函数(globals)、过滤器(filters)、测试器(tests),在app.jinja_env
属性。
# 添加自定义全局对象
def bar():
return 'I am bar.'
app.jinja_env.globals['bar'] = bar
3.2 模板结构组织
局部模板:减少代码重复。在ajax请求中可以只返回一个局部模板,而不是整个页面。
{% include '_banner.html' %}
宏:(macro)类似函数,也为了代码重用。
-
注意:
include
会自动传递上下文;而import
不会,需要显示传递。
{% from 'macros.html' import qux with context%}
...
{{ qux(amount=5) }}
模板继承:在基模板中定义基本的HTML结构,而子模板只需要对特定的块进行修改(覆盖或追加{{ super() }}
)。(p90)
{% extends 'base.html' %}
{% block content %}
...
{% endblock content %}
3.3 模板进阶
空白控制:模板中的Jinja2语句会保留移除后的空行,但不影响浏览器的解析。可以使用工具去除空白,减小文件体积,提高数据传输速度。
{%- endif %}
加载静态文件:默认存放在主脚本同级目录的static文件夹中,使用url_for()
函数获取。Flask内置了用于获取静态文件的视图函数,端点值为static。
{{ url_for('static', filename='avatar.jpg') }}
- Favicon:浏览器在标签页、地址栏、收藏夹等处显示的小图标。(p96)
- 从CDN加载静态资源更方便
- 可以创建一个专门用于加载静态资源的宏。
疑惑:对favicon的请求是自动的吗,所有项目都有?
消息闪现:在视图函数调用flash()
函数,你的消息将存储在session
中,然后再模板中使用全局函数get_flashed_messages()
获取消息并显示,调用后会清空session中的消息。
{% for message in get_flashed_messages() %}
{{ message }}
{% endfor %}
- 文本字符串编码问题:(p98)
自定义错误页面:默认的简陋错误页面往往另用户不知所措,我们可以注册错误处理函数来自定义错误页面。
@app.errorhandler(404)
def page_not_found(e):
return render_template('errors/404.html'), 404
JavaScript和CSS中的Jinja:有时需要再JavaScript或CSS代码中使用Jinja2提供的变量,如我们希望将用户设置的主题颜色设置到对应的CSS规则中。
-
只有使用
render_template()
传入的模板文件才会被渲染,而在javascript、css文件中引入的Jinja2代码不会被执行。(?) -
1、嵌入式Javascript/CSS:在模板文件中,使用
<style>
和<script>
标签定义这部分代码。文章来源:https://www.toymoban.com/news/detail-669594.html -
2、定义为Javascript/CSS变量:文章来源地址https://www.toymoban.com/news/detail-669594.html
{# 定义JavaScript变量 #}
<script type="text/javascript">
var foo = '{{ foo_variable }}';
</script>
{# 定义CSS变量 #}
<sytle>
:root {
--theme-color: {{ theme_color }};
}
到了这里,关于Flask狼书笔记 | 03_模板的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!