📌  相关文章
📜  flask 扩展了两个 base.html - Python (1)

📅  最后修改于: 2023-12-03 15:15:05.847000             🧑  作者: Mango

使用 Flask 扩展了两个 base.html

在 Flask 中，我们可以使用 Jinja2 模板引擎来创建 HTML 页面。可以通过继承一个基础模板来简化创建多个页面的过程。这些基础模板通常包含了一些共同的元素，如页头、页脚、导航栏等等。

在 Flask 应用程序中，我们可以使用 Flask 扩展来扩展这些基础模板，从而更方便地修改和管理这些模板。

在本文中，我将演示如何使用 Flask 扩展扩展两个基础模板。

步骤一：安装相关扩展

我们需要安装 Flask 和 Flask-Bootstrap 扩展。可以使用以下命令进行安装：

pip install Flask Flask-Bootstrap
步骤二：创建基础模板

我们将创建两个基础模板：base.html 和 admin_base.html。这些模板将包含一些共同的元素，如页头、页脚、导航栏等等。

下面是 base.html 的代码：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}{% endblock %}</title>
    {% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    {% endblock %}
</head>
<body>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
    {% block content %}{% endblock %}
    <footer>
        <p>&copy; 2021 My Website</p>
    </footer>
    {% block scripts %}
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% endblock %}
</body>
</html>

这个模板包含了页头、页脚和导航栏。我们使用 Jinja2 的 {% block %} 和 {% endblock %} 语句来定义可替换的部分。

下面是 admin_base.html 的代码：

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Admin{% endblock %}</title>
    {% block styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    {% endblock %}
</head>
<body>
    <nav>
        <a href="#">Admin Home</a>
        <a href="#">Admin Users</a>
        <a href="#">Admin Settings</a>
    </nav>
    {% block content %}{% endblock %}
    <footer>
        <p>&copy; 2021 My Website</p>
    </footer>
    {% block scripts %}
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% endblock %}
</body>
</html>

这个模板和 base.html 类似，但包含了另外一些导航链接。

步骤三：创建视图函数

我们将创建两个视图函数来渲染这些基础模板：index() 和 admin()。

下面是应用程序的代码：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

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

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

注意，我们使用 flask_bootstrap 来扩展 Flask，并在 app 中初始化这个扩展。

步骤四：创建子模板

现在，我们可以创建多个子模板，它们继承并扩展了这两个基础模板。

下面是 index.html 的代码：

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block content %}
<h1>Welcome to My Website!</h1>
<p>This is the home page.</p>
{% endblock %}

这个模板继承了 base.html 并定义了可替换的部分。

下面是 admin.html 的代码：

{% extends 'admin_base.html' %}

{% block content %}
<h1>Welcome to Admin!</h1>
<p>This is the admin page.</p>
{% endblock %}

这个模板继承了 admin_base.html 并定义了可替换的部分。

结论

通过扩展基础模板，我们可以更方便地创建多个 HTML 页面。在实践中，这个技术可以减少代码的复制和粘贴，从而提高代码的可维护性和可读性。

建议阅读 Flask 和 Jinja2 的文档来了解更多关于模板的知识。