Flask Flask-Admin 扩展模板

在本文中，我们将介绍如何使用Flask-Admin扩展模板。Flask-Admin是一个功能强大的Flask插件，可以帮助我们快速创建一个功能齐全的后台管理界面。在Flask-Admin中，我们可以使用自定义模板来定制这个后台界面的外观和功能。

阅读更多：Flask 教程

什么是Flask-Admin扩展模板？

Flask-Admin扩展模板是一种用于定制Flask-Admin插件后台界面的方法。默认情况下，Flask-Admin使用自己内置的模板来渲染后台界面。但是，通过扩展模板，我们可以根据自己的需求和设计来创建独特的后台界面。

如何扩展Flask-Admin模板？

要扩展Flask-Admin模板，我们需要按照以下步骤进行操作：

步骤1：创建自定义模板文件

首先，我们需要创建自定义的模板文件。在Flask-Admin中，模板文件位于templates文件夹下。我们可以创建一个新的HTML文件，或者复制Flask-Admin内置的模板文件进行修改。在模板文件中，我们可以使用HTML、CSS和JavaScript来定制界面的外观和交互。

步骤2：告知Flask-Admin使用自定义模板

接下来，我们需要告知Flask-Admin使用我们自定义的模板。在Flask应用程序的初始化阶段，我们可以通过Flask-Admin的appbuilder属性来获取到Admin对象。然后，我们可以使用admin.base_template属性来指定我们自定义的模板。

from flask import Flask
from flask_admin import Admin

app = Flask(__name__)
admin = Admin(app, name='My Admin', template_mode='bootstrap3', base_template='my_base.html')

在上面的示例中，我们通过template_mode参数指定了模板引擎为Bootstrap 3，通过base_template参数指定了我们自定义的模板文件为my_base.html。

步骤3：使用自定义模板

现在，我们可以在自定义模板中使用Flask-Admin提供的模板标签和宏来快速构建后台界面。Flask-Admin提供了丰富的模板标签和宏，用于显示表格、表单、导航栏等常见的界面组件。

例如，我们可以使用{% extends admin_base %}来继承Flask-Admin内置的基础模板，并在其中添加我们自定义的内容。我们还可以使用{% block content %}来定义页面的主要内容区域。

{% extends admin_base %}

{% block content %}
<div class="my-custom-content">
    <!-- 自定义内容 -->
</div>
{% endblock %}

步骤4：自定义模板样式和脚本

最后，我们可以在自定义模板中添加自己的样式和脚本来进一步美化和增强后台界面。通过使用CSS和JavaScript，我们可以修改界面的颜色、字体、布局等样式，以及添加交互效果和动态功能。

示例：定制后台界面外观

下面是一个示例，演示如何使用Flask-Admin扩展模板来定制后台界面的外观。假设我们有一个后台管理页面，需要显示一个用户列表和一个文章列表。

首先，我们创建一个名为my_admin.html的自定义模板，继承自Flask-Admin的基础模板admin/base.html：

{% extends 'admin/base.html' %}

{% block content %}
<div class="my-admin">
    <h1>用户列表</h1>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>用户名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            {% for user in users %}
            <tr>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <h1>文章列表</h1>
    <ul class="list-group">
        {% for article in articles %}
        <li class="list-group-item">{{ article.title }}</li>
        {% endfor %}
    </ul>
</div>
{% endblock %}

然后，我们告知Flask-Admin使用该自定义模板：

from flask import Flask
from flask_admin import Admin

app = Flask(__name__)
admin = Admin(app, name='My Admin', template_mode='bootstrap3', base_template='my_admin.html')

最后，我们可以在Flask应用程序中定义路由，用于显示后台管理界面：

from flask import render_template

@app.route('/admin')
def admin_page():
    users = [...]  # 获取用户列表
    articles = [...]  # 获取文章列表
    return render_template('admin.html', users=users, articles=articles)

现在，当我们访问/admin路径时，就会显示我们定制的后台界面，其中包含用户列表和文章列表。