带有 css/js 的 Django“包含”模板答案

【问题标题】：Django 'Include' template with css/js带有 css/js 的 Django“包含”模板
【发布时间】：2018-01-14 22:39:51
【问题描述】：

我有一个通用模板，用于通过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>

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

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

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

什么是最好的？

【问题讨论】：

标签： javascript html css django django-templates

【解决方案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 %}

这是一个非常方便的包！

【讨论】：

好建议！这与Template Inheritance 有何不同？我刚刚读到您可以使用{% block %} 标签并调用{{ block.super }} 来获取原始内容。这不会在本地做同样的事情（没有额外的包）吗？
抱歉，我看到了区别 - django 不提供对 processing blocks within includes 的原生支持。我看到 django-sekizai 专门处理这个问题。不错！

【解决方案2】：

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

来自this关于javascript加载你使用继承标签的帖子可能如下所示：

#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%}

【讨论】：

如果我使用 {% include %} 标签而不是继承，这看起来如何@gene-sescon？即，我在页面中包含一个 html 资源，但它还需要像页面本身一样扩展 JS 功能。