Как использовать теги django/jinja для расширения html с помощью фрагмента javascript из другого .js-файла

Я разрабатываю приложение для django.

Имеется файл templates/index.html, в нижнем колонтитуле которого есть несколько фрагментов javascript, например

...

</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, содержащий фрагмент javascript с использованием тегов jinja, содержимое которого следующее

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

Можно ли с помощью тега django {% extends %} вставить этот сниппет javascript в файл index.html?

Я попытался изменить два файла следующим образом, но безуспешно.

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

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

Я также проверил, что если вставить сниппет javascript в конец index.html, то код работает правильно.

Вы делаете обратное расширение. Вам нужен js-код publish_layers_in_html_page внутри index.html, но вы включили index.html в publish_layers_in_html_page. Теперь, когда вы делаете это, происходит следующее: шаблон publish_layers_in_html_page может получить доступ к коду index.html, но не наоборот.

Обновленный код:

index.html:

{% extends "publish_layers_in_html_page.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 %}

publish_layers_in_html_page.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 scripts %}
Вернуться на верх