带有CSS / JS的Django'include'模板

Question

我有一个通用模板，用于通过include标记将html（即menubar.html的menubar）包含到其他应用程序模板中。 它具有一些定义的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和不位于BODY末尾的js 。 这些被描述为标准的HTML惯例。

明确的替代方法是在包含子模板的每个模板中链接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。 这是参考。

从有关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%}

带有CSS / JS的Django'include'模板

问题描述

2 个解决方案

解决方案1
4 已采纳 2017-08-07 15:41:52

解决方案2
1 2017-08-07 15:09:51

带有CSS / JS的Django&#39;include&#39;模板

问题描述

2 个解决方案

解决方案1 4 已采纳 2017-08-07 15:41:52

解决方案2 1 2017-08-07 15:09:51

带有CSS / JS的Django'include'模板

解决方案1
4 已采纳 2017-08-07 15:41:52

解决方案2
1 2017-08-07 15:09:51