如何用Django模板标签{% extends %}将JS代码片段插入index.html？

问题背景 #

我正在开发一个Django应用，想通过{% extends %}标签把publish_layers_in_html_page.html里的JavaScript代码插入到index.html中，但尝试后未成功。不过直接将这段JS代码插入index.html末尾时，代码可以正常运行。

现有文件内容 #

原templates/index.html页脚代码 #

...

</body>

</html>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

原templates/publish_layers_in_html_page.html中的JS代码 #

<script> 
 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}

{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)

</script>

已尝试的修改 #

修改后的templates/index.html #

...

</body>

</html>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

{% block scripts %}{% endblock %}

修改后的templates/publish_layers_in_html_page.html #

{% extends "index.html" %}

 {% block scripts %}

<script> 
 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}

{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)

</script>

{% endblock %}

问题原因及修复方案 #

问题核心是模板结构不符合HTML规范：index.html中把{% block scripts %}放在了</html>标签外面，浏览器不会解析该标签后的内容，Django模板引擎也无法识别这个区块。

修复步骤 #

1. 调整index.html的结构，将所有JS脚本和区块标签移到</body>标签之前、</html>标签之前的位置（所有HTML内容必须包裹在<html>标签内）。
2. 确保子模板的{% extends %}是第一行代码，避免前置空格。

修复后的templates/index.html

...

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<!-- import a library leaflet.browser.print from local folder lib placed in the staticfiles folder -->
<script src="{% static './lib/leaflet.browser.print.min.js' %}"></script>

{% block scripts %}{% endblock %}
</body>
</html>

修复后的templates/publish_layers_in_html_page.html

{% extends "index.html" %}

{% block scripts %}
<script> 
var overlayMaps = {};

// Shapefile wms
{% for s in shp %}
var {{ s.name }} = L.tileLayer.wms('http://localhost:8080/geoserver/wms', {
    layers: '{{s.name}}',
    transparent: true,
    format: 'image/png',
})
overlayMaps['{{ s.name }}'] = {{ s.name }}
{% endfor %}

L.control.layers(baseMaps, overlayMaps, {collapsed: false, position: 'topleft'}).addTo(map)
</script>
{% endblock %}

额外注意事项 #

• 确保视图函数渲染的是publish_layers_in_html_page.html而非原index.html。
• 子模板的{% extends %}必须是模板的第一行代码，不能有前置空格或其他内容。

内容的提问来源于stack exchange，提问作者Tms91