jinja2是一种模板语言
- 三种语法:
1 {{ }} 变量取值
2 {% %} 控制结构
3 {# #} 注释
jinja2模板中使用 {{ }} 语法表示一个变量,它是一种特殊的占位符。当利用jinja2进行渲染的时候,它会把这些特殊的占位符进行填充/替换,jinja2支持python中所有的Python数据类型比如列表、字段、对象等。
返回值为一个字典:jinja2读取数据钰python不同:
@web.route('/test')
def test():
r = {
'name': 'wang',
'age': 20
}
return render_template('test.html', data=r)
# html 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
wang
{{ data.age }}
{{ data['age'] }}
{# wang #}
{# 模板语言 #}
</body>
</html>
都可以取到20这个数据
python: r[‘age’]
jinja2:data.age data[‘age’]
jinja2的流程控制语句:
if 和 for in
语句必须是闭合的
if语句(endif)
可以使用一些python运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
wang
{{ data.age }}
{{ data['age'] }}
{% if data.age < 20 %}
{{ data.name }}
{% elif data.age == 20 %}
do something
{% else %}
{{ data.age }}
<ul></ul>
{% endif %}
{# wang #}
{# 模板语言 #}
</body>
</html>
for in 循环(endfor)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
wang
{{ data.age }}
{{ data['age'] }}
{# if 条件判断 #}
{% if data.age < 20 %}
{{ data.name }}
{% elif data.age == 20 %}
do something
{% else %}
{{ data.age }}
<ul></ul>
{% endif %}
{# for in 循环 #}
{% for foo in [1, 2, 3] %}
{{ foo }}
<div>111</div>
{% endfor %}
{# wang #}
{# 模板语言 #}
</body>
</html>
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{# 定义三个区域 #}
{% block head %}
<div>this is head</div>
{% endblock %}
{% block content %}
this is content
{# 待替换的部分 #}
{% endblock %}
{% block foot %}
<div>this is foot</div>
{% endblock %}
</body>
</html>
test.html
加上super()方法,继承,保留之前填充部分的内容
不加super()方法,覆盖之前的所有内容
{% extends 'layout.html' %}
{% block content %}
{{ super() }} {# 继承,保留原来的content内容 #}
{{ data.age }}
{{ data['age'] }}
{# if 条件判断 #}
{% if data.age < 20 %}
{{ data.name }}
{% elif data.age == 20 %}
do something
{% else %}
{{ data.age }}
<ul></ul>
{% endif %}
{# for in 循环 #}
{% for foo in [1, 2, 3] %}
{{ foo }}
<div>111</div>
{% endfor %}
{% endblock %}