如何覆盖django管理模板来添加自定义javascript?

yk9xbfzb  于 2023-05-16  发布在  Java
关注(0)|答案(2)|浏览(99)

我有一个模型,我需要添加一些自定义JavaScript处理到其管理表单。
我尝试了通过以下指南实现:https://docs.djangoproject.com/en/1.5/ref/contrib/admin/#overriding-admin-templates
所以我创建了自己的change_form.html,覆盖了object-tools-items,并把我的js放在那里,但是当我转到更改表单时,我没有看到它。然后,作为一个测试,我把它直接放进了真实的的django change_form.html,但仍然什么都没有。
然后,为了查看是否正在使用该模板,我更改了它-添加了数据,创建了语法错误,但仍然没有效果。所以看起来这个模板根本没有被使用。我grepped了change_form.html来查看它是从哪里呈现的,我在contrib/admin/options.py:render_change_form()中找到了它,所以我在那里设置了一个断点,但它从未被命中。但是HTML看起来确实像是来自那个模板。
有人能给予我指个路吗?

vc6uscn9

vc6uscn91#

您无需覆盖管理模板即可将自定义javascript添加到管理页面。
您可以像这样添加资产:
https://docs.djangoproject.com/en/dev/topics/forms/media/#assets-as-a-static-definition
然后你只需要覆盖你的表单管理网站使用。

tag5nh1u

tag5nh1u2#

您可以将自定义cssjs文件仅添加到一个管理页面或所有管理页面。* 我不知道如何在一个应用程序中将cssjs文件添加到所有管理页面。
首先,我解释如何将它们添加到Person管理页面。
例如,您有自定义的cssjs文件,如下所示:

django-project
 |-core
 |  |-settings.py
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css # Here
 |              |  └-custom2.css # Here
 |              └-js
 |                 |-custom1.js # Here
 |                 └-custom2.js # Here
 |-app1
 |  |-models.py
 |  └-admin.py
 └-app2

现在,将它们设置为Person管理中的媒体类中的cssjs,如下所示,将它们添加到仅Person管理页面:

# "app1/admin.py"

@admin.register(Person)
class PersonAdmin(admin.ModelAdmin):
    class Media:
        css = {
            "all": (
                "core/admin/app1/css/custom1.css", # Here
                "core/admin/app1/css/custom2.css" # Here
            )
        }
        js = (
            "core/admin/app1/js/custom1.js", # Here
            "core/admin/app1/js/custom2.js" # Here
        )

接下来,我将解释如何将它们添加到所有管理页面。
因此,将BASE_DIR / 'templates'设置为DIRS in TEMPLATES in settings.py,如下所示:

# "core/settings.py"

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates', # Here
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

然后,将base.htmldjango/contrib/admin/static/admin/base.html复制到templates/admin/,如下所示:

django-project
 |-core
 |  |-settings.py
 |  └-static
 |     └-core
 |        └-admin
 |           └-app1 
 |              |-css
 |              |  |-custom1.css
 |              |  └-custom2.css
 |              └-js
 |                 |-custom1.js
 |                 └-custom2.js
 |-app1
 |  |-models.py
 |  └-admin.py
 |-app2
 └-templates
    └-admin
       └-base.html # Here

现在,在base.html中的<link ... "admin/css/base.css" %}{% endblock %}">之后设置它们,以将它们添加到所有管理页面,如下图所示,而无需在Person管理中的媒体类中将它们设置为cssjs

# "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/custom1.css" %}"> {# Here #}
<link rel="stylesheet" href="{% static "core/admin/app1/css/custom2.css" %}"> {# Here #}
<script src="{% static 'core/admin/app1/js/custom1.js' %}" defer></script> {# Here #}
<script src="{% static 'core/admin/app1/js/custom2.js' %}" defer></script> {# Here #}
{% block dark-mode-vars %}
  <link rel="stylesheet" href="{% static "admin/css/dark_mode.css" %}">
# ...

相关问题