Django+boostrap 美化admin后台的操作-猿码集

1. 简介

在开发Web应用程序时，一个美观的后台管理界面非常重要。Django内置了一个名为admin的后台管理系统，它提供了一种快速有效地管理和维护数据库的方式。然而，默认的Django admin界面在外观上可能不够吸引人，因此我们可以通过使用Bootstrap框架来美化它。

2. Django和Bootstrap

在开始之前，我们需要先了解一下Django和Bootstrap。

2.1 Django

Django是一个功能强大的Python Web框架，它有着简洁、高效的设计理念，提供了一套完整的开发工具和框架，能够帮助开发者快速构建高质量的Web应用程序。

2.2 Bootstrap

Bootstrap是一个流行的HTML、CSS和JavaScript开发框架，它提供了丰富的组件和样式，使得我们可以快速创建现代化的响应式Web界面。Bootstrap的设计哲学是"Mobile First"，即首先为移动设备进行设计，然后逐步适配到更大的屏幕。

3. 安装和配置

在开始美化admin后台之前，我们需要先安装和配置Django和Bootstrap。

3.1 安装Django

首先，确保你的系统中已经安装了Python，并且使用pip可以正常安装包。然后，在命令行中执行以下命令来安装Django：

pip install django

3.2 创建Django项目

接下来，我们需要创建一个Django项目。在命令行中执行以下命令：

django-admin startproject myproject

这将创建一个名为myproject的Django项目。

3.3 配置Bootstrap

为了使用Bootstrap，我们可以通过以下两种方式来配置：

3.3.1 下载Bootstrap文件

首先，从Bootstrap官方网站下载Bootstrap的压缩包，并将其解压到项目的静态文件目录下。例如，将解压后的文件放置在myproject/static/bootstrap目录下。

3.3.2 使用CDN链接

另一种方式是使用Bootstrap的CDN链接。在项目的HTML模板中，可以添加以下内容：


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>

4. 美化Django admin后台

现在，我们已经完成了Django和Bootstrap的安装和配置，接下来让我们开始美化admin后台。

4.1 自定义admin界面

首先，我们需要创建一个新的Django app来定制admin界面。在命令行中执行以下命令：

python manage.py startapp myadmin

然后，在myadmin目录下创建一个名为"admin.py"的文件，并添加以下内容：


from django.contrib import admin
from django.contrib.admin import AdminSite
from . import models
class MyAdminSite(AdminSite):
    site_header = 'My Custom Admin'
admin_site = MyAdminSite(name='myadmin')
admin.site = admin_site
admin.site.register(models.YourModel)

在这个示例中，我们创建了一个新的AdminSite类，并通过设置site_header属性来自定义admin界面的标题。然后，将定义的admin_site对象赋值给admin.site，以替代默认的admin界面。

4.2 修改admin模板

接下来，我们需要修改admin模板，以应用Bootstrap样式。首先，在项目的settings.py文件中添加以下配置：


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            os.path.join(BASE_DIR, 'myadmin/templates'),
        ],
    },
]

然后，在myadmin目录下创建一个名为"templates"的目录，并在该目录下创建一个名为"admin"的子目录。然后，从Django的安装目录下复制"admin"目录，将其粘贴到myadmin/templates/admin目录下。

接下来，在myadmin/templates/admin目录下创建一个名为"base_site.html"的文件，并添加以下内容：


{% extends "admin/base.html" %}
{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}
{% block branding %}
{{ site_header }}

{% endblock %}
{% block nav-global %}{{ block.super }}{% endblock %}
{% block coltype %}colMS{% endblock %}

在这个示例中，我们继承了默认的admin/base.html模板，并在其中添加了我们自定义的site_header。然后，我们通过修改nav-global和coltype块来调整布局。

5. 运行和测试

完成以上步骤后，我们可以启动服务器并测试admin界面的美化效果。

python manage.py runserver

然后，在浏览器中访问http://localhost:8000/admin/，你应该能够看到美化后的admin界面。

6. 总结

通过使用Bootstrap和定制Django admin界面，我们可以轻松地美化admin后台，提升用户体验。本文简单介绍了Django和Bootstrap的基本概念，以及如何安装和配置它们。然后，我们通过定制admin界面和修改admin模板，实现了admin后台的美化。希望本文对你有所帮助。

Django+boostrap 美化admin后台的操作