如何自定义flask-admin，使其适配SB-Admin主题的现有应用

我们分两个优先级的方案实现需求：

方案1：集成现有sb-admin-2（Bootstrap4）主题（优先） #

你之前模板不生效的核心原因是flask-admin默认加载Bootstrap3的静态资源，和你的Bootstrap4样式冲突，且模板继承、资源加载顺序配置错误。按以下步骤调整即可：

1. 初始化Admin实例时指定Bootstrap4模板模式，禁用默认的Bootstrap3资源：

from flask_admin import Admin

# 初始化时添加template_mode参数
admin = Admin(
    app,
    name='你的后台名称',
    template_mode='bootstrap4'
)

2. 修改templates/admin/master.html的代码，替换默认布局和样式：

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

{% block head_css %}
  <!-- 引入你项目自有样式，不要调用super()加载默认bootstrap样式 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/sb-admin-2.css') }}">
  <!-- 保留flask-admin必要的管理页样式 -->
  <link rel="stylesheet" href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css', v='1.1.1') }}">
{% endblock %}

{% block page_body %}
  <!-- 粘贴你现有应用的侧边栏代码，完全复用原有逻辑 -->
  <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
    <!-- 原有侧边栏的logo、菜单、折叠控件等内容 -->
  </ul>
  <!-- 原有内容容器，嵌套flask-admin的内容块 -->
  <div id="content-wrapper" class="d-flex flex-column">
    <div id="content">
      {% block body %}{% endblock %}
    </div>
  </div>
{% endblock %}

{% block tail_js %}
  <!-- 引入你项目自有JS资源 -->
  <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/sb-admin-2.js') }}"></script>
  <!-- 加载flask-admin必要的交互JS -->
  {{ super() }}
{% endblock %}

调整完成后，flask-admin的所有管理页会完全嵌入你现有的sb-admin-2布局中，侧边栏和你现有应用完全一致。

方案2：配置Bootswatch自定义主题 #

如果暂时不需要复用现有侧边栏，仅需要美化样式，按以下步骤操作：

1. 下载你需要的Bootswatch主题CSS文件，放到项目static/css目录下
2. 同样初始化Admin时指定template_mode='bootstrap4'（如果用Bootstrap3版本的主题可省略该参数）
3. 新建templates/admin/master.html，写入以下代码：

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

{% block head_css %}
  <!-- 替换默认bootstrap样式为Bootswatch主题 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/你的主题名称.css') }}">
  <!-- 保留flask-admin必要的管理页样式 -->
  <link rel="stylesheet" href="{{ admin_static.url(filename='admin/css/bootstrap4/admin.css') }}">
{% endblock %}

内容的提问来源于stack exchange，提问作者calabash