12.simpleui Django后台管理的使用
文章目录
一、介绍
simpleui 是django admin的一个主题 是一个基于element-ui+vue开发,重写和优化90%以上的页面。 与suit是同类产品。我们是一个更符合国人审美和使用习惯的一个主题。
官网文档 | 链接
后台管理官网展示 | 链接
二、基本使用
1.pip安装
pip3 install django-simpleui
2.源码安装
- 克隆源码本地安装
git clone https://github.com/newpanjing/simpleui
cd simpleui
python setup.py sdist install
3.修改默认后台模板为simpleui
在settings.py文件中加入一行simpleui即可
INSTALLED_APPS = [
'simpleui',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
...
]
三、切换主题
1.默认主题
默认主题在settings.py中进行配置
# 指定simpleui默认的主题,指定一个文件名,相对路径就从simpleui的theme目录读取
SIMPLEUI_DEFAULT_THEME = 'admin.lte.css'
2.切换主题
目前simpleui 内置28个流行样式风格的主题。后续随着版本的更新,会加入更多的主题。
3.主题列表
取对应的file即可设置成默认主题
var SimpleuiThemes = [
{
text: "Default",
menu: 'rgb(48, 65, 86)',
logo: 'rgb(48, 65, 86)',
top: '#FFF'
},
{
text: "Simpleui-x",
menu: '#2c2e39',
logo: '#2c2e39',
top: '#FFF',
file: "simpleui.css"
},
{
text: "Element-UI",
file: "element.css",
top: '#447eff',
menu: '#FFf',
logo: '#FFF'
},
{
text: "layui",
file: "layui.css",
menu: '#393D49',
logo: '#23262E',
top: '#23262E'
}, {
text: "Ant Design Pro",
file: "ant.design.css",
menu: '#000b16',
logo: '#002140',
top: '#FFF'
}, {
text: "Admin LTE",
file: "admin.lte.css",
top: '#3c8dbc',
logo: '#3c8dbc',
menu: '#2b3539'
}, {
text: "Highdmin",
file: "highdmin.css",
top: '#02c0ce',
menu: '#e0e0e0',
logo: '#02c0ce'
}, {
text: "Aircraft",
file: "aircraft.css",
top: '-webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6f80a1)) !important',
menu: '#e0e0e0',
logo: '-webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6f80a1)) !important'
}, {
text: "Purple",
file: "purple.css",
top: '#FFF',
logo: '#FFF',
menu: '#3e4295'
}, {
text: "Gray",
file: "gray.css",
top: '#213a53',
logo: '#213a53',
menu: '#e0e0e0'
},
{
text: "Dark green",
file: "dark.green.css",
top: '#f3f3f4',
menu: '#283846',
logo: '#283846'
},
{
text: "Orange",
file: "orange.css",
top: 'linear-gradient(to right bottom, #da8342, #e45131)',
logo: 'linear-gradient(to right bottom, #da8342, #e45131)',
menu: '#FFF'
},
{
text: "Black",
file: "black.css",
top: "#333",
logo: "#333",
menu: '#FFF'
},
{
text: "Green",
file: "green.css",
top: '#19a97b',
logo: '#FFF',
menu: '#FFF'
},
{
text: "Light",
file: "light.css",
top: "#ebf1f5",
logo: "#ebf1f5",
menu: "#ebf1f5"
}, {
text: 'Enterprise blue',
file: 'e-blue.css',
top: '#3ba1df',
logo: '#3ba1df',
menu: '#FFF'
}, {
text: 'Enterprise blue pro',
file: 'e-blue-pro.css',
top: '#3ba1df',
logo: '#3ba1df',
menu: 'rgb(38, 50, 56)'
}, {
text: 'Enterprise green',
file: 'e-green.css',
top: '#27ad60',
logo: '#27ad60',
menu: '#FFF'
}, {
text: 'Enterprise green pro',
file: 'e-green-pro.css',
top: '#27ad60',
logo: '#27ad60',
menu: 'rgb(38, 50, 56)'
}, {
text: 'Enterprise red',
file: 'e-red.css',
top: '#c9333e',
logo: '#c9333e',
menu: '#FFF'
}, {
text: 'Enterprise red pro',
file: 'e-red-pro.css',
top: '#c9333e',
logo: '#c9333e',
menu: 'rgb(38, 50, 56)'
}, {
text: 'Enterprise purple',
file: 'e-purple.css',
top: '#8263b1',
logo: '#8263b1',
menu: '#FFF'
}, {
text: 'Enterprise purple pro',
file: 'e-purple-pro.css',
top: '#8263b1',
logo: '#8263b1',
menu: 'rgb(38, 50, 56)'
}, {
text: 'Enterprise black',
file: 'e-black.css',
top: '#1f2c39',
logo: '#1f2c39',
menu: '#FFF'
}, {
text: 'Enterprise black pro',
file: 'e-black-pro.css',
top: '#1f2c39',
logo: '#1f2c39',
menu: 'rgb(38, 50, 56)'
}, {
text: 'x-green',
file: 'x-green.css',
top: '#2F9688',
logo: '#2F9688',
menu: 'rgb(38, 50, 56)'
}, {
text: 'x-red',
file: 'x-red.css',
top: '#AA3130',
logo: 'rgb(38, 50, 56)',
menu: 'rgb(38, 50, 56)'
}, {
text: 'x-blue',
file: 'x-blue.css',
top: '#FFF',
logo: '#1E9FFF',
menu: 'rgb(38, 50, 56)'
}
]
4.自定义主题
在自定义主题之前,请先把simpleui的静态资源克隆到根目录。然后找到theme theme.js 就是用于配置主题列表
按该文件中的格式配置即可
var SimpleuiThemes = [
{
"text": "Default"
},
{
"text": "Simpleui-x",
"file": "simpleui.css"
},
.....
]
在增加你的样式之前,请先了解less如何使用。
这是admin.lte.less的例子
@import "base";
@primary: #2096c8 !important;
@color: white;
@menu-color: #8aa4af !important;
@menu-background: #2b3539 !important;
@menu-color-hover: #FFF;
@menu-background-hover: #1f272b;
@menu-title-color: #FFF;
@menu-title-background-color: #212c32;
@menu-title-color-hover: #FFF;
@menu-title-background-color-hover: #1f272b;
@navbar-color: #fff;
@navbar-background: #3c8dbc;
他将会编译为admin.lte.css 需要安装less
npm install less -g
lessc admin.lte.less>admin.lte.css
更多请参考官网 | 链接
四、创建超级用户
python manage.py createsuperuser
五、使用配置
后台站点配置
修改Admin LOGO图标
SIMPLEUI_LOGO = "图标路径"
自定义后台的名字、标题
admin.site.site_title="名字"
admin.site.site_header="名字"
admin.site.index_title="名字"