# 全局配置

# 首页配置

simplepro首页默认了较多的模块,也许某些你无法用上。所以该文档提供了如何定制。

simpleui采用框架结构,simplepro也是基于simpleui,simpleui的首页文件home.html

只要重写该页面即可。

重写有两种方式,第一种全覆盖,第二种block方式

# 模板重写

# 全覆盖方式

在你的项目的templates目录中建立以下文件结构

├─templates
│  ├─admin
│  │  ├─home.html
1
2
3

home.html内容:

{% load i18n static simpletags %}
<link rel="stylesheet" href="{% static 'admin/simplepro/css/home.css' %}">
<script type="text/javascript" src="{% static 'admin/simplepro/echarts/echarts.min.js' %}"></script>
<div class="home-body">

     {% block quick %}
        {% include 'admin/parts/quick.html' %}
    {% endblock %}

    {% block chart_cards %}
        {% include 'admin/parts/charts_cards.html' %}
    {% endblock %}

    {% block line_chart %}
       {% include 'admin/parts/line_chart.html' %}
    {% endblock %}

    {% block info %}
       {% include 'admin/parts/info.html' %}
    {% endblock %}


    <div style="height: 80px"></div>
</div>
<el-backtop target=".home-body"></el-backtop>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

你可以完全拷贝内容,到新建的home.html中,挑选需要的include部分。

# 继承block方式

也需要在templates->admin->home.html中建立文件 html内容:

{% extends 'admin/home.html' %}
{% block quick %}
    //...这里重新你的内容
{% endblock%}

1
2
3
4
5

block方式文档请参考django的文档。

# 配置方式

simplepro内置了一个默认的首页,只是由简单的快捷导航与最近操作组成。

在自己项目的settings.py中加入:

# 配置URL

SIMPLEUI_HOME_PAGE = 'https://www.baidu.com'
1

# 标题

SIMPLEUI_HOME_TITLE = '百度一下你就知道'
1

# 图标

支持element-ui和fontawesome的图标,参考https://fontawesome.com/icons图标

SIMPLEUI_HOME_ICON = 'fa fa-user'
1

三项配置都是选填,不填都会有默认值。 图标列表

# 首页监控图表显示和隐藏

默认显示,自3.1 起生效

# 显示
SIMPLEPRO_MONIT_DISPLAY = True

# 隐藏
SIMPLEPRO_MONIT_DISPLAY = False
1
2
3
4
5

# 隐藏 simplepro 版本和授权信息

请在settings.py中加入:

SIMPLEPRO_INFO = False
1

# 站点标题

显示在浏览器标签页和系统相关位置的名称

可以在urls.py中加入:

from django.contrib import admin
# 网站标签页名称
admin.site.site_title = '管理后台PRO'

# 网站名称:显示在登录页和首页
admin.site.site_header = '员工管理后台PRO'
1
2
3
4
5
6

# 收藏夹\网页小图标

  • 将下载好的图标放入到项目的static目录中,然后取名为favicon.ico

  • 然后在urls.py中加入:

urlpatterns = [
    # 这里可以配置网页收藏夹的图标
    path('favicon.ico', RedirectView.as_view(url=r'static/favicon.ico')),
] 
1
2
3
4

settings.py中加入:

  • 绝对路径
SIMPLEUI_LOGO='https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png'
1
  • 相对路径

需要将图片放入static目录中,然后引用相关路径

SIMPLEUI_LOGO='static/images/logo.png'
1
  • 效果

登录页:

首页:

首页的logo暂时没有单独的配置,与登录页的logo一样。

# 首页和登录页不同logo配置

大部分业务不能满足以上两种配置,这时候可以很灵活的用模板重写来实现。simple系列框架预留了大量的block,可以很轻松的进行重写。

我们推荐用这种方式重写,而不推荐覆盖整个文件,或者直接修改依赖包中的模板。下列这种方式不会影响后续的升级。

  • 在项目中创建文件

templates/admin/login.html

  • 文件中加入

src可以写相对路径或者绝对路径


{% block logo %}
    <div class="banner">
        <img src="{% static 'admin/simplepro/images/banner.png' %}">
    </div>
{% endblock %}

1
2
3
4
5
6
7
  • 在项目中创建文件

templates/admin/index.html

  • 文件中加入

src可以写相对路径或者绝对路径,site_header可以写网站名称


{% block logo %}
    <div class="logo-wrap" v-if="!fold">
        <div class="float-wrap">
            <div class="left">
                <img src="{% static '/admin/simplepro/images/logo.png' %}">
            </div>
            <div class="left">
                <span>{{ site_header }}</span>
            </div>
        </div>
    </div>
{% endblock %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 离线模式

离线模式是指以脱机模式加载相关静态资源,适合没有外网的场景。可以配合离线激活文件使用。

settings.py中加入

SIMPLEUI_STATIC_OFFLINE = True
1

# 图标

# 说明

simpleui中显示的图标 可以参考fontawesome (opens new window)的图标,只需要将完整的class名填入即可。

# 默认图标

simpleui对所有菜单提供了一个默认的file图标,是为了统一风格。也许你并不喜欢,你可以选择关闭默认图标

SIMPLEUI_DEFAULT_ICON = False

说明
True 开启默认图标,默认为True
False 关闭默认图标

# 自定义图标

simpleui仅为系统默认模块提供了图标,如果要为其他模块指定图标,可以自定义配置。图标参考请查阅:图标说明

优先级: 自定义->系统配图->默认图标

注:simpleui 原则上不涉及代码,所以采用setting方式。后续可考虑扩展Model的 Meta class 进行配置图标

字段 说明
name 模块名字,请注意不是model的命名,而是菜单栏上显示的文本,因为model是可以重复的,会导致无法区分
icon 图标

例子:

SIMPLEUI_ICON = {
    '系统管理': 'fab fa-apple',
    '员工管理': 'fas fa-user-tie'
}

1
2
3
4
5

# 菜单

# 自定义菜单

# system_keep 保留系统菜单

该字段用于告诉simpleui,是否需要保留系统默认的菜单,默认为False,不保留。 如果改为True,自定义和系统菜单将会并存

该字段用于告诉simpleui,是否需要开启过滤显示菜单和排序功能。
默认可以不用填写,缺省配置为默认排序,不对菜单进行过滤和排序。
开启认为传一个列表,如果列表为空,则什么也不显示。列表中的每个元素要对应到menus里面的name字段

# dynamic 开启动态菜单功能

该字段用于告诉simpleui,是否需要开启动态菜单功能。
默认可以不用填写,缺省配置为False,不开启动态菜单功能。
开启为True,开启后,每次用户登陆都会刷新左侧菜单配置。
需要注意的是:开启后每次访问admin都会重读配置文件,所以会带来额外的消耗。

字段 说明
name 菜单名
icon 图标,参考element-ui和fontawesome图标
url 链接地址,绝对或者相对,如果存在models字段,将忽略url
models 子菜单,自simpleui 2021.02.01+版本 支持最多3级菜单,使用方法可以看下方例子

# 例子

import time
SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['Simpleui', '测试', '权限认证', '动态菜单测试'],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [{
        'name': 'Simpleui',
        'icon': 'fas fa-code',
        'url': 'https://gitee.com/tompeppa/simpleui'
    }, {
        'app': 'auth',
        'name': '权限认证',
        'icon': 'fas fa-user-shield',
        'models': [{
            'name': '用户',
            'icon': 'fa fa-user',
            'url': 'auth/user/'
        }]
    }, {
        # 自2021.02.01+ 支持多级菜单,models 为子菜单名
        'name': '多级菜单测试',
        'icon': 'fa fa-file',
      	# 二级菜单
        'models': [{
            'name': 'Baidu',
            'icon': 'far fa-surprise',
            # 第三级菜单 ,
            'models': [
                {
                  'name': '爱奇艺',
                  'url': 'https://www.iqiyi.com/dianshiju/'
                  # 第四级就不支持了,element只支持了3级
                }, {
                    'name': '百度问答',
                    'icon': 'far fa-surprise',
                    'url': 'https://zhidao.baidu.com/'
                }
            ]
        }, {
            'name': '内网穿透',
            'url': 'https://www.wezoz.com',
            'icon': 'fab fa-github'
        }]
    }, {
        'name': '动态菜单测试' ,
        'icon': 'fa fa-desktop',
        'models': [{
            'name': time.time(),
            'url': 'http://baidu.com',
            'icon': 'far fa-surprise'
        }]
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

如果SIMPLEUI_CONFIG中存在menus字段,将会覆盖系统默认菜单。并且menus中输出的菜单不会受权限控制。

更新时间: 9/1/2021, 10:35:55 AM