📌  相关文章
📜  Flask 中的模板继承(1)

📅  最后修改于: 2023-12-03 14:41:13.517000             🧑  作者: Mango

Flask 中的模板继承

在 Flask 中，模板（template）是将数据渲染到 HTML 页面上的一种方式。在使用 Flask 模板的过程中，模板继承是一个非常有用的概念。它允许你定义一个基本的 HTML 模板，然后在子模板中继承和重写该模板的部分内容。

基本概念

模板继承有一个基本的模式，有一个父模板和一个或多个子模板。父模板定义了整个 HTML 页面的基本结构，子模板继承父模板并覆盖或添加特定部分的内容。下面是一个简单的模板继承示例，父模板名为“base.html”：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

在这个示例中，我们定义了一个基本的 HTML 页面，包括一个页面标题和一个页面内容部分。

现在我们来创建一个子模板，名为“index.html”，它将继承“base.html”并添加一个自定义的页面标题和内容。以下是“index.html”的代码：

{% extends 'base.html' %}

{% block title %}Index Page{% endblock %}

{% block content %}
    <h1>Welcome to the index page!</h1>
{% endblock %}

在这个示例中，我们使用了 Flask 模板中的{% extends %}语句来继承父模板“base.html”。我们也定义了一个称为“title”的块，用于覆盖父模板中的默认页面标题。最后，我们定义了一个称为“content”的块，将在父模板中的“content”块内部渲染。

继承父模板的块

子模板可以继承父模板中的任意块。这意味着你可以定义一个基础模板，其中包含所有子模板都将使用的公共结构和元素。然后，你可以在每个子模板中继承它，并覆盖或添加它的特定部分。

例如，以下是一个包含子模板的父模板，具有一个“head”块和一个“body”块：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% block head %}
        <title>{% block title %}{% endblock %}</title>
    {% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
</body>
</html>

现在，我们来创建一个子模板，它将继承父模板并覆盖“title”块。以下是“index.html”的代码：

{% extends 'base.html' %}

{% block title %}Index Page{% endblock %}

{% block body %}
    <h1>Welcome to the index page!</h1>
{% endblock %}

在这个示例中，我们通过使用{% extends %}语句和{% block %}语句来继承父模板和覆盖它的“title”块和“body”块。注意，这个示例中的“head”块没有被覆盖，因为我们没有在子模板中定义它。

子模板的块及super

当你在子模板中重写父模板中的一个块时，你可能想在子模板中保留一些父模板中的内容。这可以通过使用 Flask 模板中的“super()”函数来实现。

例如，以下是一个包含子模板的父模板，具有一个“title”块和一个“content”块：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

现在，我们来创建一个子模板，它将继承父模板并添加一个“content”块。以下是“index.html”的代码：

{% extends 'base.html' %}

{% block title %}Index Page{% endblock %}

{% block content %}
    <h1>Welcome to the index page!</h1>
    {{ super() }}
{% endblock %}

在这个示例中，我们使用了 Flask 模板中的“super()”函数来调用父模板中的“content”块。这样就可以在子模板中保留父模板的内容，并添加需要的内容。

共享变量

在 Flask 中，你可以在父模板中定义变量，并将其传递给子模板。这样，你可以在子模板中使用父模板中定义的变量。

例如，以下是一个包含子模板的父模板，其中定义了一个“title”变量：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{{ title }}{% endblock %}</title>
</head>
<body>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

现在，我们来创建一个子模板，它将继承父模板并使用“title”变量。以下是“index.html”的代码：

{% extends 'base.html' %}

{% block content %}
    <h1>Welcome to the {{ title }} page!</h1>
{% endblock %}

在这个示例中，我们使用了 Flask 模板中的“{{ }}”语句来使用父模板中定义的“title”变量。

总结

模板继承是 Flask 中非常有用的概念。它允许你定义一个基本的 HTML 模板，然后在子模板中继承和重写该模板的部分内容。在使用模板继承时，你可以定义任意数量的块，并在子模板中覆盖或添加它们。你还可以在父模板中定义变量，并将其传递给子模板。这让你可以在子模板中使用和修改父模板中定义的变量。