如何使用Jinja2模板引擎来渲染动态HTML模板？_jinja2渲染html

作者：羊村懒王 | 2024-04-08 19:59:23

踩

jinja2渲染html

当你想要将动态数据呈现在网页上时，Jinja2模板引擎是一个强大的工具。

首先，你要做的第一件事是安装Jinja2。如果你使用的是Python，你可以通过pip安装Jinja2:

pip install Jinja2
1

现在，让我们来看一下如何使用Jinja2渲染一个简单的HTML模板。

首先，创建一个基本的HTML模板。这个模板可以包含任何你想在网页上展示的内容，但是要注意，Jinja2只会替换掉{{ variable }}这样的标记。

<html>  
  <head>  
    <title>My Page</title>  
  </head>  
  <body>  
    <h1>{{ title }}</h1>  
    <p>{{ content }}</p>  
  </body>  
</html>
1
2
3
4
5
6
7
8
9

然后，你需要将这个模板加载到Python代码中。你可以使用以下代码：

from jinja2 import Template  
  
# 将模板文件读入内存  
with open('my_template.html') as f:  
    template_html = f.read()  
  
# 将模板编译成Jinja2模板对象  
template = Template(template_html)
1
2
3
4
5
6
7
8

现在，你已经有了一个Jinja2模板对象，可以在其中插入动态数据了。下面的代码演示了如何将数据插入模板：

# 定义要插入的数据  
data = {  
    'title': 'Hello, World!',  
    'content': 'This is my first Jinja2 template.'  
}  
  
# 使用模板对象渲染数据  
output = template.render(data)  
  
# 打印渲染后的结果  
print(output)
1
2
3
4
5
6
7
8
9
10
11

当你运行上面的代码时，你会看到以下输出：

<html>  
  <head>  
    <title>My Page</title>  
  </head>  
  <body>  
    <h1>Hello, World!</h1>  
    <p>This is my first Jinja2 template.</p>  
  </body>  
</html>
1
2
3
4
5
6
7
8
9

哇，太神奇了！你刚刚亲手用Jinja2渲染了一个动态HTML模板。你可能还会问：“那如果我需要在模板中使用更复杂的数据结构呢？” 别担心，Jinja2支持在模板中使用几乎所有的Python数据类型。

例如，如果你的数据是一个字典，你可以像这样在模板中使用它：

<ul>  
  {% for key, value in data.items() %}  
  <li>{{ key }}: {{ value }}</li>  
  {% endfor %}  
</ul>
1
2
3
4
5

在这个例子中，data.items()是字典的迭代器，它返回一个包含键和值的元的列表。Jinja2使用了“Verbatim”语法（{% %}）来标记控制结构，如循环和条件语句。

你已经看到了如何使用Jinja2来渲染动态HTML模板，现在你已经成为了一位Jinja2新手。当你需要渲染更多复杂的模板时，记得要善用Jinja2的文档和社区资源。最后，记住这一条金科玉律：不要在你的模板中插入未经过滤的用户输入，否则你可能会受到跨站脚本攻击（XSS）的威胁。

在Jinja2中，还有很多其他的特性可以帮助你更有效地渲染模板。例如，你可以使用条件语句、循环、函数等。下面是一些示例：

如果语句

{% if user %}  
    <p>Hello, {{ user.name }}!</p>  
{% else %}  
    <p>No user is logged in.</p>  
{% endif %}
1
2
3
4
5

循环

<ul>  
  {% for item in items %}  
  <li>{{ item }}</li>  
  {% endfor %}  
</ul>
1
2
3
4
5

函数
你可以在模板中调用Python函数，这使得你可以在模板中动态地生成内容。例如：

def format_date(date):  
    return datetime.strftime(date, '%Y-%m-%d')  
  
data = {  
    'title': 'Hello, World!',  
    'content': 'This is my first Jinja2 template.',  
    'date': datetime.now()  
}  
  
output = template.render(data)
1
2
3
4
5
6
7
8
9
10

在模板中，你可以这样使用函数：

<p>Date: {{ format_date(date) }}</p>
1

这些只是Jinja2的一小部分功能。Jinja2是一个功能强大的模板引擎，具有许多其他的特性和选项。你可以在官方文档中找到更多的信息和示例。

现在，你已经了解如何使用Jinja2来渲染动态HTML模板，接下来，让我们深入了解一下Jinja2的变量和过滤器。

变量
在Jinja2中，变量可以用来插入动态数据到模板中。Jinja2支持多种类型的变量，包括字符串、数字、列表、字典等。以下是一些使用变量的示例：

<h1>{{ title }}</h1>  
<p>{{ content }}</p>  
<ul>  
  {% for item in items %}  
  <li>{{ item }}</li>  
  {% endfor %}  
</ul>
1
2
3
4
5
6
7

在上面的示例中，{{ title }}和{{ content }}是字符串变量，{{ items }}是列表变量。

过滤器
过滤器是一种在模板中对变量进行处理的方式。它允许你对变量进行格式化、转换或过滤。以下是一些Jinja2内置过滤器的示例：

safe: 防止Jinja2对变量进行转义。例如，如果变量是HTML代码，使用{{ variable|safe }}可以防止Jinja2将其转义为文本。
capitalize: 将字符串的首字母转换为大写。例如，{{ ‘hello’|capitalize }}将输出’Hello’。
truncate: 截断字符串。例如，{{ ‘Hello, world!’|truncate(5) }}将输出’Hello…'。
json: 将Python对象转换为JSON格式。例如，{{ data|json }}将输出data的JSON表示。
这些过滤器可以在模板中使用管道符号（|）进行调用。例如，{{ variable|filter }}将应用filter过滤器到variable变量上。

总之，Jinja2是一个非常强大和灵活的模板引擎，可以帮助你轻松地渲染动态HTML模板。通过使用变量、过滤器和Jinja2的其他特性，你可以轻松地创建漂亮和动态的网页。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/387853