【Flask 系统性学习笔记 4】Jinjia2模版和语法

大家好，欢迎来到IT知识分享网。

Jinjia2 模板

模板的介绍

Jinja2 是一种现代的、设计优雅的模板引擎，它是 Python 的一部分，由 Armin Ronacher 开发。Jinja2 允许你在 HTML 文档中嵌入 Python 代码，以及使用变量、控制结构和过滤器来动态生成内容。它的语法简洁清晰，易于学习和使用。

模板的使用

from flask import Flask, render_template app = Flask(__name__, template_folder="custom_templates") @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

template_folder指定模板文件夹默认是同级目录的 templates

在以上案例下的文件架构如下

project_folder/
│
├── flask_app.py
│
└── custom_templates/
    │
    └── index.html

模板传递参数

当我们需要通过传递参数来修改模板中的内容时，就可以通过模板传参来实现

# app.py from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): # 定义要传递给模板的参数 user = { 
   'username': 'John', 'age': 30} fruits = ['Apple', 'Banana', 'Orange', 'Mango'] return render_template('index.html', user=user, fruits=fruits) if __name__ == '__main__': app.run(debug=True)

<!--index.html--> <!DOCTYPE html> <html> <head> <title>Flask Template Example with Parameters</title> </head> <body> <h1>Hello, { 
  { user.username }}!</h1> <p>You are { 
  { user.age }} years old.</p> <h2>Favorite Fruits:</h2> <ul> {% for fruit in fruits %} <li>{ 
  { fruit }}</li> {% endfor %} </ul> </body> </html>

显示效果

使用字典传参

对模板传参也支持使用字典的办法

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): # 定义要传递给模板的参数 data = { 
    'user': { 
   'username': 'John', 'age': 30}, 'fruits': ['Apple', 'Banana', 'Orange', 'Mango'] } return render_template('index.html', data) # 这里使用进行解包，这是Python3的特性 if __name__ == '__main__': app.run(debug=True)

使用解包传参，避免多参数的传参不便

模板中使用url_for函数

# app.py from flask import Flask, render_template, url_for app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/hello') def hello(): return 'Hello, World!' if __name__ == '__main__': app.run(debug=True)

<!--index.html--> <!DOCTYPE html> <html> <head> <title>Flask Template Example with url_for()</title> </head> <body> <h1>Hello, Flask!</h1> <p>This is a template example.</p> <p><a href="{ 
    { url_for('hello') }}">Say Hello</a></p> </body> </html>

模板继承

继承允许你创建一个基础模板，并在其他模板中扩展它。

<!-- base.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> </head> <body> {% block content %}{% endblock %} </body> </html>

在父模板中定义 block代表可变对象，语法 {% block block_name %} {% endblock %}

<!-- index.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
    <h1>Hello, { 
  { name }}!</h1> {% endblock %}

使用 extends 继承模板，使用 {% block block_name %}...{% endblock %}即可实现更改内容

include模板导入

在 Jinja2 模板中， include 指令允许你将一个模板导入到另一个模板中。这样可以使模板更具有模块化和可重用性，使代码更易于维护和管理。通过 include 指令，你可以将一个模板的内容嵌入到另一个模板中的任意位置。

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

定义 index.html作为主页

<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>include</title> </head> <body> <div class="container">
    {% include 'header.html' %}

    <h4>主题内容</h4>

    {% include 'footer.html' %}
</div> </body> </html>

定义 header.html用来显示头部

<!-- header.html --> <header> <h1>Header</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header>

定义 footer.html用来显示脚部

<!-- footer.html --> <footer> <p>&copy; 2024 Flask Template Example. All rights reserved.</p> </footer>

效果

使用静态资源

在 Web 开发中，静态资源（如样式表、JavaScript 文件、图像等）是构建用户界面和功能的重要组成部分。在 Flask 应用中，你可以使用静态资源来美化页面样式、增强交互性，并为用户提供更丰富的体验。下面是如何在 Flask 中使用静态资源的简单介绍：

组织静态资源文件夹

首先，你需要在 Flask 项目中创建一个文件夹来存放静态资源文件，通常命名为 static。在这个文件夹中，你可以按照你的项目结构组织样式表、JavaScript 文件、图像等静态文件。

your_flask_app/
│
├── static/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── script.js
│   └── img/
│       └── logo.png
│
├── templates/
│   └── index.html
│
└── app.py

使用静态资源

一旦你有了静态资源文件夹，你可以在模板中通过使用 url_for 函数来引用这些静态资源。例如，在模板中引用样式表文件 style.css：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Flask App</title> <link rel="stylesheet" href="{ 
     { url_for('static', filename='css/style.css') }}"> </head> <body> <h1>Welcome to My Flask App</h1> <img src="{ 
     { url_for('static', filename='img/logo.png') }}" alt="Logo"> <script src="{ 
     { url_for('static', filename='js/script.js') }}"></script> </body> </html>

在这个示例中，url_for('static', filename='path/to/resource') 函数用于生成静态资源的 URL。在调用时，第一个参数 'static' 是 Flask 中默认用于静态资源的端点，而第二个参数 'filename' 是静态资源的路径。

设置静态文件夹地址

from flask import Flask, render_template app = Flask(__name__, static_folder="static2") # 设置静态文件夹地址为 static2 # 第二种方式 app.static_folder = 'static2' @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)

Jinjia2 语法

Jinja2 是一种现代的、设计优雅的模板引擎，它为开发者提供了一种简单而强大的方式来创建动态内容。Jinja2 的语法清晰简洁，易于学习和使用。在这里，我将详细介绍 Jinja2 的主要语法元素：

定义变量

<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask Template Example</title> </head> <body> {% set title = "Title" %} {% with subtitle="subtitle" %} {% set combined_title = title + " " + subtitle %} <h1>{ 
    { combined_title }}</h1> {% with paragraph="This is the paragraph content of my website." %} <p>{ 
    { paragraph }}</p> {% endwith %} {% endwith %} <!-- 此处出了with的范围则不可使用其中变量subtitle等 --> </body> </html>

with只在范围内可用， set则是全局， with和 set可以结合使用

插入变量

在 Jinja2 中，你可以使用双大括号 { { ... }} 来插入变量。这些变量将在渲染模板时替换为实际的值。

<p>Hello, { 
     { name }}!</p>

流程控制

Jinja2 支持常见的控制结构，如条件语句和循环。控制结构使用 {% ... %} 包裹。

条件语句

# app.py from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): # 假设这是从后端传递给前端的数据 user = { 
       'username': 'Alice', 'age': 30} return render_template('index.html', user=user) if __name__ == '__main__': app.run(debug=True)

<!--index.html--> <!DOCTYPE html> <html> <head> <title>选择结构示例</title> </head> <body> <h1>欢迎访问我的网站！</h1> <p>用户信息：</p> <ul> <li>用户名：{ 
      { user.username }}</li> <li>年龄：{ 
      { user.age }}</li> </ul> {% if user.age < 18 %} <p>您未满18岁，属于未成年人。</p> {% elif user.age >= 18 and user.age < 60 %} <p>您已满18岁，属于成年人。</p> {% else %} <p>您已年满60岁，属于老年人。</p> {% endif %} </body> </html>

效果

循环

from flask import Flask, render_template app = Flask(__name__) # 假设这是你的数据 items = { 
         "Apple": "Red", "Banana": "Yellow", "Orange": "Orange", "Grapes": "Purple" } @app.route('/') def index(): return render_template('index.html', items=items) if __name__ == '__main__': app.run(debug=True)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask Jinja2 Example</title> </head> <body> <h1>Fruit Colors</h1> <ul> {% for fruit, color in items.items() %} <li>{ 
       { fruit }}: { 
       { color }}</li> {% endfor %} </ul> </body> </html>

效果

注释

你可以在模板中使用 {#...#}添加注释，这些注释不会在最终渲染的输出中显示。

{# This is a comment #}

过滤器

过滤器允许你在输出中应用转换。它们以管道符 | 的形式使用。

官方使用文档

<p>{ 
         { sentence|capitalize }}</p>

过滤器	描述	示例用法
capitalize	将变量的首字母转换为大写。	`{ { variable_name\|capitalize }}`
lower	将变量转换为小写。	`{ { variable_name\|lower }}`
upper	将变量转换为大写。	`{ { variable_name\|upper }}`
title	将每个单词的首字母转换为大写。	`{ { variable_name\|title }}`
trim	移除变量的首尾空格。	`{ { variable_name\|trim }}`
escape	将 HTML 转义为安全的字符串。	`{ { variable_name\|escape }}`
safe	标记变量为安全，告诉模板引擎不要转义该变量。	`{ { variable_name\|safe }}`
length	返回变量的长度。	`{ { variable_name\|length }}`
default	如果变量为 False、None 或空，使用默认值。	`{ {variable_name\|default('default_value',boolean=True)}}`
	简单办法	`{ { variable_name or "default_value" }}`
urlencode	对 URL 进行编码。	`{ { variable_name\|urlencode }}`
join	使用指定字符将列表中的元素连接起来。	`{ { list_variable\|join(', ') }}`
slice	从列表中取出一部分元素。	`{ { list_variable\|slice(start, stop) }}`
sort	对列表进行排序。	`{ { list_variable\|sort }}`
reverse	将列表倒序。	`{ { list_variable\|reverse }}`
dictsort	对字典按键或值进行排序。	`{ { dict_variable\|dictsort(attribute='key') }}`
abs	返回变量的绝对值。	`{ { variable_name\|abs }}`
round	四舍五入到指定的小数位数。	`{ { variable_name\|round(precision=2) }}`
striptags	删除字符串中所有的 HTML标签，如果出现多个空格，将替换成一个空格	`{ { variable_name\|striptags }}`
replace	字符串替换	`{ { text \|replace('old', 'new') }}`

自定义过滤器

# app.py from flask import Flask, render_template app = Flask(__name__) # @app.template_filter("reverse") # 注册自定义过滤器 def reverse_filter(s): # 自定义过滤器函数 return s[::-1] app.jinja_env.filters['reverse'] = reverse_filter # 注册自定义过滤器的第二种方法 # 路由 @app.route('/') def index(): # 在模板中使用自定义过滤器 message = "Hello, World!" return render_template('index.html', message=message) if __name__ == '__main__': app.run(debug=True)

使用装饰器或者 app.jinja_env.filters都可以设置过滤器

<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Filter Example</title> </head> <body> <p>origin message: { 
         { message }}</p> <p>Reversed message: { 
         { message | reverse }}</p> </body> </html>

定义宏

宏类似于函数，允许你定义可重用的代码块。

宏没有返回值

在`Python`文件中定义宏

from flask import Flask, render_template app = Flask(__name__) # 定义一个简单的宏，用于在模板中显示消息 @app.template_global() def display_message(message): return f"Message: { 
             message}" @app.route('/') def index(): return render_template('index.html', message="Hello, world!") if __name__ == '__main__': app.run(debug=True)

在 py文件中直接定义了宏方法，可在 html文件中直接使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask Template Example</title> </head> <body> <!-- 使用宏显示消息 --> { 
          { display_message(message) }} </body> </html>

在`html`文件中定义宏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask Template Example</title> </head> <body> <!-- 定义宏 --> {% macro display_message(message) %} <p>Message: { 
          { message }}</p> {% endmacro %} <!-- 使用宏 --> { 
          { display_message("Hello, world!") }} </body> </html>

效果

宏文件引用

from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html', message="Hello, world!") if __name__ == '__main__': app.run(debug=True)

<!-- 引入宏文件并传递变量 -->
{% import 'macros/macros.html' as macros with context %}
<!--引入宏而不传递变量-->
{% import 'macros/macros.html' as macros %}


<!-- 另一种引入方式 -->
{% from 'macros/macros.html' import display %}

<!-- 使用宏并传参 --> { 
          { macros.display_message(message) }} <!-- 使用宏 --> { 
          { display() }}

在引入宏的时候，可以使用 with context来共享变量，意思是此时的宏中能直接使用当前环境下有的变量。

注意文件架构

project_folder/
│
├── flask_app.py
│
└── macros/
    │
    └── macros.html

<!-- macros.html --> {% macro display_message(content) %} <p>Content: { 
          { content }}</p> {% endmacro %} {% macro display(content) %} <p>Content: { 
          { message }}</p> {% endmacro %}

变量过滤器

Jinja2 提供了一些内置的变量过滤器，用于对变量进行处理，例如格式化日期、字符串截断等。

{ 
          { user.created_at|date("Y-m-d") }}

转义

在插入变量时，默认情况下 Jinja2 会自动转义 HTML 字符，以防止 XSS 攻击。但是，你也可以使用 safe 过滤器来禁用转义。

{ 
          { unsafe_html|safe }}

过滤器链

你可以将多个过滤器串联在一起，以便在一个变量上应用多个转换。

{ 
          { sentence|capitalize|truncate(50) }}

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/121645.html

【Flask 系统性学习笔记 4】Jinjia2模版和语法

Jinjia2 模板

模板的介绍

模板的使用

模板传递参数

使用字典传参

模板中使用url_for函数

模板继承

include模板导入

使用静态资源

组织静态资源文件夹

使用静态资源

设置静态文件夹地址

Jinjia2 语法

定义变量

插入变量

流程控制

条件语句

循环

注释

过滤器

自定义过滤器

定义宏

在Python文件中定义宏

在html文件中定义宏

宏文件引用

变量过滤器

转义

过滤器链

相关推荐

发表回复

在`Python`文件中定义宏

在`html`文件中定义宏