Django+boostrap 美化admin后台的操作

针对这个主题，我可以提供以下的完整攻略。

步骤一：安装和配置Django

首先，你需要安装 Django 并配置基本设置，这里提供一个示例：

在终端中通过 pip 安装 Django：pip install django。
创建一个新的 Django 项目：django-admin startproject myproject，其中 myproject 是你的项目名称，可以替换为任何你想要的名称。
配置 myproject 项目文件夹下的 settings.py 文件：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

步骤二：创建一个超级用户

创建一个超级用户，以便你可以登录到后台管理系统。使用以下命令在终端中创建：

python manage.py createsuperuser

按提示输入你的用户名、电子邮件地址和密码。

步骤三：启动后台管理系统

现在你可以启动 Django 后台管理系统，使用以下命令在终端中启动：

python manage.py runserver

然后打开浏览器，在地址栏中输入 http://127.0.0.1:8000/admin/，你就可以看到 Django 后台管理系统登录界面了。使用刚才创建的超级用户登录。

步骤四：安装 Bootstrap

以下是安装 Bootstrap 的步骤：

在终端中将 cd 到你的项目目录下，然后创建一个名为 static 的新文件夹：mkdir static。
进入到 static 文件夹，并使用以下命令安装 Bootstrap：npm install bootstrap。
在 myproject 项目文件夹下的 settings.py 文件中添加以下行：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

在你的 Django 项目文件夹下创建一个名为 staticfiles 的新文件夹，使用以下命令：

mkdir staticfiles

在终端中使用以下命令收集所有的静态文件到 staticfiles 文件夹下：

python manage.py collectstatic

步骤五：美化 Django 后台管理系统

接下来，我们将使用 Bootstrap 来美化 Django 后台管理系统。以下是两个示例说明。

示例一：美化登录页面

创建一个新文件夹，例如 templates，在 myproject 目录下。
在 templates 文件夹中创建一个名为 admin 的新文件夹。
在 admin 文件夹中创建一个名为 login.html 的新文件，用来替换 Django 后台管理系统的默认登录页面。
安装 django-widget-tweaks，该软件包允许你对 Django 表单进行优化。

pip install django-widget-tweaks

在 myproject 项目文件夹下的 settings.py 文件中添加以下行：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'widget_tweaks',
]

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

在 login.html 文件中使用以下代码来美化登录页面：

{% extends "admin/login.html" %}

{% load widget_tweaks %}

{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
{% endblock %}

{% block form_top %}
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">

{% endblock form_top %}

{% block form_bottom %}
        </div>
    </div>
</div>
{% endblock form_bottom %}

示例二：美化后台管理页面

使用以下步骤来美化后台管理页面：

创建一个新文件夹，例如 static，在 myproject 目录下。在 static 文件夹中创建以下文件夹结构：

.
|__ css/
|   |__ custom-admin.css
|   |__ bootstrap.min.css
|
|__ js/
|   |__ bootstrap.js
|   |__ jquery.min.js

将 bootstrap.min.css 和 jquery.min.js 复制到 static/css/ 和 static/js/ 文件夹中。
在 custom-admin.css 中添加你自己的样式。
在 myproject 项目文件夹下的 settings.py 文件中添加以下行：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

在 myproject 项目文件夹下的 urls.py 文件中添加以下行：

from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    # ... your existing URLs ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

在 myproject 项目文件夹下的 admin.py 文件中使用以下代码导入你的自定义样式和 JavaScript 文件：

from django.contrib import admin
from django.urls import reverse
from django.utils.html import format_html
from django.conf import settings
from django.templatetags.static import static

class MyAdminSite(admin.site.AdminSite):

    def each_context(self, request):
        context = super().each_context(request)
        context['bootstrap_css_url'] = static('css/bootstrap.min.css')
        context['my_styles_url'] = static('css/custom-admin.css')
        context['jquery_url'] = static('js/jquery.min.js')
        context['bootstrap_js_url'] = static('js/bootstrap.js')
        return context

admin_site = MyAdminSite()

在你的每一个 Django App 的 admin.py 文件中使用 MyAdminSite，而不是 admin.site。

结束语

这就是对如何使用 Django 和 Bootstrap 来美化 Django 后台管理系统的完整攻略。希望这些步骤和示例可以对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Django+boostrap 美化admin后台的操作 - Python技术站