python flask之模板继承方式

下面详细讲解 "Python Flask 之模板继承方式" 的完整攻略，包含两条示例说明。

模板继承

在 Flask 中，可以使用模板继承来简化模板的设计。模板继承是指创建一个基础模板，该模板包含应用程序中所有页面共享的公共部分，然后在单独的模板中使用基础模板作为一个模板，以便将其覆盖和拓展。这样，可以避免在每个单独的模板中反复编写共同的代码，提供了便利的灵活性和代码组织。

创建基础模板

在 Flask 中，可以通过在模板中使用 block 和 extends 指令实现模板继承。首先，需要在项目的模板文件夹中创建一个新文件，作为基础模板。下面是一个简单的示例：

<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}{% endblock %} My Website</title>
    </head>
    <body>
        <header>
            {% block header %}
            <h1>My Website</h1>
            {% endblock %}
        </header>
        <nav>
            {% block nav %}
            <a href="/">Home</a> |
            <a href="/about">About</a> |
            <a href="/contact">Contact</a>
            {% endblock %}
        </nav>
        <main>
            {% block content %}{% endblock %}
        </main>
        <footer>
            {% block footer %}
            <p>&copy; My Company, 2020</p>
            {% endblock %}
        </footer>
    </body>
</html>

在上面的示例中，使用了四个 block 指令：title、header、nav 和 footer，分别代表页面标题、页眉、导航和页脚。

除了 block 指令之外，基础模板中还使用了 extends 指令，用于指定该模板要继承的上层模板，即 Flask 应用的其它模板。在该模板的开头使用该指令，示例中的写法如下：

{% extends "base.html" %}

这里将基础模板命名为 base.html，并且在新模板中通过 extends 指定了 base.html 此模板作为要继承的父级模板。

创建单独的模板

接下来我们可以使用这个基础模板来创建单独的模板，从而更快捷地开发多个页面。单独的模板使用 block 指令来覆盖基础模板中的区域，这里有两个示例。

示例1：首页

<!-- home.html -->
{% extends "base.html" %}

{% block title %}Home{% endblock %}
{% block content %}
    <h2>Welcome to My Website!</h2>
    <p>Please explore my site by using the navigation links above.</p>
{% endblock %}

在这个示例中，我们使用了 extends 指令来继承基础模板，并在 {% block title %} 和 {% block content %} 中覆盖了基础模板的相应区域。在 home.html 页面中，我们把 {% block title %} 的内容设置为 Home，覆盖了基础模板中的 {% block title %}，并在 {% block content %} 中添加了欢迎信息和网站介绍。

示例2：关于

<!-- about.html -->
{% extends "base.html" %}

{% block title %}About{% endblock %}
{% block content %}
    <h2>About Us</h2>
    <p>We are a small company dedicated to improving the web</p>
{% endblock %}

在这个示例中，我们使用了 extends 指令继承基础模板，并在 {% block title %} 和 {% block content %} 中覆盖了基础模板的相应区域。在 about.html 页面中，我们把 {% block title %} 的内容设置为 About，覆盖了基础模板中的 {% block title %}，并在 {% block content %} 中添加了公司介绍信息。