Flask 模板:使用 Jinja2 渲染 HTML
qiyuwang 2024-10-06 12:16 50 浏览 0 评论
Flask 是一个轻量级且灵活的 Python Web 框架。其主要功能之一是能够使用强大的模板引擎 Jinja2 呈现 HTML 模板。本博客将引导您了解 Flask 模板的基础知识，并演示如何使用 Jinja2 渲染动态 HTML 内容。
什么是模板？
Flask 中的模板是包含静态 HTML 以及用于插入动态内容的特殊语法的文件。这些模板通常存储在 Flask 项目目录中名为“templates”的文件夹中。 Flask 使用 Jinja2 作为默认模板引擎，允许您在 HTML 文件中嵌入类似 Python 的表达式和逻辑。
使用 Jinja2 设置 Flask
首先，确保您的 Python 环境中安装了 Flask。您可以使用 pip 安装它：
pip install Flask
接下来，创建一个基本的 Flask 应用程序结构：
flask_app/
│
├── app.py
├── templates/
│ └── index.html
└── static/创建一个简单的 Flask 应用程序
让我们从一个简单的 Flask 应用程序开始。创建一个名为“app.py”的文件：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html', title="Home Page", message="Welcome to Flask with Jinja2!")
if __name__ == '__main__':
app.run(debug=True)
在此示例中，“render_template”函数呈现“index.html”模板，并传入标题和消息作为变量。
创建您的第一个模板
在项目目录中创建一个名为“templates”的文件夹，并在该文件夹中创建一个名为“index.html”的文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates.</p>
</body>
</html>
在此模板中，“{{ title }}”和“{{ message }}”是占位符，将被从 Flask 路由传递的值替换。
向模板添加逻辑
Jinja2 允许您添加控制结构，例如循环和条件。让我们更新我们的模板来演示这些功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates.</p>
<h2>Fruits List:</h2>
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
{% if show_greeting %}
<p>Have a great day!</p>
{% else %}
<p>Goodbye!</p>
{% endif %}
</body>
</html>更新“app.py”以将水果列表和布尔变量传递给模板：
@app.route('/')
def home():
fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]
show_greeting = True
return render_template('index.html', title="Home Page", message="Welcome to Flask with Jinja2!", fruits=fruits, show_greeting=show_greeting)
使用模板继承
模板继承允许您创建具有公共元素（例如页眉和页脚）的基本模板，并在其他模板中扩展它。在“templates”文件夹中创建一个基本模板“base.html”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>? 2024 My Website</p>
</footer>
</body>
</html>现在，更新“index.html”以扩展“base.html”：
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates.</p>
<h2>Fruits List:</h2>
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
{% if show_greeting %}
<p>Have a great day!</p>
{% else %}
<p>Goodbye!</p>
{% endif %}
{% endblock %}模板过滤器
Jinja2 允许您使用过滤器在渲染变量之前修改它的值。让我们添加一个自定义过滤器来将列表中的所有项目大写。
在“app.py”中创建自定义过滤器：
from flask import Flask, render_template
app = Flask(__name__)
# Custom filter
def capitalize_list(items):
return [item.capitalize() for item in items]
app.jinja_env.filters['capitalize'] = capitalize_list
@app.route('/')
def home():
fruits = ["apple", "banana", "cherry", "date", "elderberry"]
return render_template('index.html', title="Home Page", message="Welcome to Flask with Jinja2!", fruits=fruits)
if __name__ == '__main__':
app.run(debug=True)在“index.html”中，将自定义过滤器应用于水果列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates.</p>
<h2>Fruits List (Capitalized):</h2>
<ul>
{% for fruit in fruits|capitalize %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
</body>
</html>宏
Jinja2 中的宏类似于 Python 中的函数。它们允许您在模板中重复使用代码片段。
在“templates”文件夹中创建一个“macros.html”文件：
{% macro render_fruit_list(fruits) %}
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
{% endmacro %}更新 `index.html` 以使用宏：
{% extends "base.html" %}
{% import "macros.html" as macros %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates.</p>
<h2>Fruits List (Using Macros):</h2>
{{ macros.render_fruit_list(fruits) }}
{% endblock %}多级模板继承
通过添加另一级别的模板扩展来创建更复杂的模板继承示例。
在“templates”文件夹中创建“layout.html”：
{% extends "base.html" %}
{% block content %}
<div class="container">
{% block body %}{% endblock %}
</div>
{% endblock %}更新 `index.html` 以扩展 `layout.html`：
{% extends "layout.html" %}
{% block title %}{{ title }}{% endblock %}
{% block body %}
<h1>{{ message }}</h1>
<p>This is a simple Flask application demonstrating Jinja2 templates with multiple levels of inheritance.</p>
<h2>Fruits List:</h2>
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
{% if show_greeting %}
<p>Have a great day!</p>
{% else %}
<p>Goodbye!</p>
{% endif %}
{% endblock %}静态文件
Flask 允许您从“static”目录提供静态文件，例如 CSS、JavaScript 和图像。让我们创建一个简单的样式表并将其包含在我们的模板中。
在项目目录中创建一个名为“static”的文件夹，并添加一个名为“styles.css”的文件：
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
}
footer {
background-color: #f8f9fa;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
更新 `base.html` 以包含样式表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Default Title{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>? 2024 My Website</p>
</footer>
</body>
</html>包含其他模板
有时，您可能希望将模板分解为更小的、可重复使用的部分。 Jinja2 允许您在其他模板中包含模板。
在“templates”文件夹中创建一个“header.html”文件：
<header>
<h1>{{ header_title }}</h1>
</header>更新 `base.html` 以包含 `header.html`：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Default Title{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
{% include 'header.html' %}
<main>
{% block content %}{% endblock %}
</main>
<footer>
<p>? 2024 My Website</p>
</footer>
</body>
</html>更新 `app.py` 以传递参数作为头标题
@app.route('/')
def home():
fruits = ["apple", "banana", "cherry", "date", "elderberry"]
return render_template('index.html', title="Home Page", message="Welcome to Flask with Jinja2!", fruits=fruits, header_title="Welcome to My Website")
if __name__ == '__main__':
app.run(debug=True)
在本博客中，我们介绍了使用 Jinja2 在 Flask 中渲染 HTML 模板的基础知识。我们创建了一个简单的 Flask 应用程序，构建了动态模板，并利用模板继承来更好地组织。 Flask 和 Jinja2 为开发动态且可维护的 Web 应用程序提供了强大的组合。
通过利用这些工具，您可以使用干净且可重用的代码创建强大且可扩展的 Web 应用程序。祝您快乐编码，关注收藏或者转发给其他小伙伴吧，谢谢！
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具（在线文件互传）
-
前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...
- 即用即走，这3款文件分享工具真香
-
打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）
-
大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)