目录
一.模版引擎
Flask 使用Jinja2引擎来渲染模版
1.1什么是模板
简单来说,在web应用开发中,为了实现前后端的解耦 ,分离前后端逻辑,就可以将表现逻辑分离出来交由模板通过模板引擎来实现。
其实模板就是包含静态与动态内容的网页内容。
1.2什么是Jinja2
Jinja2 是一种现代的、对设计人员友好的Python模板语言 。具有快速 、广泛使用 和安全的特性。
1.3什么是模板渲染
所谓渲染 ,其实就是向网页中加载静态内容 及动态内容值的过程。
二.Jinja2语法
2.1传递一个参数
python
@app.route('/')
def hello_world():
content = "首页内容"
return render_template('index.html', content=content)
index.html:
html
<body>
<h1>{{ content }}</h1>
</body>
- 通过**{{ var }}使用传来的参数值**
2.2传递列表型参数
python
@app.route('/')
def hello_world():
content = ["1","2","3","4","5"]
return render_template('index.html', content=content)
index.html:
html
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{% for item in content %}}
<p>{{item}}</p>
{{% endfor %}}
</body>
2.3传递所有参数
python
@app.route('/')
def hello_world():
title = "首页"
content = "首页内容"
return render_template('index.html', **locals())
- 使用****locals()将所有参数** 传递给了模板,然后选择性使用
2.4分隔符
{{ var }} 是不同于html原生语法的东西
{{}} 叫分隔符 ,Jinja2 中的分隔符有好几个:
**{% ..... %}**用于声明
**{{ .... }}**用于打印表达式,使用变量等
**{ # .... # }**用于模版注释
**# .... ##**对语法的简化
2.5if
模板语法:
html
{% if condition %}
do something
{% elif condition %}
do something
{% else %}
do something
{% endif %}
2.6for
模板语法:
html
{% for item in iteratable %}
do something
{% endfor %}
2.7set
set 用于在模版中设置变量 ,直接在set 中定义代码的变量,如果不用with修饰,默认是全局变量。
html
{% set name = '鞠婧祎' %}
<span>{{name}}</span>
2.8with
with 用于创建一个局部作用域 ,在这个局部作用域使用set 定义的变量仅在with 中有效,不会污染全局
html
{% with %}
{% set name = '鞠婧祎' %}
<span>{{name}}</span>
{% endwith %}
上面的set 也可以直接写进with中,格式如下:
html
{% with name = '鞠婧祎' %}
<span>{{name}}</span>
{% endwith %}
三.模版插入与模版继承
3.1include模版插入
include 用于向某个HTML指定位置中插入一个模板
PS:"include只能插入,不能修改插入的内容!!"
模板语法:
{% include template_name%}
例如:
header.html:
html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
footer.html:
html
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
index.html:
html
{% include 'header.html' %}
<main>
<p>This is the content of the homepage.</p>
</main>
{% include 'footer.html' %}
可以看到,include 只能插入一个模板,并不能对模板进行选择性的修改 ,因此局限性较大
3.2extends模版继承
extends 用于实现模板继承 ,子模板可以继承父模板的内容,并且可以修改。
在使用extends 时,可以使用block指令 来圈选子模板可以修改的范围。
base.html (父模板):
html
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Website{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
home.html (子模板):
html
{% extends 'base.html' %}
{% block title %}Homepage - My Website{% endblock %}
{% block content %}
<header>
<h1>Welcome to My Website</h1>
</header>
<main>
<p>This is the content of the homepage.</p>
</main>
{% endblock %}
- 如果我们想修改父模板的内容 ,且想保留父模板的内容 ,可以使用:"{{ super() }}"来保留父模板内容