Pretty Django Dashboard with SimpleUI

Many people have a love-hate relationship with Django's built-in admin system. The advantage is that a few lines of code configuration can create a functional admin system but the disadvantage is that it is not beautiful and makes users feel unhandy. Among all the Django backend beautification plug-ins, SimpleUI is in the first camp, which is very in line with the aesthetics of Chinese developers. This tutorial will guide you how to configure and use Simple UI step by step.

Installation

The first step is to install pip and add INSTALLED_APPS

pip install django-simpleui

Modify settings.py, add simpleui to INSTALLED_APPS, and put it on the first line, which is in front of django's build-in admin.

INSTALLED_APPS = [
      'simpleui', # <---- HERE
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      ...     
]

The second step is to test whether the installation is successful Use the python manage.py runserver command to start the local test server, visit /admin/, if you can see the following page, the installation is successful.

After logging in, you will also see the following user interface:

Note: If you use SimpleUI in the production environment, you also need to use the python manage.py collectstatic command to collect static files, otherwise the styles cannot be displayed normally.

Common configuration

Set language, change Logo or customize admin name

When you see the above interface, the first thing you want to change must be the language, remove the default logo of SimpleUI, and customize your own Django administration name.

Modify settings.py, add the following code:

LANGUAGE_CODE = 'en'

# replace default Logo image
SIMPLEUI_LOGO = 'https://image_link'

Changing the name and title of the admin is a little more complicated since you can't configure it in settings.py. Create a new admin.py in any app directory, and add the following code to modify it (the app name in this example is tasks). This setting belongs to the setting of Django, not the setting of SimpleUI.

# tasks/admin.py
from django.contrib import admin

admin.site.site_header = 'JW Admin'  # set header
admin.site.site_title = 'JW Admin'   # set title
admin.site.index_title = 'JW Admin'

from .models import Task
admin.site.register(Task)

The effect after login is as follows:

Now you can see that the language, logo and admin name have all been changed. In the actual Django project development, we will also use the third-party application app and the model provided by the third-party app. We can also change the third-party app or model and the verbose_name or label of the model field by patching, and modify it to your own language. As follows:

from third_package.models import ModelA

ModelA._meta.verbose_name = ''
ModelA._meta.verbose_name_plural = ''
ModelA._meta.get_field('first_name').verbose_name = 'Your Language'

Close the side ad link and use analysis panel

Modify settings.py, add the following two lines of code:

SIMPLEUI_HOME_INFO = False 
SIMPLEUI_ANALYSIS = False 

In fact, the shortcut operations and recent actions on the homepage can also be turned off, which we will talk about in the section on customizing the homepage.

Change theme

The default theme of SimpleUI is dark blue, and it supports a variety of themes such as Element-ui, Admin LTE and Layui. You can change the theme through the drop-down menu in the upper right corner, or set the default theme in settings.py, as follows:

SIMPLEUI_DEFAULT_THEME = 'admin.lte.css'
SIMPLEUI_DEFAULT_THEME = 'element.css'
SIMPLEUI_DEFAULT_THEME = 'layui.css'
SIMPLEUI_DEFAULT_THEME = 'purple.css'

Customize menu

The collapsible menu on the left is the default menu of the Simple UI system, which is automatically generated according to the registered applications and models. The parent menu is the name of the App, and the submenu is generally the name of each model of the App to which it belongs. SimpleUI will even automatically assign default icons for you. For example, the tasks application in this example uses font-awsome's fa fa-tasks. In most cases, the default menu of the Simple UI system cannot meet the needs, then you need to customize the menu, such as adding new options or assigning new icons to menu options.

Modify settings.py, add the following code:

SIMPLEUI_CONFIG = {
     # 是否使用系统默认菜单。
    'system_keep': False,

     # 用于菜单排序和过滤, 不填此字段为默认排序和全部显示。 空列表[] 为全部不显示.
    'menu_display': ['任务管理', '权限认证'],

    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时刷新展示菜单内容。
    # 一般建议关闭。
    'dynamic': False,
    'menus': [
        {
            'app': 'auth',
            'name': '权限认证',
            'icon': 'fas fa-user-shield',
            'models': [
                {
                'name': '用户列表',
                'icon': 'fa fa-user',
                'url': 'auth/user/'
                },
                {
                    'name': '用户组',
                    'icon': 'fa fa-th-list',
                    'url': 'auth/group/'
                }
            ]
        },

        {
            'name': '任务管理',
            'icon': 'fa fa-th-list',
            'models': [
                {
                'name': '任务列表',
                # 注意url按'/admin/应用名小写/模型名小写/'命名。  
                'url': '/admin/tasks/task/',
                'icon': 'fa fa-tasks'
                },
            ]
        },
    ]
}

Of course, there are also advantages to using the SimpleUI system menu, such as what menu the user has the permissions of the model to display. The menu output in custom menus will not be controlled by permissions. Do not pass SIMPLEUI_CONFIG to customize menus if you want to use RBAC-based menus in the background. If you don't like it, the system's default menu icon only needs to be defined by SIMPLEUI_ICON, as follows:

SIMPLEUI_ICON = {
    '任务管理': 'fas fa-tasks',
    '任务': 'fas fa-th-list',
}