如何在JS的innerHTML中使用Django的{% url %}模板标签？

问题原因 #

Django的模板标签（比如{% url 'users' %}）只有在Django模板文件（.html）被服务器渲染时才会被解析成实际URL。而外部JS文件是作为静态资源直接发送给浏览器的，不会经过Django模板引擎处理，所以标签会原封不动地传到前端，自然无法生成正确的链接。

解决方法 #

方法一：在HTML模板中传递URL给JS

先在HTML里把Django生成的URL存入全局变量，再让JS调用这个变量：
修改mainPage.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <body>
        <div style="display: flex">
            <div id="menu" class="menu"></div>
        </div>
        <a class="menu-item" href="{% url 'users' %}">users</a>
        
        <!-- 定义全局变量存储URL -->
        <script>
            const appUrls = {
                users: "{% url 'users' %}"
            };
        </script>
        
        <script src="{% static 'js/menu.js' %}"></script>
    </body>
</html>

修改menu.js：

document.getElementById('menu').innerHTML = `                   
    <a class="menu-item" href="${appUrls.users}">users</a>
`;

方法二：将JS代码嵌入HTML模板

如果JS代码量不大，直接把它写到HTML的<script>标签里，这样就能直接使用Django模板标签：
修改mainPage.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <body>
        <div style="display: flex">
            <div id="menu" class="menu"></div>
        </div>
        <a class="menu-item" href="{% url 'users' %}">users</a>
        
        <script>
            document.getElementById('menu').innerHTML = `                   
                <a class="menu-item" href="{% url 'users' %}">users</a>
            `;
        </script>
    </body>
</html>

这种方法不需要单独的menu.js文件，适合小型脚本。

方法三：用Django视图动态生成JS文件

如果需要在JS里大量使用模板标签，可以让JS由Django视图渲染：

1. 修改urls.py，新增路由：

from django.urls import path
from . import views

urlpatterns = [
    path("",views.mainPage),
    path("users/",views.users,name='users'),
    path("dynamic-menu.js", views.dynamic_menu_js, name='dynamic_menu_js'),
]

2. 在views.py中添加视图函数：

from django.shortcuts import render

def dynamic_menu_js(request):
    # 以JS类型返回模板渲染后的内容
    return render(request, 'dynamic-menu.js', content_type='application/javascript')

3. 在模板目录下创建dynamic-menu.js文件，内容保持原样：

document.getElementById('menu').innerHTML = `                   
    <a class="menu-item" href="{% url 'users' %}">users</a>
`;

4. 修改mainPage.html中的脚本引用：

<script src="{% url 'dynamic_menu_js' %}"></script>

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