如何覆盖Django Admin中的CSS？

Question

我想在Django的管理界面中修改一些CSS，比如说base.css这个文件。直接在Django的库里改这样做好吗？有没有更好的方法来覆盖它？

Answer 1

这个方法适用于管理后台，我觉得这是最简单的方法，因为它覆盖了 base_site.html，而这个文件在升级 Django 时不会改变。

在你的模板目录下创建一个叫 admin 的文件夹，然后在里面新建一个文件，命名为 base_site.html。

在你的静态文件目录下的 css 文件夹里，创建一个叫 admin-extra.css 的文件。

在这个文件里写下你想要的自定义样式，比如： body{background: #000;}，这样可以设置背景颜色为黑色。

把下面的内容粘贴到 base_site.html 文件里：

{% extends "admin/base.html" %}
{% load static from staticfiles %} # This might be just {% load static %} in your ENV

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

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

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %}

{% block nav-global %}{% endblock %}

正如评论中提到的：确保你的应用在 INSTALLED_APPS 中排在 admin 应用之前，否则你的模板就无法覆盖 Django 的默认模板。

就这样！完成了。

Answer 2

在 settings.py 文件中，确保你的应用程序在 admin 之前被列在 INSTALLED_APPS 里。
创建一个文件 (your-app)/templates/admin/base_site.html，并把 <style> 代码块放到 {% block extrahead %} 里面。

示例：

{% extends "admin/base_site.html" %}
{% block extrahead %}
    <style>
        .field-__str__ {
            font-family: Consolas, monospace;
        }
    </style>
{% endblock %}

Answer 3

这主要取决于你想做什么。不过首先要注意：不要直接在Django的管理后台里覆盖它。我觉得你有两个比较合理的选择：

如果你想整体改变管理后台的外观，你应该覆盖管理模板。具体的内容可以在这里找到：覆盖管理模板。有时候，你可以直接扩展原来的管理文件，然后覆盖一个像 {% block extrastyle %}{% endblock %} 这样的部分，举个例子就是在 django/contrib/admin/templates/admin/base.html 里。
如果你的样式是针对特定模型的，你可以通过在你的 admin.py 文件中添加 Media 元类来增加额外的样式。这里有个例子：

class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/my_own_admin.js',)    
        css = {
             'all': ('css/admin/my_own_admin.css',)
        }

如何覆盖Django Admin中的CSS？

9 个回答

撰写回答