Flask-admin 自定义后台模板
可能有些人不喜欢原始的管理后台,虽然看起来还挺干净简练的,不是我要的样子,可以自定义吗?
答案当然是可以的。
最好是自己通过github下载flask-admin源码,然后自己查看一下后台的源码走向。
通过这张图,我们也可以了解到模板中,最底层的admin/base.html,其他模板都是通过继承去根据宏去改写具体的显示的。
admin/master.html文件里就是直接引用base.html 没有其他的东西:{% extends admin_base_template %}
如果我们要改写这个后台的模板,是不是我们只要拿到相应的标签就可以改造了,标签主要就是组件及其数据的html,说白就是wTF在后台生成的代码嵌到模板上,当然,你也可以完全改写了,那也就没有必要用flask-admin的意义了。
我们在base.html 里面看到引入两个其他文件:
{% import 'admin/layout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}
layout.html
文件是最关键的布局文件layout.html
主要是定义了菜单的宏:菜单的icon,菜单的遍历显示,菜单的扩展链接,菜单的提示信息(增删改后的提示信息)
还有一个重要的lib.html文件是一个库文件,预定义一些样式和组件,也是可以直接拿来用的。
在base.html 可以看到:
{% block main_menu %}
{% endblock %}
就是菜单直接嵌入layout.html的菜单,所以我们可以直接改base.html 包括layout.html 也给修改成我们的就是实现后台模板的整体修改。
可以直接在
Template目录建立目录admin,创建mybase.html,mylayout.html
然后注册模板到flask-admin:
admin = Admin(app, name='cleanblog', template_mode='bootstrap3', base_template='admin/mybase.html')
只需要两步就能解决问题,其实还有一步就是你要找到一个合适的模板:
我们可以去https://startbootstrap.com/te... 下载一套自己觉得还可以的bootstrap样式,最好是bootstrap样式的,原因是这样可以减少一些修改设置样式冲突。
我们分几步进行整合
1)寻找模板,并把文件放到static静态目录下:
以startbootstrap-sb-admin-2-gh-pages模板为例:(可以直接百度搜到)
拷贝压缩包的三个目录到static下:dist,js,vendor
2)在template目录建立目录admin并新建文件 mybase.html,和mylayout.html
1.1 mylayout.html
在复制原先的代码进行修改:
{% macro menu(menu_root=None) %}
{% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
{%- for item in menu_root %}
{%- if item.is_category() -%}
{% set children = item.get_children() %}
{%- if children %}
{% set class_name = item.get_class_name() %}
{%- if item.is_active(admin_view) %}
{% else -%}
{%- endif %}
{% if item.class_name %} {% endif %}{{ item.name }}
{% endif %}
{%- else %}
{%- if item.is_accessible() and item.is_visible() -%}
{% set class_name = item.get_class_name() %}
{%- if item.is_active(admin_view) %}
{%- else %}
{%- endif %}
{{ menu_icon(item) }}{{ item.name }}
{%- endif -%}
{% endif -%}
{% endfor %}
{% endmacro %}
修改为:
{% macro menu(menu_root=None) %}
{% if menu_root is none %}{% set menu_root = admin_view.admin.menu() %}{% endif %}
{%- for item in menu_root %}
{%- if item.is_category() -%}
{% set children = item.get_children() %}
{%- if children %}
{% set class_name = item.get_class_name() %}
{%- if item.is_active(admin_view) %}
{% else -%}
{%- endif %}
{{ item.name }}
{% endif %}
{%- else %}
{%- if item.is_accessible() and item.is_visible() -%}
{% set class_name = item.get_class_name() %}
{%- if item.is_active(admin_view) %}
{%- else %}
{%- endif %}
{{ menu_icon(item) }}{{ item.name }}
{%- endif -%}
{% endif -%}
{% endfor %}
{% endmacro %}
主要是根据模板的菜单样式进行修改。
修改之后修改
mybase.html 把所有应的base.html 拿过来修改:{% block head_css %} {% endblock %}
增加
对于body标签下面的代码,全部黏贴来之模板的内容,
在菜单地方黏贴:
{% block menu_links %}
{{ layout.menu_links() }}
{% endblock %}
在容器的地方黏贴:
{% block access_control %}
{% endblock %}
{% block messages %}
{{ layout.messages() }}
{% endblock %}
{# store the jinja2 context for form_rules rendering logic #}
{% set render_ctx = h.resolve_ctx() %}
{% block body %}{% endblock %}
最后的代码就如下:
{% import 'admin/mylayout.html' as layout with context -%}
{% import 'admin/static.html' as admin_static with context %}
{% block title %}{% if admin_view.category %}{{ admin_view.category }} - {% endif %}{{ admin_view.name }} - {{ admin_view.admin.name }}{% endblock %}
{% block head_meta %}
{% endblock %}
{% block head_css %}
{%if config.get('FLASK_ADMIN_SWATCH', 'default') == 'default' %}
{%endif%}
{% if admin_view.extra_css %}
{% for css_url in admin_view.extra_css %}
{% endfor %}
{% endif %}
{% endblock %}
{% block head %}
{% endblock %}
{% block head_tail %}
{% endblock %}
{% block access_control %}
{% endblock %}
{% block messages %}
{{ layout.messages() }}
{% endblock %}
{# store the jinja2 context for form_rules rendering logic #}
{% set render_ctx = h.resolve_ctx() %}
{% block body %}{% endblock %}
{% block tail_js %}
{% if admin_view.extra_js %}
{% for js_url in admin_view.extra_js %}
{% endfor %}
{% endif %}
{% endblock %}
{% block tail %}
{% endblock %}
展示出来的样式: