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

Question

I have a generic template, used for including html (ie. a menubar in menubar.html ) into other app templates, through the include tag. 我有一个通用模板，用于通过include标记将html（即menubar.html的menubar）包含到其他应用程序模板中。 It has some defined css and js functionality, stored in respective menubar.css | 它具有一些定义的CSS和JS功能，分别存储在相应的menubar.css 。 menubar.js files. menubar.js文件。

Is seems much more convenient to contain links to these files within the menubar.html file, as shown below: 在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>

I'm worried this isn't good practise, because the template will be loaded with the css not located in HEAD and js not located at the end of BODY . 我担心这不是一个好习惯，因为模板将加载不位于HEAD的css和不位于BODY末尾的js 。 These are described as the standard HTML practises . 这些被描述为标准的HTML惯例。

The clear alternative is to link the css or js in every template that I include the subtemplate, but this seems tedious. 明确的替代方法是在包含子模板的每个模板中链接css或js ，但这似乎很乏味。

I know there is also the possibility of extending a template, however I believe the same issues occur with css/js usage. 我知道也有可能扩展模板，但是我相信css / js的使用也会发生同样的问题。

What's best? 什么才好

Answer 1

You can utilise the django-sekizai package here: 您可以在此处使用django-sekizai软件包：

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

You'd have a base template along the lines of this: 您将具有以下基本模板：

{% 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>

Then in your menubar.html you can add the following anywhere in the template and they css will get added to the page head and the javascript to the bottom of the body: 然后，在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 %}

It's a really handy package! 这是一个非常方便的包装！

Answer 2

You can dynamically load your js and css in django, by using template inheritance. 您可以使用模板继承在django中动态加载js和CSS。 This is the reference . 这是参考。

From this post about javascript loading your use of inheritance tags might look like this: 从有关javascript加载的这篇文章中，您对继承标记的使用可能如下所示：

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

and then in another template: 然后在另一个模板中：

# 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