Как передать переменные Django в Js-файл

Как вы можете видеть в коде ниже, я импортировал <script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script> в мой Index.html. Но в этом JS файле есть переменные Django. такие как: {{ sizes }} и {{ urlsPosts }}, они идут из Views.py в Index.html.

К сожалению, Django не видит эти переменные в JS-файле, если я сохраняю JS в отдельный файл. Если я копирую-вставляю JS прямо в HTML без разделения - все работает хорошо. Как я могу включить эти переменные Django в отдельный Js файл?

Index.html:

<html>
    {% load static %}
    {% include 'head.html' %}
    <body>
        <header>
        </header>
    </body>
    <footer>
        <script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script> 
    </footer>
</html>

Views.py:

def index(request):
    posts = Post.objects.all()
    sizes = ''
    urlsPosts = ''

    for i in range(0, len(posts)):
        if i == len(posts):
            sizes = sizes +  str(posts[i].thumbnail.width) + 'x'
            sizes = sizes +  str(posts[i].thumbnail.height)
            urlsPosts = urlsPosts + posts[i].thumbnail.url
        else:
            sizes = sizes +  str(posts[i].thumbnail.width) + 'x'
            sizes = sizes +  str(posts[i].thumbnail.height) + ' '
            urlsPosts = urlsPosts + posts[i].thumbnail.url + ' '

    return render(request,'index.html',{'posts':posts, 'sizes':sizes, 'urlsPosts':urlsPosts)

posts_lazy_loading.js:

var images = document.getElementsByClassName('cover_main_page'),
    posts = document.getElementsByClassName('post'),
    descriptions = document.getElementsByClassName('description'),
    description_height = descriptions[0].clientHeight;
    post_content = document.getElementsByClassName('post_content'),
    loading = document.getElementsByClassName('dots_portoflio'),
    sizes = "{{ sizes }}",
    sizeslist = sizes.split(" "),
    urlsPosts = "{{ urlsPosts }}",
    urlslist = urlsPosts.split(' '),
    ratios = [],
    viewport_width = document.documentElement.clientWidth,
    newwidth = 0,
    margin = 3, //each post has 3vw margin left and 3vw margin right
    mobile = 0,
    mobilewidth = 94;

    .... a lot of code here ....

Да, django сгенерирует эту строку следующим образом:

Он не откроет JS, так как это попросит браузер загрузить JS, чтобы использовать django внутри вашего JS, у вас есть одна из двух опций

  1. Используйте {%include 'JSFILE'%}, но в этом случае ваш JS-файл должен находиться в папке templates
    2. .
  2. Поместите сам JS код в ваш HTML шаблон.
Вернуться на верх