如何在Django中组织JS文件?

时间:2016-01-04 07:11:02

标签: javascript jquery django django-templates

我目前正在使用Django项目,我包含不同的库JS和我创建JS文件来管理其他库,但我不知道每个html页面的JS文件的正确组织,例如,我有基本模板中的“Main.js”和“Milk.js”,但我不希望在同一个基本模板中同时拥有这两个文件,我希望每个页面都有单独的文件。

我尝试添加为普通的js文件

<script src="{{ STATIC_URL }}js/milk.js"></script>

但它向我显示一条错误消息,询问我从base.html继承的几个依赖项

我希望你的帮助

编辑:

Cuando heaadadias en mis archivos de plantillas,sin mostrarme error en la consola de cromo pero en la consola django mostrarme los archivos JS de carga con 304 error。 enter image description here

这些库位于base.html

奇怪的是,当我从home.html点击时我可以加载milk.js但是当我点击其他页面例如“cow.html”从“Milk.html”没有加载js文件时,即使我做了同样的事情作为“milk.html”。

3 个答案:

答案 0 :(得分:9)

Django模板引擎已经提供了一个用于继承HTML结构的标记,名为&#39; extend&#39;。

  

标记 &#34;扩展&#34; 是用于扩展父模板。

     

{%extends&#34; base.html&#34; %}使用字面值&#34; base.html&#34;作为要扩展的父模板的名称。

base.html 是可以扩展的父模板。

{% load staticfiles %}
<html lang="en">
    <head><title>Hello World</title></head>
    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>

        {% block scripts %}
        <script src="{% static 'js/main.js' %}"></script>
        {% endblock %}

    </body>
</html>

并且您还有另一个名为 milk.html 的HTML,您需要与base.html相同的所有内容,但包含 milk.js ,您只需执行此类操作。

{% load staticfiles %}
{% extends "base.html" %}

{% block scripts %}
    <!-- block.super will get the content of the block from the parent template -->
    {{ block.super }}
    <script src="{% static 'js/milk.js' %}"></script>
{% endblock %}

详细了解&#39; extends&#39; :https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#std:templatetag-extends

答案 1 :(得分:3)

base.html文件中,在head标记内添加一个块,如下所示:

{% block scripts %}

<!-- some default content here -->

{% endblock %}

现在在您的不同模板文件中:

{% block scripts %}

<!-- insert per template scripts here -->

{% endblock %} 

所以在使用Milk的模板中,它就像是:

{% block scripts %}

<script src="{{ STATIC_URL }}js/milk.js"></script>

{% endblock %}

答案 2 :(得分:0)

懒惰,并使用<div ng-repeat="item in mainList | limitTo : 10 : (currentPage-1) * 10"> {{item}} </div> 扩展管理模板,我发现使用{% extends admin/base.html %}不起作用。 JavaScript未发送到浏览器。但是{% block scripts %}有一个内置的base.html块,它是空的,只是用于将其他内容(如脚本)插入标头的票证。

{% block extrahead %}