如何修改Django默认登录页面的标题与CSS样式？技术问询

嘿，这个需求太常见了！完全不用去动Django的默认源码（千万别这么做，升级就没了），用Django自带的扩展机制就能轻松搞定，分两步说：

一、把“Django administration”改成“MyProject administration” #

有两种方案，看你要的灵活度：

方案1：一行配置搞定（最简单） #

直接在项目的settings.py里添加一行配置：

ADMIN_SITE_HEADER = "MyProject administration"

这个配置会同时替换登录页和后台管理首页的标题，一步到位，适合大多数场景。

方案2：自定义登录模板（更灵活） #

如果只想改登录页的标题，不想影响后台首页，那就自己写登录模板：

1. 在项目根目录下创建templates/registration文件夹（Django默认会优先找这个路径的登录模板）
2. 复制Django默认登录模板的内容到你刚创建的templates/registration/login.html里（不用去源码里扒，直接用下面这段就行）：

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/login.css" %}">{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}
{% block nav-global %}{% endblock %}
{% block content_title %}{% endblock %}
{% block breadcrumbs %}{% endblock %}

{% block content %}
{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
</p>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}

<div id="content-main">

{% if user.is_authenticated %}
<p class="errornote">
{% blocktrans trimmed %}
    You are authenticated as {{ username }}, but are not authorized to
    access this page. Would you like to login to a different account?
{% endblocktrans %}
</p>
{% endif %}

<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
  </div>
  {% endif %}
  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="{% trans 'Log in' %}">
  </div>
</form>

</div>
{% endblock %}

3. 在这个模板里添加一个branding块，替换默认标题：

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">MyProject administration</a></h1>
{% endblock %}

这样就只会替换登录页的标题，不影响后台首页。

二、微调CSS颜色 #

同样，绝对不要改Django自带的CSS文件，正确做法是覆盖样式：

方法1：在自定义登录模板里引入自定义CSS #

在刚才的login.html里，找到{% block extrastyle %}块，改成：

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/custom_login.css' %}">
{% endblock %}

然后在项目的static/css文件夹下创建custom_login.css，写你要修改的样式，比如：

/* 修改登录页面的背景色 */
body.login {
    background-color: #f0f7ff;
}

/* 修改登录按钮的颜色 */
.submit-row input[type="submit"] {
    background-color: #165dff;
    border-color: #165dff;
}

/* 修改输入框聚焦时的边框颜色 */
input:focus {
    border-color: #165dff;
    box-shadow: 0 0 0 1px #165dff;
}

记得要确保settings.py里的静态文件配置正确（STATIC_URL和STATICFILES_DIRS）。

方法2：自定义Admin站点（适合全局改Admin样式） #

如果想同时改后台和登录页的CSS，可以创建自定义Admin站点：

1. 在admin.py里定义自己的AdminSite类：

from django.contrib.admin import AdminSite

class MyAdminSite(AdminSite):
    site_header = "MyProject administration"
    extra_css = ['css/custom_admin.css']  # 引入自定义CSS

# 实例化自定义站点
admin_site = MyAdminSite(name='myadmin')
# 把你的模型注册到这个站点，比如：admin_site.register(YourModel)

2. 在urls.py里替换默认的admin路由：

from .admin import admin_site

urlpatterns = [
    # path('admin/', admin.site.urls), 注释掉原来的默认路由
    path('admin/', admin_site.urls),
]

然后在static/css/custom_admin.css里写全局覆盖的样式即可。

关键提醒 #

绝对不要直接修改Django安装目录下的任何文件（比如django/contrib/admin/templates或django/contrib/admin/static里的内容），因为下次升级Django时，这些文件会被新版本替换，你的所有修改都会丢失。一定要用Django提供的模板覆盖、静态文件覆盖或者自定义站点的方式来做。

内容的提问来源于stack exchange，提问作者hackerman