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

Question

目前，我在 site.js 中拥有所有页面脚本，并通过 apostrophe-assets 传递它，如下所示:

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

如何将一些服务器/客户端 js 代码传递给特定的页面类型？

Answer 1

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

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

由于 Apostrophe 提供指向每个模块 Assets 的符号链接(symbolic link)的方式，此路径将在此处找到文件:

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

这并不可怕的原因是:你推送到 Apostrophe 的 .js Assets 被缩小并在每个页面上一起发送......这意味着浏览器缓存它们。但是如果每种页面类型都有单独的 Assets “场景”，那么将它们一起缩小将需要为每种页面类型单独缩小“大胖 .js 文件”，并且在不同类型的页面之间移动时不会有缓存优势.

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

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

另见:

Incorporating gulp to compile js in apostrophe?

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