Django如何在子模板中动态添加js和CSS？

Question

我是 Django 的新手。

我有一个基本模板设置，其中我有 base.html 使用 {% block body %}{% endblock %} 包含 index.html 和 test.html 的子模板在顶部有 {% extends 'base.html' %}。

base.html 模板包含 Bootstrap。这是包含 CSS 和 JS 的地方。 index.html 需要包含 select2 但 test.html 不需要。

我可以在这里使用 block 来解决我的问题(将 CSS 和 JS block 添加到 base.html)，但我发现这很快就会变得非常困惑。

我是否可以使用 Django 中的 Assets 来创建一个 select2 Assets ，并在子模板中调用它以向父模板注册所需的 JS 和 CSS？

我所看到的只是压缩，到目前为止，无数搜索都是空的。

Answer 1

可以在 base.html 中再添加 2 个 block :

<some css>
{% block additional_css %}
{% endblock additional_css %}

...

<some js>
{% block additional_js %}
{% endblock additional_js %}

并在从 base.html 扩展的任何页面中覆盖它们:

{% extends "base.html" %}

{% block additional_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-datetimepicker.min.css' %}">
{% endblock additional_css %}

...

{% block additional_js %}
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
{% endblock additional_js %}

这是一个很好的做法，因为在这种情况下，脚本将在最后加载，如果您添加的某些脚本需要例如 JQuery，您将不会遇到任何问题。

它不会让代码变得凌乱，它很扁平并且易于解释。最好考虑如何不让 JS 变得困惑，正如您所指出的，有几种方法可以做到这一点，其中之一就是压缩所有 JS。