如何修复 Django Web 应用程序为管理站点显示错误的 CSS 布局

Question

我正在开发一个 Django Web 应用程序。如果我尝试访问管理站点，则会出现一个用于选择主题颜色的新按钮。该按钮无法正确显示。这是截图：

我没有添加任何有关管理主题的第三方插件，我不知道您需要哪部分代码来调查问题。在这里你可以找到我的python虚拟环境的已安装包：

asgiref==3.6.0
autopep8==2.0.2
beautifulsoup4==4.11.1
black==23.3.0
certifi==2022.12.7 
charset-normalizer==3.1.0
click==8.1.3
colorama==0.4.6
defusedxml==0.7.1
diff-match-patch==20200713
Django==4.2
django-address==0.2.8
django-crispy-forms==1.14.0
django-filter==22.1
django-import-export==3.0.2
et-xmlfile==1.1.0
idna==3.4
MarkupPy==1.14 
mypy-extensions==1.0.0
numpy==1.23.5
odfpy==1.4.1
openpyxl==3.0.10
packaging==23.1
pandas==1.5.1
pathspec==0.11.1
platformdirs==3.5.0
psycopg2==2.9.5
psycopg2-binary==2.9.5
pycodestyle==2.10.0
PySimpleGUI==4.60.4
python-dateutil==2.8.2 
python-decouple==3.8
pytz==2022.6
PyYAML==6.0
requests==2.29.0
scipy==1.9.3
six==1.16.0
soupsieve==2.3.2.post1
sqlparse==0.4.3
tablib==3.3.0
tzdata==2022.6
urllib3==1.26.15
xlrd==2.0.1
XlsxWriter==3.1.0
xlwt==1.3.0

在这里你可以找到我的settings.py，没有敏感数据：

    """
Django settings for warehouseproject project.

Generated by 'django-admin startproject' using Django 4.1.3.

For more information on this file, see
https://docs.djangoproject.com/en/4.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.1/ref/settings/
"""

from pathlib import Path
import os

from django.urls import reverse_lazy
from decouple import config, AutoConfig
from django.contrib.messages import constants as messages

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


config = AutoConfig(search_path=".env")
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config("SECRET_KEY")

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True


ALLOWED_HOSTS = ["localhost", "127.0.0.1"]


# Application definition

INSTALLED_APPS = [
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "warehouse_app.apps.WarehouseAppConfig",
    "django.contrib.admin",
    "crispy_forms",
    "django_filters",
    "import_export",
]

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"

CRISPY_TEMPLATE_PACK = "bootstrap4"

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "warehouseproject.urls"

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",
            ],
        },
    },
]

WSGI_APPLICATION = "warehouseproject.wsgi.application"


MESSAGE_TAGS = {
    messages.ERROR: 'danger',
}


# Password validation
# https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
    },
    {
        "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
    },
]

# Internationalization
# https://docs.djangoproject.com/en/4.1/topics/i18n/

LANGUAGE_CODE = "it-it"

TIME_ZONE = "UTC"

USE_I18N = True
USE_L10N = False

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/


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


STATIC_URL = '/static/'

STATICFILES_DIRS = ('static',)

# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

# CSRF_COOKIE_DOMAIN = None

LOGIN_URL = "/accounts/login/"

LOGIN_REDIRECT_URL = reverse_lazy("device_list")
DATE_INPUT_FORMATS = ["%d/%m/%Y", "%d-%m-%Y", "%Y-%m-%d"]

DATETIME_INPUT_FORMATS = ["%d/%m/%Y %H:%M:%S", "%d-%m-%Y %H:%M:%S", "%Y-%m-%d %H:%M:%S"]

在这里，您可以找到当我尝试访问 /admin 页面时 Visual Studio Code 终端的输出：

[02/Jun/2023 16:34:14] "GET /admin HTTP/1.1" 301 0
[02/Jun/2023 16:34:14] "GET /admin/ HTTP/1.1" 302 0
[02/Jun/2023 16:34:14] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4079
[02/Jun/2023 16:34:14] "GET /static/admin/css/base.css HTTP/1.1" 200 20344
[02/Jun/2023 16:34:14] "GET /static/admin/css/nav_sidebar.css HTTP/1.1" 200 2619
[02/Jun/2023 16:34:14] "GET /static/admin/css/login.css HTTP/1.1" 200 958
[02/Jun/2023 16:34:14] "GET /static/admin/css/responsive.css HTTP/1.1" 200 18854
[02/Jun/2023 16:34:14] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
[02/Jun/2023 16:34:14] "GET /static/admin/js/nav_sidebar.js HTTP/1.1" 200 3763
[02/Jun/2023 16:34:14] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 85876
[02/Jun/2023 16:34:14] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 85692
[02/Jun/2023 16:35:35] "GET /admin/ HTTP/1.1" 302 0
[02/Jun/2023 16:35:35] "GET /admin/login/?next=/admin/ HTTP/1.1" 200 4079

你能帮我吗？

谢谢你。

Answer 1

如果您的 Django 管理站点看起来扭曲，这通常意味着静态文件未正确提供。 Django 管理界面依赖 CSS 进行样式设置，如果 CSS 文件加载不正确，页面会出现扭曲。

首先要确保您已在设置文件 (

DEBUG = True

) 中设置了

settings.py

。当

DEBUG

为

True

时，Django 将自动提供管理站点所需的静态文件，例如 CSS 和 JavaScript。

但是，如果

DEBUG

是

False

或者您处于生产环境中，则需要配置服务器以提供静态文件，因为 Django 不会自动执行此操作。

当 DEBUG 设置为 False 时，Django 将不会自动提供静态文件。您必须设置为自己服务的静态文件。

在生产环境中，最好的做法是使用 Nginx 等专用 Web 服务器或 Amazon S3 等云服务来提供静态文件。

Answer 2

跑步

python manage.py collectstatic

对我有用。