如何修改Django管理后台‘Webseite anzeigen’按钮的链接与样式

一、修改跳转链接 #

有两种常用方法，按需选择：

方法1：自定义AdminSite类（推荐，符合Django规范） #

1. 在项目的admin.py中定义自己的AdminSite子类，覆盖site_url属性：

from django.contrib.admin import AdminSite

class CustomAdminSite(AdminSite):
    # 替换为你的前端网站实际URL，支持相对路径或完整域名
    site_url = "/frontend/"

# 实例化自定义AdminSite
custom_admin_site = CustomAdminSite(name='custom_admin')

2. 将所有原本注册到默认admin.site的模型，改为注册到custom_admin_site：

# 示例：替换原有的 admin.site.register(YourModel)
from .models import YourModel
custom_admin_site.register(YourModel)

3. 在项目的urls.py中替换默认的admin路由：

from .admin import custom_admin_site

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

方法2：覆盖Admin模板文件 #

1. 在项目的templates目录下创建admin/base_site.html（不存在则新建），继承原模板并修改按钮链接：

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

{% block nav-global %}
  {% if site_url %}
  <!-- 替换href属性为你的前端URL -->
  <a href="https://your-frontend.com" class="django-admin-site-url" target="_blank">
    {{ site_url_text }}
  </a>
  {% endif %}
{% endblock %}

二、调整按钮样式 #

方法1：添加自定义CSS文件（长期维护推荐） #

1. 在项目的static/css目录下创建custom_admin.css，写入样式规则：

/* 针对按钮的默认类django-admin-site-url */
.django-admin-site-url {
    font-size: 1.2rem; /* 增大字号 */
    color: #e74c3c; /* 更改颜色为红色示例 */
    font-weight: 600; /* 可选：加粗 */
    margin-left: 8px; /* 可选：调整间距 */
}

2. 在自定义的CustomAdminSite类中添加each_context方法，引入该CSS：

class CustomAdminSite(AdminSite):
    site_url = "/frontend/"

    def each_context(self, request):
        context = super().each_context(request)
        # 加入自定义CSS路径
        context['extra_css'] = ['css/custom_admin.css']
        return context

方法2：内联样式（快速测试用） #

直接在覆盖的admin/base_site.html中添加内联样式：

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

{% block nav-global %}
  {% if site_url %}
  <a href="https://your-frontend.com" class="django-admin-site-url" target="_blank">
    {{ site_url_text }}
  </a>
  <style>
    .django-admin-site-url {
        font-size: 1.2rem;
        color: #27ae60;
        font-weight: bold;
    }
  </style>
  {% endif %}
{% endblock %}

三、原始按钮的代码位置 #

这个按钮的默认代码在Django内置模板文件中，路径为：
你的Python环境路径/lib/pythonX.X/site-packages/django/contrib/admin/templates/admin/base_site.html
其中X.X是你的Python版本号（如3.9），文件中的nav-global块包含该按钮的HTML代码。

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