注册建设通网站,珠海市品牌网站建设公司,wordpress数据库重置,个人简介html代码模板好久不见#xff0c;各位it朋友们#xff01; 本篇文章我将向各位介绍Django框架中admin后台页面样式定制的一个插件库#xff0c;名为Simpleui。
一#xff09;简介
SimpleUI是一款简单易用的用户界面#xff08;UI#xff09;库#xff0c;旨在帮助开发人员快速构建…好久不见各位it朋友们 本篇文章我将向各位介绍Django框架中admin后台页面样式定制的一个插件库名为Simpleui。
一简介
SimpleUI是一款简单易用的用户界面UI库旨在帮助开发人员快速构建美观、直观的用户界面。它提供了一系列现代化的UI组件和布局工具可用于各种类型的应用程序包括Web应用、移动应用和桌面应用。 SimpleUI的设计理念是简洁、灵活和可定制的。它提供了丰富的预定义样式和布局选项同时也支持开发人员根据项目需求进行自定义样式和布局。这使得开发人员能够快速创建符合自己品牌标识和用户喜好的界面。 SimpleUI的特点之一是响应式设计。它的组件和布局工具可以根据不同的屏幕尺寸和设备类型自动适应从而确保应用程序在不同的终端上都能提供一致的用户体验。 SimpleUI还提供了丰富的交互功能包括各种类型的表单元素、弹出窗口、导航栏和菜单等。这些功能可以帮助开发人员快速实现用户输入、数据展示和导航等常见的交互需求。 此外SimpleUI还支持主题定制和国际化。开发人员可以根据自己的需求选择适合的主题样式或根据项目需要进行定制。同时SimpleUI还提供了多语言支持使得应用程序能够在不同的语言环境下运行。 总之SimpleUI是一款简单易用、灵活可定制的用户界面库它提供了丰富的UI组件和布局工具能够帮助开发人员快速构建美观、直观的用户界面。无论是Web应用、移动应用还是桌面应用SimpleUI都是一个理想的选择。
二安装与配置
1.安装
我们安装Simpleui其实跟我们安装python的其他库一样有两种方法
a系统控制代码台cmd
pip install django-simpleui安装后我们可以在pycharm软件中查询到此库
bpycharm直接安装 在pycharm中我们可以直接搜索simpleui去获取到这个库然后直接安装
2.配置
a在settings.py中的配置
我们需要在INSTALLED_APPS中将其载入
INSTALLED_APPS [simpleui, #请注意必须放在应用的第一个........
]我们可以自主选择simpleui的主题例如
# 设置默认主题指向主题css文件名。Admin Lte风格
SIMPLEUI_DEFAULT_THEME admin.lte.css# 设置默认主题指向主题css文件名。Element-ui风格
SIMPLEUI_DEFAULT_THEME element.css# 设置默认主题指向主题css文件名。layui风格
SIMPLEUI_DEFAULT_THEME layui.css# 设置默认主题指向主题css文件名。紫色风格
SIMPLEUI_DEFAULT_THEME purple.css当然有更多的主题供你选择我们可以在浏览器中打开然后选择自己喜欢的颜色等 当然使用simpleui它会在右侧给我们打个广告例如 我们可以手动将其关闭
# 隐藏右侧SimpleUI广告链接和使用分析
SIMPLEUI_HOME_INFO False
SIMPLEUI_ANALYSIS Falsesimpleui也支持我们自定义模块logo我们需要自己去配置
SIMPLEUI_CONFIG {# 是否使用系统默认菜单自定义菜单时建议关闭。system_keep: False,# 用于菜单排序和过滤, 不填此字段为默认排序和全部显示。空列表[] 为全部不显示.menu_display: [图书管理, 借阅管理,权限认证],# 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时刷新展示菜单内容。# 一般建议关闭。dynamic: False,menus: []}在这里menus的自定义选择有很多我举一个例子给大家
menus: [{app: auth,#定义appname: 权限认证,#展示名字icon: fas fa-user-shield,#图标#其中的功能models: [{name: 用户列表,#展示名字icon: fa fa-user,#图标url: auth/user/,#路径},{name: 用户组,#展示名字icon: fa fa-th-list,#图标url: auth/group/,#路径# 注意url按/admin/应用名小写/模型名小写/命名。这里的权限认证是admin模块自带所以可以写成auth/group},]
}我将其中的一部分定义选择列举给大家
字段说明name菜单名icon图标参考element-ui和fontawesome图标url链接地址绝对或者相对,如果存在models字段将忽略urlmodels子菜单自simpleui 2021.02.01版本 支持最多3级菜单使用方法可以看下方例子newTab浏览器新标签打开codename权限标识需要唯一
b收藏夹图标自定义
很多读者在这里应该会疑惑收藏夹图标在哪里 如何修改呢我们可以将从网上或者自己设计的图标放在项目的static目录中取名为favicon.ico 让其生效有两种方式 url方式
urlpatterns [path(favicon.ico, RedirectView.as_view(urlrstatic/favicon.ico)),
]html方式
link relshortcut icon href/favicon.ico/
#这种方式可能会失效或者没效果。大多是浏览器缓存造成的清理缓存即可。当然我个人比较推荐url方式更加的直接与稳定。
c登录页与首页logo自定义
我们需要在settings.py中加入如下的代码
SIMPLEUI_LOGOhttps://www.mldoo.com/static/assets/images/logo.png当然我们也可选择自己的本地图片
SIMPLEUI_LOGOstatic/assets/images/logo.png
#这里的logo.png是自己的本地图片名在simpleui中默认首页与登录页是一张图片但是也可自定义 首页Logo 我们先在项目中创建文件目录如下
templates/admin/index.html文件中写入
{% block logo %}div classlogo-wrap v-if!folddiv classfloat-wrapdiv classleftimg src{% static /admin/simplepro/images/logo.png %}#src可以写相对路径或者绝对路径site_header可以写网站名称/divdiv classleftspan{{ site_header }}/span/div/div/div
{% endblock %}登录页logo 我们先在项目中创建文件目录如下
templates/admin/login.html文件中写入的方式与首页logo一样
{% block logo %}div classbannerimg src{% static admin/simplepro/images/banner.png %}#src可以写相对路径或者绝对路径site_header可以写网站名称/div
{% endblock %}
