django美化后台django-suit的安装配置操作

下面我将为您详细讲解如何使用django-suit美化django后台管理界面：

安装django-suit

1. 安装django-suit

pip install django-suit

1. 将django-suit添加到INSTALLED_APPS中：

python
INSTALLED_APPS = [
# ...
'suit',
# ...
]

1. 在settings.py文件最后添加一下内容：

```python
# Django Suit configuration example
# https://djangosuit.com/

SUIT_CONFIG = {
# header
'ADMIN_NAME': 'Django Suit',
'HEADER_DATE_FORMAT': 'l, jS F Y',
'HEADER_TIME_FORMAT': 'H:i',

   # forms
   'SHOW_REQUIRED_ASTERISK': True,
   'CONFIRM_UNSAVED_CHANGES': True,

   # menu
   'SEARCH_URL': '',
   'MENU_OPEN_FIRST_CHILD': True,  # Default True
   'MENU': (
       {'app': 'auth', 'icon':'icon-lock', 'models': ('user', 'group')},
       {'label': 'Settings', 'icon':'icon-cog', 'models': ('auth.user', 'auth.group')},
       {'label': 'Support', 'icon':'icon-question-sign', 'url': '/support/'},
   ),

   # misc
   'LIST_PER_PAGE': 15

}
```

示例一：自定义页面样式

1. 在myapp（或其他app）中新建static文件夹，在其中新建css和img文件夹。

bash
mkdir /path/to/myapp/static/
cd /path/to/myapp/static/
mkdir css img

1. 将自定义的样式文件添加到css文件夹中，并在settings.py中进行配置：

python
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'myapp', 'static'),
)

1. 修改base.html模板文件，添加自定义的CSS文件：

```html
{% extends "admin/base.html" %}

{% block extrastyle %}
{{ block.super }} {% endblock %}
```

1. 打开my-custom-style.css文件，添加一些自定义的CSS样式：

```css
/ change the background color of the navigation bar /
.suit .nav-header {
background-color: #444;
}

/ change the font size and color of the page title /
.suit .breadcrumbs {
font-size: 16px;
color: #999;
}

/ change the background color of the action buttons /
.suit .submit-row input[type=submit] {
background-color: #444;
}
```

1. 运行django应用：

bash
python manage.py runserver

1. 打开后台管理界面，查看效果。

示例二：自定义模型

1. 在models.py中添加自定义的模型：

```python
class CustomModel(models.Model):
name = models.CharField(max_length=100)

   def __str__(self):
       return self.name

```

1. 在admin.py中添加自定义的模型管理器：

```python
from suit.admin import SortableModelAdmin

class CustomModelAdmin(SortableModelAdmin):
list_display = ('name',)

admin.site.register(CustomModel, CustomModelAdmin)
```

1. 打开后台管理界面，查看自定义模型的效果。