如何在 Django 中組織 JS 文件？

Question

我目前正在處理一個 Django 項目，我包含了不同的庫 JS 並創建了用於管理其他庫的 JS 文件，但是我不知道每個 html 頁面的 JS 文件的正確組織，例如，我有一個“Main .js”和“Milk.js”在基本模板中，但我不想在同一個基本模板中有兩個文件，我希望每個頁面都有單獨的文件..

我嘗試添加為普通的 js 文件

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

但是它向我顯示了一條錯誤消息，詢問我從 base.html 繼承時的幾個依賴項

我希望你的幫助

編輯：

Cuando he añadido 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 錯誤。

庫位於 base.html

很奇怪，當我從 home.html 單擊時我可以加載 Milk.js 但是當我從“Milk.html”單擊其他頁面例如“cow.html”時，即使我做了與“milk”相同的操作，也沒有加載 js 文件.html”。

Answer 1

Django 模板引擎已經提供了一個標簽來繼承你的 HTML 結構，稱為“擴展”。

標簽“extends”是用於擴展父模板。

{% extends "base.html" %} 使用文字值 "base.html" 作為要擴展的父模板的名稱。

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

閱讀有關文檔的更多信息[1]：[1]： https : //docs.djangoproject.com/en/3.2/ref/templates/builtins/#std : templatetag-extends

Answer 2

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

Answer 3

懶惰，並使用{% extends admin/base.html %}我發現使用{% block scripts %}不起作用。 JavaScript 未發送到瀏覽器。 但是base.html有一個內置塊{% block extrahead %} ，它是空的，只是用於將附加內容（如腳本）插入標題中的票證。

{% block extrahead %}
<script src="{{ STATIC_URL }}js/milk.js"></script>
{% endblock %}

如何在 Django 中組織 JS 文件？

問題描述

3 個解決方案

解決方案1
18 已采納 2016-01-04 07:55:58

解決方案2
3 2016-01-04 07:32:50

解決方案3
1 2019-11-08 15:55:20

如何在 Django 中組織 JS 文件？

問題描述

3 個解決方案

解決方案1 18 已采納 2016-01-04 07:55:58

解決方案2 3 2016-01-04 07:32:50

解決方案3 1 2019-11-08 15:55:20

解決方案1
18 已采納 2016-01-04 07:55:58

解決方案2
3 2016-01-04 07:32:50

解決方案3
1 2019-11-08 15:55:20