使用 Python Flask 创建动态网页模板

Python Flask 是一个轻量级的 Web 应用框架，广泛用于创建动态网站和 Web 应用程序。在 Flask 中，模板是生成 HTML 页面的重要部分。本文将介绍如何使用 Flask 的模板引擎 Jinja2，结合代码示例，帮助你构建一个简单的动态网站，并在其中展示一个甘特图。

1. Flask 简介

Flask 是一种流行的 Web 框架，以其灵活性和易用性受到许多开发者的青睐。它允许你快速构建 Web 应用程序，而不需要复杂的配置。

1.1 安装 Flask

在开始之前，确保已在计算机上安装了 Flask。可以通过以下命令使用 pip 进行安装：

pip install Flask

2. 创建 Flask 应用

接下来，创建一个简单的 Flask 应用，以下代码展示了如何实现这一过程。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在这个示例中，我们创建了一个最基本的 Flask 应用，定义了一个路由 /'，当用户访问主页时，将渲染 index.html 模板。

2.1 目录结构

为了使 Flask 正确工作，我们需要创建一个文件目录结构，如下所示：

/project
    ├── app.py
    └── templates
        └── index.html

3. 创建模板文件

在 /templates 文件夹中创建 index.html 文件。在这个文件中，我们将使用 Jinja2 来生成动态内容。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask 模板示例</title>
</head>
<body>
    欢迎来到 Flask 模板示例
    <div>
        <h2>甘特图展示</h2>
        <div class="gantt">
            <pre>
gantt
    title 任务进度表
    dateFormat  YYYY-MM-DD
    section 开发阶段
    需求分析         :a1, 2023-10-01, 30d
    设计              :after a1  , 20d
    开发              :after a2  , 40d
    测试              :after a3  , 20d
    发布              :2023-12-01  , 5d
    section 维护阶段
    bug修复           :2023-12-06  , 5d
            </pre>
        </div>
    </div>
</body>
</html>

3.1 甘特图

在上述模板中，我们使用了 Mermaid 语法来生成甘特图。你需要确保在网页中引入 Mermaid 库，才能正常渲染甘特图。

在模板 <head> 标签中增加 Mermaid 库的引入代码：

<head>
    ...
    <script type="module">
        import { initMermaid } from '
        initMermaid();
    </script>
</head>

4. 启动 Flask 应用

在终端中，切换到项目目录，运行以下命令启动 Flask 应用：

python app.py

在浏览器中访问 `

5. 结束语

使用 Flask 创建动态网站非常简单，通过模板引擎 Jinja2，可以方便地生成 HTML 页面，同时结合数据和逻辑，使得网页具有互动性。通过上述示例，你已经学会了如何创建一个基本的 Flask 应用，使用模板，并展示甘特图。

随着项目的复杂性增加，你可以进一步探索 Flask 的其他特性，如数据库连接、表单处理和用户认证等。希望这篇文章能够激发你使用 Flask 开发更多有趣的 Web 应用的热情！

对 Flask 和 Jinja2 的理解将是你在 Web 开发道路上的基础。希望你能勇于尝试，并不断挑战自我，创造出更加复杂和美观的 Web 应用。