我想在admin django中修改一些css,比如base.css。直接在django库中更改是否更好?我如何以最好的方式覆盖它?
base.css
ztyzrc3y1#
这取决于你想做什么。虽然首先:不要直接在Django admin中覆盖它。我觉得你有两个选择比较合理:1.如果你想改变管理员的外观,一般你应该覆盖管理员模板。这里详细介绍了这一点:覆盖管理模板。有时你可以扩展原始的管理文件,然后覆盖一个块,比如django/contrib/admin/templates/admin/base.html中的{% block extrastyle %}{% endblock %}。1.如果您的样式是特定于模型的,则可以通过admin.py中的Media meta类添加其他样式。请参见此处的示例:
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',) }
yzuktlbb2#
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 %}
px9o7tmv3#
这个解决方案将适用于管理站点,我认为这是最干净的方法,因为它覆盖了base_site.html,而base_site.html在升级django时不会改变。在模板目录中创建一个名为admin的文件夹,并在其中创建一个名为base_site.html的文件。在css下的静态目录中创建一个名为admin-extra.css的文件。在里面写上你想要的所有自定义css,比如:body{background: #000;}。将此粘贴到base_site.html中:
base_site.html
admin
css
admin-extra.css
body{background: #000;}
{% 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的够了,你完了
b1uwtaje4#
我只是扩展了admin/base.html,在最后包含了对我自己的css文件的引用。css的美妙之处在于,你不必触及现有的定义,只需重新定义。
pokxtpni5#
在静态目录中,创建一个static/admin/css/base.css文件。首先粘贴Django's default Admin CSS,然后在底部添加您的自定义设置。
static/admin/css/base.css
trnvg8h36#
如果你想要一个全局作用域,并且你不想考虑覆盖模板,那么mixin就可以很好地实现这一点。把这段代码放在任何你想要的地方:
class CSSAdminMixin(object): class Media: css = { 'all': ('css/admin.css',), }
然后,创建一个名为admin.css的CSS文件,其中包含您的覆盖,例如:
admin.css
select[multiple] { resize: vertical; }
然后,在您想要的任何模型中,执行以下操作:
class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):
你就能搞定了。
xlpyo6sf7#
在STATICFILES_DIRS的文件夹中有admin/css/changelists.css,它将使用changelists.css而不是默认的admin。
STATICFILES_DIRS
admin/css/changelists.css
vdgimpew8#
当我想覆盖css时,在{% block extrastyle %}{% endblock %}中使用<style>标签对我来说不起作用。主题化支持提供了正确的方法。我所缺少的是{{ block.super }}:-
{{ block.super }}
{% extends 'admin/base.html' %} {% block extrastyle %}{{ block.super }} <style> --- your style --- --- properties here --- </style> {% endblock %}
uwopmtnx9#
你可以在Django Admin中覆盖base.css。例如,有Person模型,如下所示:
Person
# "app1/models.py" from django.db import models class Person(models.Model): name = models.CharField(max_length=20) def __str__(self): return self.name
然后是Person admin,如下所示:
# "app1/admin.py" from django.contrib import admin from .models import Person @admin.register(Person) class PersonAdmin(admin.ModelAdmin): pass
然后,将base.css从django/contrib/admin/static/admin/css/base.css复制到core/static/core/admin/app1/css/,如下所示:
django/contrib/admin/static/admin/css/base.css
core/static/core/admin/app1/css/
django-project |-core | |-settings.py | └-static | └-core | └-admin | └-app1 | └-css | └-base.css # Here |-app1 | |-models.py | └-admin.py └-app2
然后在base.css中,将background: var(--header-bg);替换为background: black;,如下所示,将Person管理页面中的标题颜色更改为黑色:
background: var(--header-bg);
background: black;
/* "core/static/core/admin/app1/css/base.css" */ #header { width: auto; height: auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 40px; /* background: var(--header-bg); */ background: black; color: var(--header-color); overflow: hidden; }
首先,我解释如何在Person管理页面中将标题颜色更改为黑色。因此,在Media类中将"core/admin/app1/css/base.css"设置为css,如下所示:
"core/admin/app1/css/base.css"
# "app1/admin.py" from django.contrib import admin from .models import Person @admin.register(Person) class PersonAdmin(admin.ModelAdmin): class Media: css = { # ↓ ↓ ↓ ↓ ↓ ↓ Here ↓ ↓ ↓ ↓ ↓ ↓ 'all': ('core/admin/app1/css/base.css',) }
然后,在Person管理页面中将标题颜色更改为黑色,如下图所示:
并且,在Animal admin中,标题颜色未更改为黑色,如下所示:
Animal
接下来,我将解释如何在所有管理页面中将标题颜色更改为黑色。因此,将base.html从/django/contrib/admin/templates/admin/base.html复制到/templates/admin/base.html,如下所示:
/django/contrib/admin/templates/admin/base.html
/templates/admin/base.html
django-project |-core | |-settings.py | └-static | └-core | └-admin | └-app1 | └-css | └-base.css |-app1 | |-models.py | └-admin.py |-app2 └-templates └-admin └-base.html # Here
然后在base.html中,在<link ... "admin/css/base.css" %}{% endblock %}">之后添加<link ... "core/admin/app1/css/base.css" %}">,如下所示,而不将{% static %}中的admin/css/base.css替换为core/admin/app1/css/base.css:
base.html
<link ... "admin/css/base.css" %}{% endblock %}">
<link ... "core/admin/app1/css/base.css" %}">
admin/css/base.css
core/admin/app1/css/base.css
# "templates/admin/base.html" # ... <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}"> <link rel="stylesheet" href="{% static "core/admin/app1/css/base.css" %}"> {# Here #} {% block dark-mode-vars %} #...
然后,在Person和Animal管理员中,标题颜色更改为黑色,如下所示:
{% static %}
# "templates/admin/base.html" # ... <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% block stylesheet %}{% static "core/admin/app1/css/base.css" %}{% endblock %}"> {% block dark-mode-vars %}{# "admin/css/base.css" is replaced ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ #} #...
然后,所有管理页面中的文本都会变大,即使在Person和Animal管理员中标题颜色更改为黑色,如下所示,所以不要这样做:
9条答案
按热度按时间ztyzrc3y1#
这取决于你想做什么。虽然首先:不要直接在Django admin中覆盖它。我觉得你有两个选择比较合理:
1.如果你想改变管理员的外观,一般你应该覆盖管理员模板。这里详细介绍了这一点:覆盖管理模板。有时你可以扩展原始的管理文件,然后覆盖一个块,比如
django/contrib/admin/templates/admin/base.html
中的{% block extrastyle %}{% endblock %}
。1.如果您的样式是特定于模型的,则可以通过
admin.py
中的Media
meta类添加其他样式。请参见此处的示例:yzuktlbb2#
settings.py
中,确保您的应用在INSTALLED_APPS
中的admin之前列出。(your-app)/templates/admin/base_site.html
并将<style>
块放入{% block extrahead %}
示例:
px9o7tmv3#
这个解决方案将适用于管理站点,我认为这是最干净的方法,因为它覆盖了
base_site.html
,而base_site.html
在升级django时不会改变。在模板目录中创建一个名为
admin
的文件夹,并在其中创建一个名为base_site.html
的文件。在
css
下的静态目录中创建一个名为admin-extra.css
的文件。在里面写上你想要的所有自定义css,比如:
body{background: #000;}
。将此粘贴到
base_site.html
中:评论中提到:确保你的应用在INSTALLED_APPS中的admin应用之前,否则你的模板不会覆盖django的
够了,你完了
b1uwtaje4#
我只是扩展了admin/base.html,在最后包含了对我自己的css文件的引用。css的美妙之处在于,你不必触及现有的定义,只需重新定义。
pokxtpni5#
在静态目录中,创建一个
static/admin/css/base.css
文件。首先粘贴Django's default Admin CSS,然后在底部添加您的自定义设置。
trnvg8h36#
如果你想要一个全局作用域,并且你不想考虑覆盖模板,那么mixin就可以很好地实现这一点。把这段代码放在任何你想要的地方:
然后,创建一个名为
admin.css
的CSS文件,其中包含您的覆盖,例如:然后,在您想要的任何模型中,执行以下操作:
你就能搞定了。
xlpyo6sf7#
在
STATICFILES_DIRS
的文件夹中有admin/css/changelists.css
,它将使用changelists.css而不是默认的admin。vdgimpew8#
当我想覆盖css时,在
{% block extrastyle %}{% endblock %}
中使用<style>
标签对我来说不起作用。主题化支持提供了正确的方法。我所缺少的是{{ block.super }}
:-uwopmtnx9#
你可以在Django Admin中覆盖
base.css
。例如,有
Person
模型,如下所示:然后是
Person
admin,如下所示:然后是
Person
admin,如下所示:然后,将base.css从
django/contrib/admin/static/admin/css/base.css
复制到core/static/core/admin/app1/css/
,如下所示:然后在
base.css
中,将background: var(--header-bg);
替换为background: black;
,如下所示,将Person
管理页面中的标题颜色更改为黑色:首先,我解释如何在
Person
管理页面中将标题颜色更改为黑色。因此,在Media类中将
"core/admin/app1/css/base.css"
设置为css
,如下所示:然后,在
Person
管理页面中将标题颜色更改为黑色,如下图所示:并且,在
Animal
admin中,标题颜色未更改为黑色,如下所示:接下来,我将解释如何在所有管理页面中将标题颜色更改为黑色。
因此,将base.html从
/django/contrib/admin/templates/admin/base.html
复制到/templates/admin/base.html
,如下所示:然后在
base.html
中,在<link ... "admin/css/base.css" %}{% endblock %}">
之后添加<link ... "core/admin/app1/css/base.css" %}">
,如下所示,而不将{% static %}中的admin/css/base.css
替换为core/admin/app1/css/base.css
:然后,在
Person
和Animal
管理员中,标题颜色更改为黑色,如下所示:base.html
中,如果您在{% static %}
中将admin/css/base.css
替换为core/admin/app1/css/base.css
,如下所示,而没有在<link ... "admin/css/base.css" %}{% endblock %}">
后添加<link ... "core/admin/app1/css/base.css" %}">
:然后,所有管理页面中的文本都会变大,即使在
Person
和Animal
管理员中标题颜色更改为黑色,如下所示,所以不要这样做: