如何将js脚本传递给特定的页面类型？

Question

目前，我在 site.js 中拥有所有页面脚本，并像这样通过撇号资产传递它：

module.exports = {
  stylesheets: [...],
  scripts: [
    {
      name: 'site'
    }
]

如何将一些 server/client-side js 代码传递给特定的页面类型？

Answer 1

目前 Apostrophe 并未专门提供执行此操作的方法。令人惊讶的是，将脚本标记添加到页面模板并不是一个糟糕的主意。您可以通过覆盖页面模板中的 extraBody nunjucks 块在 body 标记的末尾加载它：

{% block extraBody %}
  <script src="/modules/my-module/js/special-page.js"></script>
{% endblock %}

由于 Apostrophe 提供指向每个模块资产的符号链接的方式，此路径将在此处找到文件：

lib/modules/my-module/js/special-page.js

这并不可怕的原因是：你推送到 Apostrophe 的 .js 资产被缩小并在每个页面上一起发送......这意味着浏览器缓存它们。但是，如果每种页面类型都有单独的资产 "scenes"，那么将它们一起缩小将需要为每种页面类型单独缩小 "big fat .js file"，并且在不同类型的页面之间移动时不会有缓存优势.

因此，允许 Apostrophe 缩小您 always/nearly 经常使用的内容，并单独发送您很少使用的内容，结果证明在很多时候都是成功的。您将通用内容从缓存中保留下来，只为特定页面类型获取一些自定义内容。

当然，如果您编写这样的脚本标记，撇号不会为您缩小 .js 文件。您可以通过使用自己的 gulp 工作流来构建 .js 文件来解决这个问题，如果您渴望跨浏览器使用 ES6 功能，这对于项目特定代码来说并不罕见。

另请参阅：

Incorporating gulp to compile js in apostrophe?

但请考虑一下...一旦您意识到用户将在一次站点访问中访问多种类型的页面，决定将它们放在一起并让 Apostrophe 将它们一起缩小并不是很大的一步.例外情况应该是当一种页面类型的特殊负载非常非常大并且用户可能不会在大多数站点访问中访问该页面时。在那种边缘情况下，我们也知道会遵循这种技术。 Apostrophe 本身依赖于 ckeditor 的动态加载器来避免在每次登录时推送所有 ckeditor 富文本编辑器代码。

如何将js脚本传递给特定的页面类型？

How to pass js scripts to specific page type?

apostrophe-cms