flask-admin 非自定义modelview下扩展默认视图（base.html）

背景

在默认视图下实现某些统一的业务需求，如想改变默认视图的某些样式等。本文想阐述的是在默认视图下添加“面包屑”效果

材料：

略

制作：

目标：

1、在不重构的情况下实现如下效果

2、上源码

      {% if admin_view.category %}<div class="row" style="    margin-left: 0px;margin-right: 0px;"><ol class="breadcrumb">{% if admin_view.category %}<li>{{ admin_view.category }}</li> {% endif %}{% if admin_view.name %}<li class="active">{{ admin_view.name }}</li>{% endif %}</ol></div>{% endif %}

思路与技巧

1、想要全局修改默认视图效果就需要对源码视图进行覆盖，其实flask-admin 为我们实现这个目标提供了非常优秀的支持。

a、想修改modelview 下默认的列表视图只需要在自己工程目录的templates目录下新建admin/list.html (内容直接根据自己的版本从源码中复制过来即可，如：https://github.com/pallets-eco/flask-admin/blob/v1.6.1/flask_admin/templates/bootstrap3/admin/base.html)

b、自定义视图 baseview 就非常自由，但也需要你做更多的事情，不过建议每个视图继承{% extends 'admin/master.html' %} ，这样至少风格与默认的modelview一致，方便灵活使用，当然也省去了自己引入js和bootsrtap的麻烦

c、如果要在默认的视图中添加公共组件，我们只需要修改默认视图的公共类即可，那便是base.html,源码位置：

d、base.html 内容如下：（直接从源码库获得）

{% import 'admin/layout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}
<!DOCTYPE html>
<html><head><title>{% block title %}{% if admin_view.category %}{{ admin_view.category }} - {% endif %}{{ admin_view.name }} - {{ admin_view.admin.name }}{% endblock %}</title>{% block head_meta %}<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content="">{% endblock %}{% block head_css %}<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='3.3.5') }}" rel="stylesheet">{%if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css', v='3.3.5') }}" rel="stylesheet">{%endif%}<link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css', v='1.1.1') }}" rel="stylesheet"><link href="{{ admin_static.url(filename='admin/css/bootstrap3/submenu.css') }}" rel="stylesheet">{% if admin_view.extra_css %}{% for css_url in admin_view.extra_css %}<link href="{{ css_url }}" rel="stylesheet">{% endfor %}{% endif %}<style>body {padding-top: 4px;}</style>{% endblock %}{% block head %}{% endblock %}{% block head_tail %}{% endblock %}</head><body>{% block page_body %}<div class="container{%if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}"><nav class="navbar navbar-default" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#admin-navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>{% block brand %}<a class="navbar-brand" href="{{ admin_view.admin.url }}">{{ admin_view.admin.name }}</a>{% endblock %}</div><!-- navbar content --><div class="collapse navbar-collapse" id="admin-navbar-collapse">{% block main_menu %}<ul class="nav navbar-nav">{{ layout.menu() }}</ul>{% endblock %}{% block menu_links %}<ul class="nav navbar-nav navbar-right">{{ layout.menu_links() }}</ul>{% endblock %}{% block access_control %}{% endblock %}</div></nav>{% block messages %}{{ layout.messages() }}{% endblock %}{# store the jinja2 context for form_rules rendering logic #}{% set render_ctx = h.resolve_ctx() %}{% block body %}{% endblock %}</div>{% endblock %}{% block tail_js %}<script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='3.5.1') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='bootstrap/bootstrap3/js/bootstrap.min.js', v='3.3.5') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.22.2') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>{% if admin_view.extra_js %}{% for js_url in admin_view.extra_js %}<script src="{{ js_url }}" type="text/javascript"></script>{% endfor %}{% endif %}{% endblock %}{% block tail %}{% endblock %}</body>
</html>

e、在上述代码中添加面包屑代码即可（修改后的代码如下）

{% import 'admin/layout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}
<!DOCTYPE html>
<html><head><title>{% block title %}{% if admin_view.category %}{{ admin_view.category }} - {% endif %}{{ admin_view.name }} - {{ admin_view.admin.name }}{% endblock %}</title>{% block head_meta %}<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content="">{% endblock %}{% block head_css %}<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/swatch/{swatch}/bootstrap.min.css'.format(swatch=config.get('FLASK_ADMIN_SWATCH', 'default')), v='3.3.5') }}" rel="stylesheet">{%if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}<link href="{{ admin_static.url(filename='bootstrap/bootstrap3/css/bootstrap-theme.min.css', v='3.3.5') }}" rel="stylesheet">{%endif%}<link href="{{ admin_static.url(filename='admin/css/bootstrap3/admin.css', v='1.1.1') }}" rel="stylesheet"><link href="{{ admin_static.url(filename='admin/css/bootstrap3/submenu.css') }}" rel="stylesheet">{% if admin_view.extra_css %}{% for css_url in admin_view.extra_css %}<link href="{{ css_url }}" rel="stylesheet">{% endfor %}{% endif %}<style>body {padding-top: 4px;}</style>{% endblock %}{% block head %}{% endblock %}{% block head_tail %}{% endblock %}</head><body>{% block page_body %}<div class="container{%if config.get('FLASK_ADMIN_FLUID_LAYOUT', False) %}-fluid{% endif %}"><nav class="navbar navbar-default" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#admin-navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>{% block brand %}<a class="navbar-brand" href="{{ admin_view.admin.url }}">{{ admin_view.admin.name }}</a>{% endblock %}</div><!-- navbar content --><div class="collapse navbar-collapse" id="admin-navbar-collapse">{% block main_menu %}<ul class="nav navbar-nav">{{ layout.menu() }}</ul>{% endblock %}{% block menu_links %}<ul class="nav navbar-nav navbar-right">{{ layout.menu_links() }}</ul>{% endblock %}{% block access_control %}{% endblock %}</div></nav>{% if admin_view.category %}<div class="row" style="    margin-left: 0px;margin-right: 0px;"><ol class="breadcrumb">{% if admin_view.category %}<li>{{ admin_view.category }}</li> {% endif %}{% if admin_view.name %}<li class="active">{{ admin_view.name }}</li>{% endif %}</ol></div>{% endif %}{% block messages %}{{ layout.messages() }}{% endblock %}{# store the jinja2 context for form_rules rendering logic #}{% set render_ctx = h.resolve_ctx() %}{% block body %}{% endblock %}</div>{% endblock %}{% block tail_js %}<script src="{{ admin_static.url(filename='vendor/jquery.min.js', v='3.5.1') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='bootstrap/bootstrap3/js/bootstrap.min.js', v='3.3.5') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='vendor/moment.min.js', v='2.22.2') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='vendor/select2/select2.min.js', v='3.5.2') }}" type="text/javascript"></script><script src="{{ admin_static.url(filename='admin/js/helpers.js', v='1.0.0') }}" type="text/javascript"></script>{% if admin_view.extra_js %}{% for js_url in admin_view.extra_js %}<script src="{{ js_url }}" type="text/javascript"></script>{% endfor %}{% endif %}{% endblock %}{% block tail %}{% endblock %}</body>
</html>