Flask模板继承教程

在本文中，我们将介绍Flask模板继承的概念和用法。模板继承是一种简化网站开发过程的技术，它允许我们在不同页面之间共享相同的结构和样式，并减少代码的冗余。

阅读更多：Flask 教程

什么是模板继承？

模板继承是一种将公共部分提取出来并在不同页面之间共享的方法。通过使用模板继承，我们可以定义一个基础模板，并在其他页面中扩展或重写该模板。

创建一个基础模板

首先，让我们创建一个基础模板，其中包含网站的公共结构和样式。我们将命名为”base.html”。

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<div id="content">
    {% block content %}{% endblock %}
</div>

<footer>
    © 2022 My Website
</footer>

</body>
</html>

在上面的代码中，我们定义了一个基本的HTML结构，包括导航栏，内容区域和页脚。{% block content %}{% endblock %}是一个占位符，将在扩展模板中填充。

扩展基础模板

现在，我们可以创建其他页面并扩展基础模板。让我们创建一个名为”home.html”的页面，并继承”base.html”。

{% extends "base.html" %}

{% block content %}
    <h1>Welcome to My Website</h1>
    <p>This is the homepage of my website.</p>
{% endblock %}

在上面的代码中，我们使用{% extends "base.html" %}指令声明该页面将继承”base.html”模板。{% block content %}...{% endblock %}是一个特殊的指令，表示在该位置插入内容。

重写父模板的块

有时，我们可能需要在子模板中重写父模板的某些块。让我们创建一个名为”about.html”的页面，并重写基础模板的内容块。

{% extends "base.html" %}

{% block content %}
    <h1>About Us</h1>
    <p>We are a leading company in our industry.</p>
    <p>Contact us for more information.</p>
{% endblock %}

在上面的代码中，我们重写了{% block content %}块，添加了关于我们的信息。

继承多个模板

有时，一个页面可能需要继承多个模板。在这种情况下，我们可以使用{% include %}指令。

让我们创建一个名为”contact.html”的页面，并继承”base.html”以及其他一个名为”form.html”的模板。

{% extends "base.html" %}

{% block content %}
    <h1>Contact Us</h1>
    <form>
        {% include "form.html" %}
        <button type="submit">Submit</button>
    </form>
{% endblock %}

在上面的代码中，我们使用{% include "form.html" %}包含了一个名为”form.html”的模板，该模板包含了一个联系表单。

数据传递到模板

除了HTML结构之外，我们有时还需要在模板中传递数据。让我们传递一个”username”变量到”base.html”模板，并在导航栏中显示用户的用户名。

首先，在Flask应用中，我们需要使用render_template函数传递数据到模板。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    username = 'John'
    return render_template('home.html', username=username)

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

然后，在”base.html”模板中可以使用{{ username }}来显示传递的变量。

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
    <p>Welcome, {{ username }}!</p>
</nav>

<div id="content">
    {% block content %}{% endblock %}
</div>

<footer>
    © 2022 My Website
</footer>

</body>
</html>