如何为所有模板重写Flask_admin的样式？

嘿，我懂你现在的需求——想把自定义的蓝色边框导航栏样式一次性应用到Flask-Admin的所有模板，而不是只在单个index.html里生效对吧？这里有几个简单靠谱的解决方案，你可以根据自己的项目情况选择：

方法1：自定义Flask-Admin基础模板（最直接的全局方案） #

Flask-Admin默认使用自带的base.html作为所有页面的基础模板，我们可以创建一个自己的基础模板来覆盖它，让所有页面自动继承自定义样式：

1. 在你的Flask项目的templates文件夹下，新建一个admin子文件夹，然后在里面创建base.html文件
2. 让这个文件继承Flask-Admin的原始基础模板，同时在head块中加入你的自定义CSS：

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

{% block head %}
    {{ super() }}
    <style>
        .navbar {
            border-color: #019ced;
            border-width: 1px;
            border-radius: 0;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top: none;
            box-shadow: none;
        }
    </style>
{% endblock %}

3. 最后在初始化Flask-Admin的时候，指定使用你自定义的基础模板：

from flask_admin import Admin

# 初始化Admin时，通过base_template参数指定你的自定义模板
admin = Admin(app, name='我的Web应用', template_mode='bootstrap4', base_template='admin/base.html')

这样所有Flask-Admin生成的页面，都会自动使用这个带自定义导航栏样式的基础模板，样式就全局生效了。

方法2：把CSS放到静态文件中（适合样式较多的场景） #

如果你的自定义样式不止导航栏，后续可能还要加更多样式，把CSS单独放到静态文件里会更便于维护：

1. 在项目的static/css文件夹下，创建custom_admin.css文件，写入你的导航栏样式：

.navbar {
    border-color: #019ced;
    border-width: 1px;
    border-radius: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top: none;
    box-shadow: none;
}

2. 回到刚才创建的admin/base.html文件，把内联样式换成静态文件的引入：

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

{% block head %}
    {{ super() }}
    <!-- 引入自定义静态CSS文件 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_admin.css') }}">
{% endblock %}

3. 同样按照方法1的步骤，在初始化Admin时指定base_template='admin/base.html'即可。

这两种方法都能完美解决你的问题，第一种适合快速实现小范围样式修改，第二种更适合后续需要扩展样式的场景～

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