Jinja2 模板

Art_s

于 2024-04-28 14:13:15 发布

阅读量757

点赞数 13

文章标签： flask django

本文链接：https://blog.csdn.net/qq_44744569/article/details/138276730

版权

本文详细介绍了Flask框架中如何使用Jinja2模板引擎，包括视图函数与模板的分工、渲染模板、加载静态文件、分界符的使用、变量传递、条件语句、循环语句、模板过滤器以及模板的组件化和继承机制。

摘要由CSDN通过智能技术生成

Jinja2 模板

Flask 是使用 Jinja2 这个模板引擎来渲染模板

视图函数只负责业务逻辑和数据处理(业务逻辑方面)
而模板则取到视图函数的数据结果进行展示(视图展示方面)

将模板转换为完整的HTML页面的操作称为渲染。

加载模板文件

render_template()

参数：

传入模板文件名
模板参数的变量列表，并返回模板中所有占位符都用实际变量值替换后的字符串结果。

默认会在根目录下的templates文件夹下寻找about.html模板文件。

如果想更改模板文件地址，应该在创建app的时候，给Flask传递一个关键字参数template_folder，指定具体的路径，再看以下例子：

from flask import Flask,render_template
#在C盘的templates文件夹中寻找模板文件。
app = Flask(__name__,template_folder=r'C:\templates')

@app.route('/about/')
def about():
  #要渲染一个模板，通过render_template方法即可
    return render_template('about.html')

加载静态文件

Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。

在Jinja中加载静态文件非常简单，只需要通过url_for全局函数就可以实现，看以下代码：

<link href="{{ url_for('static',filename='about.css') }}">

url_for函数默认会在项目根目录下的static文件夹中寻找about.css文件，
当然我们也可以把静态文件不放在static文件夹中，此时就需要具体指定了，看以下代码：

app = Flask(__name__,static_folder='C:\static')

分界符

jinja2 模板文件混合 html 语法与 jinja2 语法，使用分界符区分 html 语法与 jinja2 语法。有 5 种常见的分界符：
注意{% %} %要紧贴花括号

{{ 变量 }}，将变量放置在 {{ 和 }} 之间；
{% 语句 %}，将语句放置在 {% 和 %} 之间；
# 语句，将语句放置在 # 之后；
{# 注释 #}，将注释放置在 {# 和 #} 之间；
## 注释，将注释放置在 # 之后。

模板变量

如果想要传递变量到前端模板中，那么可以把变量定义成字典，然后在render_template中，通过关键字参数的方式传递过去。render_template('',**context)。
代码中传入字符串，列表，字典到模板中

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 往模板中传入的数据
    my_str = 'Hello Word'
    my_int = 10
    my_array = [3, 4, 2, 1, 7, 9]
    my_dict = {
        'name': 'xiaoming',
        'age': 18
    }
    return render_template('hello.html',
                           my_str=my_str,
                           my_int=my_int,
                           my_array=my_array,
                           my_dict=my_dict
                           )

模板中代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  我的模板html内容
  <br />{{ my_str }}
  <br />{{ my_int }}
  <br />{{ my_array }}
  <br />{{ my_dict }}
</body>
</html>

条件语句

模板支持在{%…％}块内使用控制语句。添加了一个条件语句：

如果视图函数忘记给渲染函数传入一个名为title的关键字参数，那么模板将显示一个默认的标题，而不是显示一个空的标题。你可以通过在视图函数的render_template()调用中去除title参数来试试这个条件语句是如何生效的。

<html>
    <head>
        {% if title %}
        <title>{{ title }} - Microblog</title>
        {% else %}
        <title>Welcome to Microblog!</title>
        {% endif %}
    </head>
    <body>
        <h1>Hello, {{ user.username }}!</h1>
    </body>
</html>

循环语句

<html>
    <head>
    </head>
    <body>
        {% for post in posts %}
        <div><p>{{ post.author.username }} says: <b>{{ post.body }}</b></p></div>
        {% endfor %}
    </body>
</html>

Jinja2模版概述

<html lang="en">
<head>
    <title>My Webpage</title>
</head>
<body>
<ul id="navigation">
    {% for item in navigation %}
        <li><a href="{{ item.href }}">{{ item.caption }}</a></li>
    {% endfor %}
</ul>
    {# 用来装载一个变量，模板渲染的时候，会把这个变量代表的值替换掉。点.号访问和[]中括号访问，都可以访问属性和字典的值。 #}
    {{ a_variable }}
    {{ user.name }}
    {{ user['name'] }}
    
    {# 注释 #}
</body>
</html>

模版过滤器

Jinja2模版过滤器相当于是一个函数，把当前的变量传入到过滤器中，然后过滤器根据自己的功能，再返回相应的值，之后再将结果渲染到页面中。在html中使用，{{  }}
过滤器是通过管道符号（|）进行使用的，例如：{{ name|length }}，将返回name的长度。

Jinja2中内置了许多过滤器，在这里可以看到所有的过滤器，现对一些常用的过滤器进行讲解：

abs(value)：返回一个数值的绝对值。 例如：-1|abs。

default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。name|default('xiaotuo')——如果name不存在，则会使用xiaotuo来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。

escape(value)或e：转义字符，会将<、>等符号转义成HTML中的符号。例如：content|escape或content|e。

first(value)：返回一个序列的第一个元素。names|first。

format(value,*arags,**kwargs)：格式化字符串。例如以下代码：

`{{ "%s" - "%s"|format('Hello?',"Foo!") }}`
将输出：Helloo? - Foo!

last(value)：返回一个序列的最后一个元素。示例：names|last。

length(value)：返回一个序列或者字典的长度。示例：names|length。

join(value,d=u'')：将一个序列用d这个参数的值拼接成字符串。

safe(value)：如果开启了全局转义，那么safe过滤器会将变量关掉转义。示例：content_html|safe。

int(value)：将值转换为int类型。

float(value)：将值转换为float类型。

lower(value)：将字符串转换为小写。

upper(value)：将字符串转换为小写。

replace(value,old,new)： 替换将old替换为new的字符串。

truncate(value,length=255,killwords=False)：截取length长度的字符串。

striptags(value)：删除字符串中所有的HTML标签，如果出现多个空格，将替换成一个空格。

trim：截取字符串前面和后面的空白字符。

string(value)：将变量转换成字符串。

wordcount(s)：计算一个长字符串中单词的个数。

模版组件化

模版包含

包含就是指一个模板里包含另一模板里内容

比如我们要再A.html里应用B.html里的内容，也就是A里包含B，我们可以这样写：

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body> 
{% include 'B.html' %}
</body>
</html>

B.html,这时候A里引用的js或者css，B都可以使用。所以B模板里可以只写a.html中body里的代码

<div>
    <h1>我是B模板</h1>
</div>

模版继承

一个系统网站往往需要统一的结构，这样看起来比较“整洁”。
比如说，一个页面中都有标题、内容显示、底部等几个部分。如果在每一个网页中都进行这几部分的编写，那么这个网站将会有很多冗余部分，这时可以采用模板继承，即将相同的部分提取出来，形成一个base.html，具有这些相同部分的网页通过继承base.html来得到对应的模块。

基本模板直接在templates目录中，蓝图的模板将放置在与蓝图同名的目录中。例如：flaskr/templates/auth/register.html

{% extends "base.html" %}

{% block 模板名称 %}
    ....
{% endblock %}

base.html作为基类（父模块），index.html和product.html文件作为子类（子模块），子类去继承基类的基本内容。

base.html文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>{% block title %}{% endblock %} -我的网站</title>

</head>
<body>
{% block body %}
    这是基类（base.html）中的内容
{% endblock %}
</body>
</html>

子模版

{% extends "base.html" %}

{% block title %}产品列表页{% endblock %}

{% block body %}
<h4>这是产品列表页（product.html）的内容！</h4>
获取网页标题内容：<h4>{{ self.title() }}</h4>
{% endblock %}

Art_s

关注

13
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Jinja2 模板

Flask 是使用 Jinja2 这个模板引擎来渲染模板视图函数只负责业务逻辑和数据处理(业务逻辑方面)而模板则取到视图函数的数据结果进行展示(视图展示方面)将模板转换为完整的HTML页面的操作称为渲染。参数：默认会在根目录下的templates文件夹下寻找about.html模板文件。如果想更改模板文件地址，应该在创建app的时候，给Flask传递一个关键字参数template_folder，指定具体的路径，再看以下例子：加载静态文件Web应用中会出现大量的静态文件来使得网页更加生动美观。类似于CS
复制链接

扫一扫