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 %}
  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Django SimpleUI 是一个基于 Django 的后台管理系统框架,它提供了一些简单易用的页面定制功能,可以让开发者快速定制自己的后台管理页面。 要定制 Django SimpleUI页面,可以通过修改模板文件来实现。首先需要了解 SimpleUI 的模板结构和页面组成,然后根据自己的需求进行修改。 SimpleUI 的模板文件位于项目的 templates 目录下,其中包括了基础模板和各个页面的模板。可以通过修改这些模板文件来修改页面的布局、样式和功能。 除了修改模板文件,还可以通过自定义 SimpleUI 的组件来实现页面定制SimpleUI 提供了一些常用的组件,如表格、表单、图表等,但是如果需要更复杂的组件,可以通过自定义组件来实现。 总之,Django SimpleUI 提供了很多方便的页面定制功能,可以让开发者快速定制自己的后台管理页面,提高开发效率。 ### 回答2: Django SimpleUI 是一款基于 Python Django 框架开发的开源后台管理界面组件库,使用 SimpleUI 可以快速搭建出简洁美观的后台管理界面。在使用 SimpleUI 进行页面定制时,可以根据自己的需要进行定制化操作,达到更好的用户体验。 以下是 Django SimpleUI 页面定制的步骤: 1. 安装 SimpleUI 组件库 在 Django 项目中使用 SimpleUI 组件库,需要先安装 SimpleUI。可以通过 pip 命令进行安装: pip install django-simpleui 2. 配置 SimpleUI 组件库 安装完成后,在 Django 项目的 settings.py 文件中添加 SimpleUI 的配置信息: ```python INSTALLED_APPS = [ # ... 'django_simpleui', ] MIDDLEWARE = [ # ... 'django_simpleui.middleware.DjangoSimpleUiMiddleware', ] SIMPLEUI_HOME_INFO = False SIMPLEUI_DATETIME_FORMAT = "Y-m-d H:i:s" ``` 3. 使用 SimpleUI 提供的模板和静态资源 SimpleUI 提供了统一的模板和静态资源,在 Django 项目中可以直接引用,从而减少重复的开发工作。在 Django 项目中的 templates 文件夹中创建一个 simpleui 文件夹,在该文件夹下创建一个 base.html 文件,内容如下: ```html {% extends 'simpleui/base.html' %} {% load static %} {% block scripts %} <!-- 需要引用的第三方 JS 文件 --> <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script> <script src="{% static 'js/bootstrap.min.js' %}"></script> <!-- 需要引用的自定义 JS 文件 --> <script src="{% static 'js/custom.js' %}"></script> {% endblock %} ``` 在 Django 项目中的 static 文件夹下创建一个 simpleui 文件夹,在该文件夹下添加需要用到的 CSS、JS 等静态资源文件。 4. 创建 SimpleUI 页面定制文件 在 Django 项目中的 templates 文件夹下创建一个 simpleui 文件夹,然后在该文件夹下创建一个名为 app_index.html 的文件,用于对 SimpleUI 中的应用首页进行定制。在该文件中可以使用 SimpleUI 提供的模板标签和变量进行页面定制操作,示例代码如下: ```html {% extends 'simpleui/base.html' %} {% block content %} <div class="row"> <div class="col-md-12"> <div class="card"> <div class="card-header border-bottom-0"> <h3 class="card-title"><i class="fe fe-layout"></i> 自定义标题</h3> </div> <div class="card-body"> <!-- 卡片主体内容 --> </div> </div> </div> </div> {% endblock %} ``` 需要注意的是,在 app_index.html 中,可以使用一些 SimpleUI 提供的模板标签和变量来进行页面定制操作。例如,{% block content %} 和 {% endblock %} 之间的部分就是用于自定义应用首页的内容。 5. 启动 Django 开发服务器 配置完成后,需要在终端中启动 Django 开发服务器,然后在浏览器中访问 http://localhost:8000/admin 即可查看 SimpleUI 打造的后台管理系统,用户可以根据自己的需求进行页面定制,目的是为了达到良好的用户体验和页面美观程度。 总之,通过以上的步骤就可以在 Django 项目中使用 SimpleUI 进行页面定制,达到页面美观和良好用户体验的目的。简单易用的使用界面带来了极大的便利,不仅简化了开发流程,而且同时使得后端程序员快速处理一些烦琐的后台管理事宜,形成一个高效的工作流程。 ### 回答3: Django SimpleUI是一种基于Django框架和Bootstrap样式的开源后台管理页面定制模板。它提供了多种适用于不同需求的页面模板,可以快速地搭建后台管理页面,而且使用起来也非常简单。 Django SimpleUI页面定制主要包括以下几个方面: 1. 首先,需要在Django项目中安装Django SimpleUI的依赖库。这可以通过pip命令进行安装,命令如下:pip install django-simple-ui 2. 安装成功之后,在Django项目的settings.py中添加SimpleUI应用。可以在INSTALLED_APPS列表中添加'simpleui'即可。 3. 接着,在Django项目的urls.py文件中添加SimpleUI的路由配置。在urlpatterns列表中添加url(r'^simpleui/', include('simpleui.urls'))即可。 4. 配置完毕后,就可以在后台管理页面中使用SimpleUI的模板了。SimpleUI提供了多种页面模板,包括默认模板、空白模板、简单模板、卡片模板、表格模板等。用户可以根据项目需求选择相应的模板,并进行定制化配置。 5. 定制化配置主要包括:修改页面标题、Logo图标,更换页面背景、调整页面布局、增加自定义菜单和功能、修改表单和列表样式、添加JavaScript脚本等。这些配置可以通过修改Django SimpleUI的配置文件进行,具体可以参考Django SimpleUI的官方文档。 总之,Django SimpleUI是一种非常实用的后台管理页面定制模板,它提供了多种样式和配置选项,可以帮助开发者快速搭建优雅美观的后台管理页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我不是少爷.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值