文章目录

[3 模板](#3 模板)
- [3.1 模板基本使用](#3.1 模板基本使用)
- [3.2 模板结构组织](#3.2 模板结构组织)
- [3.3 模板进阶](#3.3 模板进阶)

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()装饰器

过滤器 ：修改和过滤变量值的特殊函数。

jinja2 复制代码

{{ name|title }}

jinja2 复制代码

{% filter upper %}
	This itext becomes upperase.
{% endfilter %}

Jinja2常用内置过滤器（p83）

自定义过滤器 ：@app.emplate_filter()

测试器 ：测试变量或表达式，返回布尔值，使用@app.template_test()自定义。

jinja2 复制代码

{% if foo is sameas(bar) %}...

模板环境对象 ：控制渲染行为，包含配置选项、上下文变量、全局函数（globals）、过滤器（filters）、测试器（tests），在app.jinja_env属性。

python 复制代码

# 添加自定义全局对象 
def bar():
	return 'I am bar.'

app.jinja_env.globals['bar'] = bar

3.2 模板结构组织

局部模板：减少代码重复。在ajax请求中可以只返回一个局部模板，而不是整个页面。

jinja2 复制代码

{% include '_banner.html' %}

宏：（macro）类似函数，也为了代码重用。

注意：include会自动传递上下文；而import不会，需要显示传递。

jinja2 复制代码

{% from 'macros.html' import qux with context%}
...
{{ qux(amount=5) }}

模板继承 ：在基模板中定义基本的HTML结构，而子模板只需要对特定的块进行修改（覆盖或追加{``{ super() }}）。（p90）

jinja2 复制代码

{% extends 'base.html' %}
{% block content %}
...
{% endblock content %}

3.3 模板进阶

空白控制 ：模板中的Jinja2 语句会保留移除后的空行，但不影响浏览器的解析。可以使用工具去除空白，减小文件体积，提高数据传输速度。

jinja2 复制代码

{%- endif %}

加载静态文件 ：默认存放在主脚本同级目录的static 文件夹中，使用url_for()函数获取。Flask内置了用于获取静态文件的视图函数，端点值为static。

jinja2 复制代码

{{ url_for('static', filename='avatar.jpg') }}

Favicon：浏览器在标签页、地址栏、收藏夹等处显示的小图标。（p96）
从CDN加载静态资源更方便
可以创建一个专门用于加载静态资源的宏。

疑惑：对favicon的请求是自动的吗，所有项目都有？

消息闪现 ：在视图函数调用flash()函数，你的消息将存储在session中，然后再模板中使用全局函数get_flashed_messages()获取消息并显示，调用后会清空session中的消息。

jinja2 复制代码

{% for message in get_flashed_messages() %}
	{{ message }}
{% endfor %}

文本字符串编码问题：（p98）

自定义错误页面 ：默认的简陋错误页面往往另用户不知所措，我们可以注册错误处理函数来自定义错误页面。

python 复制代码

@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>标签定义这部分代码。
2、定义为Javascript/CSS变量：

jinja2 复制代码

{# 定义JavaScript变量 #}
<script type="text/javascript">
	var foo = '{{ foo_variable }}';
</script>

{# 定义CSS变量 #}
<sytle>
:root {
	--theme-color: {{ theme_color }};
}

Flask狼书笔记 | 03_模板

文章目录

3 模板

3.1 模板基本使用

3.2 模板结构组织

3.3 模板进阶