Flask 如何分离头部、基础部分和页脚

在本文中，我们将介绍如何使用Flask和jinja2模板引擎来分离网页的头部、基础部分和页脚。这种分离可以提高代码的可读性和可维护性，并使得在多个网页中共享相同的头部、基础部分和页脚变得更加方便。

阅读更多：Flask 教程

1. 创建Flask应用

首先，我们需要创建一个Flask应用，使用它来处理访问网页的请求。下面是一个简单的示例：

from flask import Flask, render_template

app = Flask(__name__)

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

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

在上面的代码中，我们创建了一个名为app的Flask应用，并添加了一个路由@app.route('/')，用于处理根路径的访问请求。在这个路由中，我们使用render_template函数来渲染index.html模板。

2. 创建模板文件

接下来，我们需要创建模板文件，分别用于头部、基础部分和页脚。通常情况下，我们会创建一个名为layout.html的基础模板，用于定义整个网页的框架结构。然后，我们再创建另外三个模板文件header.html、base.html和footer.html，分别用于定义头部、基础部分和页脚的内容。

a. layout.html

<!DOCTYPE html>
<html>
<head>
    <title>My Flask App</title>
</head>
<body>
    {% include 'header.html' %}

    {% block content %}{% endblock %}

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

在layout.html中，我们使用了jinja2的模板语法。{% include 'header.html' %}表示将header.html中的内容包含在当前位置。{% block content %}{% endblock %}表示一个占位符，可以在子模板中填充不同的内容。同样，{% include 'footer.html' %}表示将footer.html中的内容包含在当前位置。

b. header.html

<header>
    <h1>Welcome to My Flask App</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>

在header.html中，我们定义了网页的头部内容，包括一个标题和导航栏。

c. base.html

{% extends 'layout.html' %}

{% block content %}
<!-- 这里是子模板填充的内容 -->
{% endblock %}

在base.html中，我们使用了{% extends 'layout.html' %}来继承layout.html模板。然后，使用{% block content %}{% endblock %}来填充实际的内容。

d. footer.html

<footer>
    <p>© 2021 My Flask App. All rights reserved.</p>
</footer>

footer.html中定义了网页的页脚内容。

3. 渲染模板

在Flask应用中，我们可以使用render_template函数来渲染模板并返回给用户。

from flask import render_template

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

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

在上面的代码中，我们分别为’/about’和’/contact’路由添加了处理函数，并使用render_template函数渲染了各自的模板。

4. 完整示例

下面是一个完整的示例，演示了如何使用Flask和jinja2分离头部、基础部分和页脚：

from flask import Flask, render_template

app = Flask(__name__)

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

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

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

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