为什么名为'index.js'的JavaScript文件在Django模板中不起作用？

I am working on a Django project and my JavaScript file was not loading on the HTML template. After a lot of tinkering, what finally got the file to load was changing its name from 'index.js' to 'homepage.js' but I could have changed it to anything. I wanted to keep the file consistent with the HTML and CSS files that are named 'index.html' and 'index.css'.

我正在开发一个Django项目,我的JavaScript文件没有加载到HTML模板上。经过大量修修补补后,最终得到加载文件的是将其名称从“index.js”更改为“homepage.js”,但我可以将其更改为任何内容。我想保持文件与名为'index.html'和'index.css'的HTML和CSS文件保持一致。

Why is this the case that 'index.js' failed to load? It doesn't seem like file name should matter. I am mainly curious but hopefully this could help others.

为什么'index.js'无法加载?文件名似乎不重要。我主要是好奇,但希望这可以帮助别人。

1 个解决方案

#1

Verify that where you are extending the template from is correctly configured. You may be requiring homepage.js from a different template. I'd recommend having a CSS block that the templates can override when extending from the main template.

验证是否正确配置了扩展模板的位置。您可能需要来自其他模板的homepage.js。我建议有一个CSS模块,模板可以在从主模板扩展时覆盖。

main.html

<html>
  <head>

    <link rel="stylesheet" href="/static/styles/main.css" />
    {% block css_block %}{% endblock %}

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

  </head>
  <body>
    {% block body_block %}{% endblock %}
  </body>
</html>

template.html

{% extends 'main.html' %}

{% block css_block %}
  <link rel="stylesheet" href="/static/styles/resource/index.css" />
{% endblock %}

{% block body_block %}
  ...
{% endblock %}

Writing anything in a block after extending overrides that block in the parent template. It doesn't concatenate. Put any CSS/JS that you want on multiple pages in main.html, and the single page assets in their respective templates, in their respective blocks.

在扩展覆盖父模板中的块后,在块中写入任何内容。它没有连接。将您想要的任何CSS / JS放在main.html的多个页面上,将单个页面资源放在各自的模板中,放在各自的块中。

If you're trying to carry a block up two levels of extends, you must make sure that block is present (it can be empty) in the intermediate template.

如果您尝试对两个级别的扩展进行块处理,则必须确保中间模板中存在块(可以为空)。

#1