Flask 模板:使用 Jinja2 渲染 HTML
yund56 2025-04-22 08:32 43 浏览
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>(c) 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>(c) 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>(c) 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 应用程序。祝您快乐编码,关注收藏或者转发给其他小伙伴吧,谢谢!
相关推荐
- 如何在Office 中编辑 PDF?附详细化步骤
-
PDF很受欢迎,因为它能在不同的设备和操作系统上仍然保持原有格式。但是,这也意味着直接更改PDF文件比其他格式更难更复杂。值得庆幸的是,Microsoftoffice和UPDF帮你解决这一难题。一...
- 我的 Windows 装机必备软件清单
-
今天给大家分享下我的装机必备软件,都是用了好多年的软件神器。靠谱、好用、无广告,Windows电脑必备软件,收藏这一篇就够了!01.浏览器王者:Chromehttps://www.google.c...
- Docnet Core 是一个轻量级、高性能的 .NET PDF 操作库
-
DocnetCore介绍DocnetCore是一个轻量级、高性能的.NETPDF操作库,依托于PDFium渲染引擎,提供强大的PDF文档解析、渲染、操作等功能。它完全支持.NET...
- 分享三款好用的PDF编辑软件,轻松处理PDF
-
作为一名需要经常和PDF文件打交道的工作者,我来分享一下几款好用的PDF编辑软件,并详细分析了它们的优缺点,希望能帮你找到合适的工具。1.AdobeAcrobatDC作为PDF格式的发明者,Ado...
- PDF文档创建工具软件:novaPDF OEM 11.9 Build 432 for Windows
-
novaPDFOEM是一款实用高效的软件,从头开始设计,让您尽可能轻松地在应用程序中添加PDF打印功能。换句话说,这个实用程序是专门为应用程序开发人员设计的,可以直接在程序安装程序中集成为PDF打印...
- 线性表顺序存储结构求集合的并,交,补,差(源代码附上 超详细)
-
一:算法分析1)用数组A,B,C,E表示集合。假定A={1,3,4,5,6,7,9,10}, B={2,,3,4,7,8,10},E={1,2,3,4,5,6,7,8,9,10}, 输入数组A...
- 分享一套SpringBoot开发博客系统源码,包含完整开发文档和视频
-
基本信息项目名称:eblog摘要:eblog是一个基于Springboot2.1.2开发的博客学习项目,为了让项目融合更多的知识点,达到学习目的,编写了详细的从0到1开发文档。主要学习包括:自定义Fr...
- 通达信指标合集〔源码齐全〕
-
很多朋友问到我哪款指标好用,这里我说一下,之所以有很多不同的指标是因为我们在针对不同的盘面情况的时候使用的指标是不同的,我给到的指标一般来讲就目前的环境来讲都是比较适合的,今天我就把我平时自己常用的指...
- 巅峰对决!Spring Boot VS .NET 6
-
SpringBoot和ASP.NETCore都是企业中流行的Web框架,对于喜欢C#的人会使用ASP.NETCore,而对于Java或Kotlin等基于JVM的语...
- 在asp.net core 中控制访问权限的方法
-
Intro#由于项目需要,需要在基于asp.netmvc的Web项目框架中做权限的控制,于是才有了这个权限控制组件,最初只是支持netframework,后来dotnetcore2.0...
- ASP.NET是否无生存之地?
-
ASP.NET,这个已经很久的技术,总觉得已经被时代淘汰,我们公司是一个10人小公司,几个十年十五年的项目还是用ASP.NET开发的。这两年由于客户的需求变化,我们公司也顺势开始对这些项目重新开发,改...
- Spring Boot + Vue.js 实现前后端分离(附源码)
-
作者:梁小生0101链接:juejin.im/post/5c622fb5e51d457f9f2c2381SpringBoot+Vue.js前后端涉及基本概念介绍,搭建记录,本文会列举出用到环...
- ASP.NET Core 中的 Mapster 使用入门教程
-
在本文中,我们将学习如何在ASP.NETCore应用程序中使用Mapster。首先,我们将了解Mapster是什么以及如何将其安装到.NETCore应用程序中。然后,我们将在使用...
- Asp.net常用方法及request和response-a
-
asp.net教程asp.net常用方法:1、Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链,可以伪造(比如迅雷)。(使用全局一般处理...
- ASP.NET Core使用功能开关控制路由访问
-
前言在前面的文章,我们介绍了使用Middleware有条件地允许访问路由(《ASP.NETCore使用Middleware有条件地允许访问路由》)。而对于一些试验性的功能,我们并不希望用密码去控制是...
- 一周热门
- 最近发表
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)