- Flask Template模版引擎(Jinja2)
- 变量
- 过滤器
- 转义
- 基本模版
- 子模板
- 结构控制语句
- Macros
- Blocks
- Include
Flask Template模版引擎(Jinja2)
Flask利用Jinja2作为模版引擎。模版引擎包含了变量和表达式,当模版被渲染时,它们被替换为值和标签,它们控制着模版的逻辑。
Jinja2默认的几种分割符:
{% ... %}
表示声明{{ ... }}
表达式打印到模版输出{# ... #}
对于未包含在模板输出中的注释# ... ##
行语句
变量
传递给模版的上下文字典定义了模版的变量
通过{{ ... }}
在模版中打印变量
{{ foo.bar }}
{{ foo['bar'] }}
双花括号不是变量的一部分,而是打印语句。如果访问标签内的变量,在双花括号周围不要再次出现大括号。
如果变量或属性不存在,将会返回一个未定义的值,默认的行为是打印或迭代计算为空字符串,并且每次操作都会失败。
在Flask中如果需要加载静态文件的URL,有两种实现的方法:
<link rel&#61;&#39;stylesheel&#39; href&#61;&#39;/static/css/style.css&#39;>
<link rel&#61;&#39;stylesheel&#39; href&#61;&#39;{{ url_for(&#39;static&#39;, filename&#61;&#39;css/style.css&#39;) }}&#39;>
过滤器
变量可以通过过滤器进行修改。过滤器通过管道符合&#xff08;|
&#xff09;与变量分开&#xff0c;并且可以在括号中包含可选参数。可以链接多个过滤器。一个过滤器的输出应用于下一个过滤器。
例如{{ name | striptags | length }}
从name变量中移除所有的HTML标签&#xff0c;并计算长度进行打印输出。
接受参数的过滤器在参数周围有括号&#xff0c;就像函数调用一样。例如&#xff1a;{{ listx | join (&#39;,&#39;) }}
将以逗号为间隔将列表进行打印输出&#xff0c;与Python的str.join(&#39;,&#39;, listx)
相似。
转义
有时需要或必要让Jinja2忽略它会以变量或块的形式处理的部分。例如&#xff0c;如果使用迷人语法&#xff0c;你希望使用{{作为模版中的原始字符串并且不启动变量。
{{ &#39;{{&#39; }}
对于更大的部分&#xff0c;将原始块标记为块是有意义的&#xff0c;使用{% raw %}
。例如&#xff0c;要在模版中包含示例Jinja语法&#xff0c;且不执行代码。
{% raw %}<ul>{% for item in seq %}<li>{{ item }}li>{% endfor %}ul>
{% endraw %}
基本模版
通常会创建一个base.html模版&#xff0c;它定义了一个简单的HTML骨架文档&#xff0c;你可以将它用于简单的三段式页面。让孩子模版来完成空白块内容的填充工作。
<html lang&#61;"en">
<head><meta charset&#61;"UTF-8"><script src&#61;"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script><title>{% block title %}{% endblock %}title>{% block extCSS %}<link rel&#61;"stylesheet" href&#61;"{{ url_for(&#39;static&#39;, filename&#61;&#39;css/style.css&#39;) }}">{% endblock %}
head>
<body>
{% block header %}{% endblock %}{% block content %}{% endblock %}{% block footer %}{% endblock %}
body>
html>
在本例中&#xff0c;{% block %}
标签定义了五个可以填充子模版的块&#xff0c;所有块标签都会告诉模板引擎&#xff0c;子模板可能会覆盖模板中的占位符。
子模板
下面介绍下子模版中的示例&#xff1a;
{% extends &#39;base.html&#39; %}
{% block title %}Index{% endblock %}
{% block extCSS %}{{ super() }}<style>.test{color: red;}style>
{% endblock %}
{% block header %}<p>headerp>{% endblock %}
{% block content %}<p>contentp>{% endblock %}
{% block footer %}<p>footerp>{% endblock %}
{% extends %}
标签是这里的关键。它告诉模版引擎该模板‘扩展’了另一个模板。当模版系统读取这个模板时&#xff0c;它会首先找到父模板。扩展标签应该是模板中的第一个标签。
通过{{ super() }}
来渲染父模块的内容。这将返回父模块的结果。
结构控制语句
控制结构是指所有那些控制程序流程的东西-条件&#xff08;if/elif/else&#xff09;, for循环&#xff0c;以及宏和块。使用默认语法&#xff0c;控制结构出现在{% ... %}
块内。
For
循环顺序中的每个项目。例如&#xff0c;显示一个名为users的变量中提供的用户列表。
<h1>User Listh1>
<ul>
{% for user in users %}<li>user.usernameli>
{% endfor %}
ul>
由于模板中的变量保留了它们的对象属性&#xff0c;因此可以像dict一样遍历容器&#xff1a;
<dl>
{% for key, value in my_dict.iteritems() %}<dt>{{ key }}dt><dd>{{ value }}dd>
{% endfor %}
dl>
在for循环块的内部&#xff0c; 可以访问一些特殊变量
值 | 描述 |
---|
loop.index | 循环的当前迭代&#xff08;1开始&#xff09; |
loop.index0 | 循环的当前迭代&#xff08;0开始&#xff09; |
loop.revindex | 循环倒叙的迭代&#xff08;到1结束&#xff09; |
loop.revindex0 | 循环倒叙的迭代&#xff08;到0结束&#xff09; |
loop.first | 如果第一次迭代&#xff0c;则为真 |
loop.last | 如果最后次迭代&#xff0c; 则为真 |
loop.length | 序列中的项目数量。 |
loop.cycle | 在一系列序列之间循环的辅助函数。 |
loop.depth | 指示当前呈现的递归循环中有多深。从1开始 |
loop.depth0 | 指示当前呈现的递归循环中有多深。从0开始 |
loop.previtem | 来自上一次循环迭代的项目。在第一次迭代期间未定义。 |
loop.nextitem | 来自下一次循环迭代的项目。在最后一次迭代期间未定义。 |
loop.changed(*val) | 如果以前用不同的值调用&#xff08;或根本不调用&#xff09;&#xff0c;则为真。 |
IF
与Python中的if语句相当。用最简单的形式&#xff0c;你可以用它来测试一个变量是否被定义&#xff0c;不是空的和不是false
{% if users %}
<ul>
{% for user in users %}<li>{{ user.username }}li>
{% endfor %}
ul>
{% endif %}
对于多个分支&#xff0c;elif和else可以像在Python中一样使用&#xff0c; 也可以使用更复杂的表达式。
{% if age <18 %}你还未成年
{% elif age &#61;&#61; 18 %}刚好成年
{% else %}你已经不小了
{% endif %}
Macros
宏与常规编程语言中的函数具有可比性。将常用惯用语放入可重复使用的函数中&#xff0c;以便不重复干同样的事情。
{% macro input(name, value&#61;&#39;&#39;, type&#61;&#39;text&#39;, size&#61;20) -%}<input type&#61;"{{ type }}" name&#61;"{{ name }}" value&#61;"{{value|e }}" size&#61;"{{ size }}">
{%- endmacro %}
宏可以被当做一个函数调用&#xff1a;
<div>{{ input(&#39;username&#39;) }}div>
<div>{{ input(&#39;password&#39;, type&#61;&#39;password&#39;) }}div>
Blocks
块用于继承&#xff0c;同时用作占位符和替换。它们在“模板继承”部分详细记录。
Include
include语句对于包含模板并将该文件的渲染内容返回到当前名称空间非常有用&#xff1a;
{% include &#39;header.html&#39; %}Body
{% include &#39;footer.html&#39; %}