静态JavaScript文件引入Django变量到HTML无法渲染如何解决

问题原因 #

Django默认只会对templates目录下的模板文件（通常为.html后缀）进行模板语法渲染，而static目录下的所有静态资源（包括你用到的js/info.js）会被直接作为静态文件返回给浏览器，不会经过Django模板引擎的解析，因此写在JS文件中的{{ 变量名 }}模板语法不会被替换为后端传递的实际值，直接原样输出到前端导致显示异常。
你将脚本直接写在index.html中时，这段代码属于Django模板文件的一部分，会正常经过模板渲染替换变量值，因此运行正常。

可行解决方案 #

方案1（最推荐）：在HTML中提前声明全局变量传递参数 #

在index.html引入info.js之前，先声明全局变量存储所有需要用到的Django模板变量：

<script>
// 提前注入Django渲染后的变量
const bucketInfo = {
  item_count: {{ bucket_item_count }},
  size: {{ bucket_size }},
  last_updated: "{{ last_updated_time }}",
  directory_count: {{ directory_count }},
  file_count: {{ file_count }}
}
</script>
<script src="{% static '/js/info.js' %}" type="text/javascript"></script>

之后修改info.js中所有的模板变量为对应的全局变量取值即可，比如把{{ bucket_item_count }}替换为bucketInfo.item_count。

方案2：Modal结构直接写在HTML中 #

把需要用到模板变量的Modal结构直接写在index.html的隐藏容器中，静态JS仅负责控制Modal的弹出逻辑，不需要拼接带变量的HTML代码：

<!-- index.html 中直接写Modal结构，默认隐藏 -->
<div class='modal fade' id='exampleModal1' tabindex='-1' aria-labelledby='exampleModal1Label' aria-hidden='true'>
  <!-- 你的原有Modal代码，里面的{{变量}}会正常渲染 -->
</div>

修改info.js的逻辑，仅保留触发Modal弹出的代码即可。

方案3（不推荐）：将JS作为模板渲染 #

可以将info.js放到templates目录下，单独配置路由让Django对JS文件进行模板渲染后再返回，但该方案会破坏静态资源的缓存策略，额外增加服务端渲染开销，不建议生产环境使用。

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