在 django 中覆盖管理 css

Posted 2023-02-23

【中文标题】在 django 中覆盖管理 css

【英文标题】：Overriding admin css in django

【发布时间】：2011-11-13 11:56:39

【问题描述】：

我想更改 admin django 中的某些 css，例如 base.css。直接在django库中改会更好吗？我怎样才能以最好的方式覆盖它？

【参考方案1】：

这很大程度上取决于你想做什么。虽然首先：不要直接在 Django 管理员中覆盖它。你有两个我认为合理的选择：

如果您想更改管理员的外观，您应该覆盖管理员模板。这在此处详细介绍：Overriding admin templates。有时您可以只扩展原始管理文件，然后在 django/contrib/admin/templates/admin/base.html 中覆盖像 % block extrastyle %% endblock % 这样的块。 如果您的样式是特定于模型的，您可以通过 admin.py 中的 Media 元类添加其他样式。在此处查看示例：

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

【讨论】：

其实不是模型级别，而是整个网站本身。要对 base.css、ie.css 等进行具体更改。一种选择是将 admin/base.html 包含在我的应用程序本身中，并在 admin/base.html 文件中使用我的自定义 base.css。这样我就必须将一些来自 django 管理员的模板文件包含到我自己的站点中。还有比这更好的解决方案吗？

我不知道。 django 管理员最终只不过是一个 django 可重用的应用程序。这也是任何其他可重用应用程序的方式。

我注意到这里的 js 中列出了一个 .css 文件……这真的有效吗？我做不到。

是的，你是对的。我犯了一个错误，并使用 django 文档中的示例编辑了我的答案。

用 Eli Porter 的话来说，“你烤了最好的猫”。

【参考方案2】：

在settings.py 中，确保您的应用列在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 %

【讨论】：

最佳答案。如果您愿意，您还可以避免在 INSTALLED_APPS 中的管理员之前列出您的应用程序，方法是在基础项目中放置一个“模板”目录并在 settings.py 中引用它： TEMPLATES = [ ...other stuffs..., 'DIRS': [ os.path.join(BASE_DIR, 'templates')], ]

好主意！像魅力一样顺利运行！

如果您使用自定义身份验证用户模型并希望在 admin.py 中取消注册身份验证组模型，请确保在您的应用之前列出 django.contrib.auth。

【参考方案3】：

此解决方案适用于管理站点，我认为这是最干净的方式，因为它覆盖了base_site.html，在升级 django 时不会更改。

在您的模板目录中创建一个名为 admin 的文件夹，并在其中创建一个名为 base_site.html 的文件。

在css 下的静态目录中创建一个名为admin-extra.css 的文件。

在其中写入您想要的所有自定义 CSS，例如：bodybackground: #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 %

如 cmets 中所述： 确保您的应用在 INSTALLED_APPS 中的管理应用之​​前，否则您的模板不会覆盖 django 的

就是这样！你完成了

【讨论】：

谢谢，效果很好！如果它不起作用，请确保您的应用在 INSTALLED_APPS 中的管理应用之​​前，否则您的模板不会覆盖 django 的。

最佳答案和评论。更改管理页面上的颜色非常困难。通过这个答案和评论确实巩固了它的工作原理。

你怎么知道升级django时base_site.html永远不会改变？ （我的意思是，这个答案已经 3 岁了，仍然有效，但这不是保证）

@marv 如果您深入了解源代码，您可以很容易地看到管理架构是围绕这些特定名称构建的，尤其是在 url 和模板呈现中。继承类的类 继承类的类依赖于这些名称保持不变，除非对 Django 框架进行重大重新设计（即使这样我也不会打赌这种变化）覆盖管理视图和管理 url 的整体基本约定为根据 django 路线图，覆盖基本模板至少在未来 3 年内保持不变。

所以这只是关于 django 的一般知识，没有具体的来源证实这一点？不是我怀疑你，我只是想知道一个人应该如何发现是这样的。

【参考方案4】：

我只是扩展了 admin/base.html 以包含对我自己的 css 文件的引用 - 最后。 css 的美妙之处在于您不必触及现有的定义，只需重新定义即可。

【参考方案5】：

在您的静态目录中，创建一个static/admin/css/base.css 文件。

先粘贴Django's default Admin CSS，然后在底部添加您的自定义设置。

【讨论】：

如果您这样做，请务必将您的应用放在django.contrib.admin 之前的INSTALLED_APPS 列表中。如果不这样做，collectstatic 将首先找到管理员 base.css，并且您的自定义版本不会覆盖它。

这不是一个好的长期解决方案。它复制/粘贴一堆代码，并且不会随着 Django 升级而维护。

任何 Django 管理员的样式基本上都是代码的一个分支。对 Django 的更新实际上可能会破坏您的自定义。我的建议是尽量减少自定义并将它们添加到 Django 默认样式的底部。然后，您可以根据需要手动更新默认样式。

@danny-w-adair 上面的答案更好；保持东西“干燥”，但它仍然是 Django 代码的一个分支，可能会导致轻微的升级痛苦。

【参考方案6】：

如果你想要一个全局范围并且你不想考虑覆盖模板，那么 mixin 非常适合这个。将此代码放在您想要的任何位置：

class CSSAdminMixin(object):
    class Media:
        css = 
            'all': ('css/admin.css',),
        

然后，使用您的覆盖创建一个名为 admin.css 的 CSS 文件，例如：

select[multiple] 
    resize: vertical;

然后，在任何你想要的模型中，做：

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

你会准备好的。

【讨论】：

我喜欢你的回答，但为什么不直接添加到 MyModelAdmin

如果是一个模型，你可以这样做，但如果你对多个模型这样做，它会变得一团糟。

【参考方案7】：

在STATICFILES_DIRS 的文件夹中包含admin/css/changelists.css，它将使用changelists.css 而不是默认的管理员。

【参考方案8】：

更好的选择是覆盖 HTML

在您的模板中创建一个文件夹 admin，然后您可以在其中创建 base.html

% extends 'admin/base.html' %

% block extrahead % block.super 
<style>
:root 
  --primary: #9774d5;
  --secondary: #785cab;
  --link-fg: #7c449b;
  --link-selected-fg: #8f5bb2;

</style>
% endblock %

know more

【讨论】：

不是% extends "admin/base_site.html" %???

【参考方案9】：

如果给定的字符串是模型、ModelAdmin 或可调用的方法，Django 将默认对输出进行 HTML 转义。要转义用户输入并允许您自己的未转义标签，请使用 format_html()。

这是一个完整的示例模型：

from django.contrib import admin
from django.db import models
from django.utils.html import format_html

class Person(models.Model):
    first_name = models.CharField(max_length=50)
    last_name = models.CharField(max_length=50)
    color_code = models.CharField(max_length=6)

    @admin.display
    def colored_name(self):
        return format_html(
            '<span style="color: #;"> </span>',
            self.color_code,
            self.first_name,
            self.last_name,
        )

class PersonAdmin(admin.ModelAdmin):
    list_display = ('first_name', 'last_name', 'colored_name')

know more