Flask深入了解Jinja2引擎的用法_Python

Flask深入了解Jinja2引擎的用法

2022-07-28 11:13自由小冰儿 Python

Jinja2是基于python的模板引擎，功能比较类似于于PHP的smarty，J2ee的Freemarker和velocity。它能完全支持unicode，并具有集成的沙箱执行环境，应用广泛。jinja2使用BSD授权

Jinja2

想象一下这样一个场景，如果对于某个网站来说，如果你充值了Vip，你才可以看到隐藏内容了。你该怎么做呢？

这个适合就需要jinja2的出场了

先写一份代码，根据姓名渲染一个网页，然后把姓名和vip变量传入HTML模板中。

注意使用jinja2的HTML页面是不能用浏览器直接打开的，必须要启动Flask，使用路由返回页面

				?

									from flask import Flask, render_template

									app = Flask(__name__)

									@app.route('/space/<name>')

									def space(name):

									    vip = True

									    return render_template("space.html", name=name, vip=vip)

									if __name__ == '__main__':

									    app.run(debug=True)

当html模板，接收到flask传递过来的name、vip参数，在html中如何使用呢？

使用{{ }}装载一个变量，比如文中使用{{ name }}在html中装载name变量
使用{% %}装载一个语句，对于if语句的格式如下面的代码的8-11行，必须要以{% if xxx %}，以{% endif %}结尾。

				?

									<!doctype html>

									<html lang="en">

									<head>

									    <title>Hello from Flask</title>

									</head>

									<body>

									    <h1>Hello {{ name }}！</h1>

									    <!-- jinja2的if语句 -->

									    {% if vip %}

									        <h3>吆西，你触发了，隐藏内容啦！</h3>

									    {% endif %}

									</body>

									</html>

Jinja2语句扩展

先说一下最终的结论：jinja2中装载变量使用{{ }}，装载语句使用{{% %}}，括号里面都按Python的风格书写即可！

在html中，我们装载的变量，还有可能是一个列表，一个对象，一个字典等类型。

我们装载的方式如下所示：

				?

									# python

									a = [1,2,3]

									b = Cat(name="Tom")

									c = {"name":"Jackson"}

									# html

									<h1>Hello {{ a[0] }}！</h1>

									<h1>Hello {{ b.name }}！</h1>

									<h1>Hello {{ c['name '] }}！</h1>

# 输出结果
Hello 1！
Hello Tom！
Hello Jackson！

在html中，不仅仅要使用if语句，还有一个更重要的循环语句。jinja2的循环语句如下所示：

				?

									{% for item in navigation %}

									    <li><a href="{{ item.href }}" rel="external nofollow" >{{ item.caption }}</a></li>

									{% endfor %}

上面的代码生成了len(navigation )个li，每个li都指向item.href的链接。

都看到这里了，点个赞白！

Jinja2模板继承

Jinja2的模板继承其实和对象的继承有一些相似的地方。比如，可以减少很多冗余的代码。接下来，我将展示一个Jinja2模板继承的小例子：

我们创建一个base.html，书写如下代码：

				?

									<!DOCTYPE html>

									<html lang="en">

									<head>

									    <link rel="stylesheet" href="base.css" rel="external nofollow"  />

									    <title>{% block title %}{% endblock %}</title>

									    {% block head %}{% endblock %}

									</head>

									<body>

									    <div id="body">{% block body %}{% endblock %}</div>

									</body>

									</html>

在上述代码中，{% block xxx %} {% endblock %}表示开一个卡槽，方便后续页面进行填写。

接下来，编写一个index.html继承base.html页面，具体方式如下所示：

				?

									{% extends "base.html" %}

									{% block title %}首页{% endblock %}

									{% block body %}

									    <h1>这里是首页</h1>

									    <p class="detail">

									      首页的内容

									    </p>

									{% endblock %}