Flask Jinja2: 每3个项目创建一行

在本文中，我们将介绍如何使用Flask和Jinja2来实现每3个项目创建一行的功能。

阅读更多：Flask 教程

1. Flask框架简介

Flask是一个轻量级的Python web框架，它简单易学，使用简洁的语法来构建Web应用程序。与其他框架相比，Flask具有灵活和可扩展的特点，使得它在Web开发领域非常受欢迎。

Jinja2是Flask默认使用的模板引擎，它提供了一种将动态数据与静态HTML页面进行结合的方法。使用Jinja2，我们可以在HTML模板中编写动态内容，使得网页的生成更加灵活和可定制。

2. 示例：创建新行

下面我们来演示如何使用Flask和Jinja2来实现每3个项目创建一行的功能。假设我们有一个包含多个项目的列表，我们希望在渲染到HTML页面中时，每3个项目创建一行。

2.1 创建Flask应用程序

首先，我们需要创建一个简单的Flask应用程序，并使用Jinja2作为模板引擎。以下是一个基本的示例代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    projects = ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8', '项目9']
    return render_template('index.html', projects=projects)

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

2.2 创建HTML模板

接下来，我们需要创建一个HTML模板，并在其中使用Jinja2的语法来遍历项目列表，并创建新行。以下是一个简单的HTML模板示例：

<!DOCTYPE html>
<html>
<head>
    <title>项目列表</title>
</head>
<body>
    <h1>项目列表</h1>
    <table>
        <tr>
        {% for project in projects %}
            <td>{{ project }}</td>
            {% if loop.index % 3 == 0 %}
                </tr>
                <tr>
            {% endif %}
        {% endfor %}
        </tr>
    </table>
</body>
</html>

在上面的代码中，我们使用了{% for %}和{% if %}语法来遍历项目列表，并在每3个项目后创建新的表格行。

2.3 运行应用程序

现在，我们可以通过运行Flask应用程序来查看结果。在终端中执行以下命令：

$ python your_app.py

然后在浏览器中访问http://localhost:5000，您将看到一个包含项目列表的HTML页面，其中每3个项目创建了一行。

3. 优化：使用Bootstrap实现网格布局

除了上述示例中的方法外，我们还可以使用Bootstrap来实现更优雅的网格布局。Bootstrap是一个流行的前端框架，提供了一系列的CSS和JavaScript组件，可以方便地构建响应式网页。

在使用Bootstrap之前，我们需要在HTML页面中引入Bootstrap的CSS和JavaScript文件。以下是修改后的HTML模板示例：

<!DOCTYPE html>
<html>
<head>
    <title>项目列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css">
</head>
<body>
    <h1>项目列表</h1>
    <div class="container">
        <div class="row">
        {% for project in projects %}
            <div class="col-sm-4">{{ project }}</div>
        {% endfor %}
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
</body>
</html>

在上面的代码中，我们使用了Bootstrap的container、row和col-sm-4类来实现网格布局，确保每行显示3个项目。