Django之admin页面样式定制(Simpleui)

好久不见,各位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软件中查询到此库

b)pycharm直接安装

image.png
在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'

当然,有更多的主题供你选择,我们可以在浏览器中打开然后选择自己喜欢的颜色等:
image.png
当然,使用simpleui,它会在右侧给我们打个广告,例如:
image.png
我们可以手动将其关闭:

# 隐藏右侧SimpleUI广告链接和使用分析
SIMPLEUI_HOME_INFO = False
SIMPLEUI_ANALYSIS = False

simpleui也支持我们自定义模块logo,我们需要自己去配置:

SIMPLEUI_CONFIG = {# 是否使用系统默认菜单,自定义菜单时建议关闭。'system_keep': False,# 用于菜单排序和过滤, 不填此字段为默认排序和全部显示。空列表[] 为全部不显示.'menu_display': ['图书管理', '借阅管理','权限认证'],# 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时刷新展示菜单内容。# 一般建议关闭。'dynamic': False,'menus': []}

在这里menus的自定义选择有很多,我举一个例子给大家:

'menus': [{'app': 'auth',#定义app'name': '权限认证',#展示名字'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字段,将忽略url
models子菜单,自simpleui 2021.02.01+版本 支持最多3级菜单,使用方法可以看下方例子
newTab浏览器新标签打开
codename权限标识,需要唯一

b)收藏夹图标自定义

很多读者在这里应该会疑惑收藏夹图标在哪里?
image.png
如何修改呢?我们可以将从网上或者自己设计的图标放在项目的static目录中,取名为:favicon.ico
让其生效有两种方式:
url方式:

urlpatterns = [path('favicon.ico', RedirectView.as_view(url=r'static/favicon.ico')),
]

html方式:

<link rel="shortcut icon" href="/favicon.ico"/>
#这种方式可能会失效,或者没效果。大多是浏览器缓存造成的,清理缓存即可。

当然,我个人比较推荐url方式,更加的直接与稳定。

c)登录页与首页logo自定义

我们需要在settings.py中加入如下的代码:

SIMPLEUI_LOGO='https://www.mldoo.com/static/assets/images/logo.png'

当然我们也可选择自己的本地图片:

SIMPLEUI_LOGO='static/assets/images/logo.png'
#这里的logo.png是自己的本地图片名

在simpleui中默认首页与登录页是一张图片,但是也可自定义:
首页Logo:
我们先在项目中创建文件,目录如下:

templates/admin/index.html

文件中写入:

{% block logo %}<div class="logo-wrap" v-if="!fold"><div class="float-wrap"><div class="left"><img src="{% static '/admin/simplepro/images/logo.png' %}">#src可以写相对路径或者绝对路径,site_header可以写网站名称</div><div class="left"><span>{{ site_header }}</span></div></div></div>
{% endblock %}

登录页logo:
我们先在项目中创建文件,目录如下:

templates/admin/login.html

文件中写入的方式与首页logo一样:

{% block logo %}<div class="banner"><img src="{% static 'admin/simplepro/images/banner.png' %}">#src可以写相对路径或者绝对路径,site_header可以写网站名称</div>
{% endblock %}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172350.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

清华提出 SoRA,参数量只有 LoRA 的 70%,表现更好!

现在有很多关于大型语言模型&#xff08;LLM&#xff09;的研究&#xff0c;都围绕着如何高效微调展开。微调是利用模型在大规模通用数据上学到的知识&#xff0c;通过有针对性的小规模下游任务数据&#xff0c;使模型更好地适应具体任务的训练方法。 在先前的工作中&#xff…

基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码

基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于驾驶训练算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于驾驶训练优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

Robots 元标签与 X-Robots 标签

Robots Meta Tag 和 X-Robots-Tag 是两个常用的 HTML 标签&#xff0c;它们对观察机动爬虫和其他网络机器人很有启发性。这些标签可以控制您的网页如何被记录和显示。 什么是机器人元标记&#xff1f; 机器人元标记是一个 HTML 标签&#xff0c;它提供信息来查看电机爬虫和其…

Figma 插件学习(二)- 常用属性和方法

一. 如何调试figma插件 Plugins > Development > Show/Hide console 打开控制台即可开始调试 二.节点类型 根据不同的节点类型&#xff0c;也是会有不同的方法和属性&#xff0c;介绍几个常用节点类型 1.FrameNode 框架节点是用于定义布局层次结构的容器。它类似于HTM…

GWAS:plink进行meta分析

之前教程提到过Metal是可以做Meta分析&#xff0c;除了Metal&#xff0c;PLINK也可以进行Meta分析。 命令如下所示&#xff1a; plink --meta-analysis gwas1.plink gwas2.plink gwas3.plink logscale qt --meta-analysis-snp-field SNP --meta-analysis-chr-field CHR --me…

BrokerChain

BrokerChain: A Cross-Shard Blockchain Protocol for Account/Balance-based State Sharding 我总感觉这篇文章不完整&#xff0c;缺少一些东西。或者说有些地方并没有详细说。比如状态图的构建&#xff0c;网络重分片的的配置过程。都直接忽略了。 Motivation 1 跨片交易不…

流程图是什么,用什么软件做?

在工作流程中&#xff0c;经常会遇到需要图形化呈现整个流程的情况。流程图就是一种一目了然的图形化表现方式&#xff0c;便于人们理解、沟通和管理整个流程。 1.Visio Visio是一款微软公司的图表软件&#xff0c;可以用于创建各种类型的流程图、组织结构图、网络图、平面图…

编译原理词法分析器

算法描述 对于给出的源代码&#xff0c;我们按行将其读入&#xff0c;对于每一行单独进行词法分析。 过滤行前后空格对字符串进行词语的分割 有空格则把空格前的字符归为一个词比较上一个字符和当前字符是否需要进行分割 检查词语是否合法词语合法则按 [待测代码中的单词符号…

常见树种(贵州省):019滇白珠、杜茎山、苍山越桔、黄背越桔、贵州毛柃、半齿柃、钝叶柃、细枝柃、细齿叶柃木、土蜜树、山矾、胡颓子、檵木

摘要&#xff1a;本专栏树种介绍图片来源于PPBC中国植物图像库&#xff08;下附网址&#xff09;&#xff0c;本文整理仅做交流学习使用&#xff0c;同时便于查找&#xff0c;如有侵权请联系删除。 图片网址&#xff1a;PPBC中国植物图像库——最大的植物分类图片库 一、滇白珠…

【Leetcode】【实现循环队列】【数据结构】

代码实现&#xff1a; typedef struct {int front;int back;int k;int* a;} MyCircularQueue;bool myCircularQueueIsEmpty(MyCircularQueue* obj) {return obj->frontobj->back; }bool myCircularQueueIsFull(MyCircularQueue* obj) {return (obj->back1)%(obj->…

【数据中台】开源项目(2)-Wormhole流式处理平台

Wormhole 是一个一站式流式处理云平台解决方案&#xff08;SPaaS - Stream Processing as a Service&#xff09;。 Wormhole 面向大数据流式处理项目的开发管理运维人员&#xff0c;致力于提供统一抽象的概念体系&#xff0c;直观可视化的操作界面&#xff0c;简单流畅的配置管…

GEE 22:基于GEE实现物种分布模型(更新中。。。。。。)

物种分布模型 1. 数据点准备1.1 数据加载1.2 去除指定距离内的重复点1.3 定义研究区范围1.4 选择预测因子1.5 伪不存在点生成 1. 数据点准备 1.1 数据加载 首先需要将CSV文件导入到GEE平台中&#xff0c;同样也可以导入shp格式文件。 // 1.Loading and cleaning your species …

P17C++析构函数

目录 前言 01 什么是析构函数 1.1 举个栗子 02 为什么要写析构函数 前言 今天我们要讨论一下它的“孪生兄弟”&#xff0c;析构函数&#xff0c;它们在某些方面非常相似。 与构造函数相反&#xff0c;当对象结束其生命周期&#xff0c;如对象所在的函数已调用完毕时&…

如何深刻理解从二项式分布到泊松分布

泊松镇贴 二项分布和泊松分布的表达式 二项分布&#xff1a; P ( x k ) C n k p k ( 1 − p ) n − k P(xk) C_n^kp^k(1-p)^{n-k} P(xk)Cnk​pk(1−p)n−k 泊松分布&#xff1a; P ( x k ) λ k k ! e − λ P(xk) \frac{\lambda^k}{k!}e^{-\lambda} P(xk)k!λk​e−…

坚鹏:中国工商银行数字化背景下银行公司业务如何快速转型培训

中国工商银行作为全球最大的银行&#xff0c;资产规模超过40万亿元&#xff0c;最近几年围绕“数字生态、数字资产、数字技术、数字基建、数字基因”五维布局&#xff0c;深入推进数字化转型&#xff0c;加快形成体系化、生态化实施路径&#xff0c;促进科技与业务加速融合&…

【JMeter】不同场景下的接口请求

场景1: 上传文件接口即Content-Type=multipart/form-data 步骤: 1. 接口url,method以及path正常填写 2.文件上传content-type是multipart/form-data,所以可以勾选【use multipart/form-data】,如果还有其他请求头信息可以添加一个请求头元件 3.请求参…

痤疮分类-yolov5 学习过程

1、在github上下载yolov5-5.0的源码。 GitHub - ultralytics/yolov5: YOLOv5 &#x1f680; in PyTorch > ONNX > CoreML > TFLite

【数据中台】开源项目(2)-Dbus系统架构

大体来说&#xff0c;Dbus支持两类数据源&#xff1a; RDBMS数据源 日志类数据源 1 RMDBMS类数据源的实现 以mysql为例子. 分为三个部分&#xff1a; 日志抽取模块(最新版DBus已经废弃该模块&#xff0c;使用canal直接输出到kafka) 增量转换模块 全量拉取模块 1.1 日志抽…

【JavaEE初阶】线程安全问题及解决方法

目录 一、多线程带来的风险-线程安全 1、观察线程不安全 2、线程安全的概念 3、线程不安全的原因 4、解决之前的线程不安全问题 5、synchronized 关键字 - 监视器锁 monitor lock 5.1 synchronized 的特性 5.2 synchronized 使用示例 5.3 Java 标准库中的线程安全类…

【Spring Boot】如何集成Swagger

Swagger简单介绍 Swagger是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化RESTful风格的Web服务。功能主要包含以下几点&#xff1a; 可以使前后端分离开发更加方便&#xff0c;有利于团队协作接口文档可以在线自动生成&#xff0c;有利于降低后端开发人员编写…