Question

我有一个通用模板，用于通过include标记将html（即menubar.html中的菜单栏）包含到其他应用模板中。它有一些已定义的 css 和 js 功能，存储在各自的menubar.css | menubar.js文件中。

在menubar.html文件中包含指向这些文件的链接似乎更方便，如下所示：

//At the Start
<link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}" />

//.... other menubar HTML

//At the End
<script src="{% static '<app_name>/js/menubar.js' %}"></script>

我担心这不是一个好习惯，因为模板将加载 css ，而不是HEAD和 js 不在BODY的末尾。这些被描述为standard HTML practises。

明确的替代方法是在我包含子模板的每个模板中链接 css 或 js ，但这看起来很乏味。

我知道也有扩展模板的可能性，但我相信css / js使用会出现同样的问题。

什么是最好的？

Answer 1

您可以在此处使用django-sekizai套餐：

https://django-sekizai.readthedocs.io/en/latest/

你有一个基本模板：

{% load sekizai_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <!-- other css and head content goes here -->
        {% render_block "css" %}
    </head>
    <body>
        ...

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        {% render_block "js" %}        
    </body>
</html>

然后在您的menubar.html中，您可以在模板中的任何位置添加以下内容，并将css添加到页面头部并将javascript添加到正文的底部：

{% addtoblock "css" %}
    <link rel="stylesheet" href="{% static '<appname>/css/menubar.css' %}"/>
{% endaddtoblock %}

{% addtoblock "js" %}
    <script src="{% static '<app_name>/js/menubar.js' %}"></script>
{% endaddtoblock %}

这是一个非常方便的包裹！

Answer 2

您可以使用模板继承在django中动态加载js和css。 This is the reference

从关于javascript加载的this帖子开始，您对继承标记的使用可能如下所示：

#base.html
{% block js %}
   <script src="{% static '<app>/js/resource.js' %}"></script>
   ... //other scripts
{% endblock %}

然后在另一个模板中：

# child.html
{% extends base.html %}

{% block js %}
   {{ block.super }} //Includes base.html js block content
   <script src="{% static '<otherapp>/js/resource2.js' %}">
   ... //other scripts
{% endblock%}

Django＆＃39; Include＆＃39;模板与css / js

2 个答案: