将所有 Javascript 移动到 Django 中的单独文件

Posted 2023-02-24

【中文标题】将所有 Javascript 移动到 Django 中的单独文件

【英文标题】：Move all Javascript to a separate file in Django

【发布时间】：2015-06-24 10:12:42

【问题描述】：

我从 Django 开始并做一些事情。我想保持 html 文件干净，没有 <script> 块。是否有可能，即使我的 js 部分正在使用 % url % 块？

例子：

page.html

<div> 
<h1> My home url is: </h1>
<div id="js-tag" ></div>
</div>
<script>
$(function()
  $('#js-tag').html("% url 'home' %")
);
</script>

我想要的是删除它并将其放在一个单独的 js 文件中，然后将其导入到 page.html

【问题讨论】：

“没有

我编辑了我的问题，抱歉@cezar。希望现在很清楚......

【参考方案1】：

（几乎）使用 Django 一切皆有可能！ ;)

您只需将 JavaScript 代码放在一个单独的 HTML 文件中，然后将其包含在您的主模板中（此处为：page.html），如下所示：

% include 'path/to/my/template_file/js_code.html' %

【讨论】：

你是对的。无法使用模板标签（例如 % url '...' % 在 .js 文件中。

但是你的建议很棒，非常感谢！

@Leistungsabfall：您是否 100% 确定模板标签不能在 .js 文件中使用？我记得很清楚，我在视图中创建了 .txt 文件并在其中使用了模板标签。我不认为模板标签只能在 .html 文件中使用。

@cezar 要在文件中使用模板标签，它们必须由 Django 提供。也许有一些丑陋的解决方法迫使 Django 也提供 .js 文件而不是通常的静态文件，但恕我直言，这比上面发布的解决方案复杂得多。

@Leistungsabfall 是的，你是对的。我在写完评论后想到了这一点。通过 django 视图生成带有模板标签的 .js 文件不是问题。在使用该 .js 文件之后出现问题。

【参考方案2】：

您可能希望使用django-js-reverse 能够在 js 文件中使用命名的 URL 模式。 您还可以使用staticfiles 应用程序在 Django 中管理您的静态资产。

这将允许您以这种方式包含您的 js 文件：

% load static %  # Only load static once at the top of your file #
<script src="% static 'path/to/js/in/staticfiles.js' %"></script>

并且在js文件中可以使用：

$('#js-tag').html(Urls.home());