在 Apostrophe cms 中使用第 3 方 jquery 插件

Question

在我的撇号 cms 中，我在 header 中有一部分像这样（在 outerLayout.html 文件中）：

<div id="sticky-header">
...
</div>

我在页脚中做了以下操作：

<script src="/thirdparty/jquery/jquery-3.2.1.min.js"></script>
<script src="/thirdparty/sticky/jquery.sticky.js"></script>

我知道撇号以某种方式包含 jQuery，但如果我自己不包含它，我会在控制台中收到错误消息：

jquery.sticky.js:22 Uncaught ReferenceError: jQuery is not defined
at jquery.sticky.js:22
at jquery.sticky.js:24

我在其中一个 always.js 文件中也有以下内容

$("#sticky-header").sticky({
    topSpacing:0,
    zIndex:1000
});

这会产生错误：

always.js:109 Uncaught TypeError: $(...).sticky is not a function
at always.js:109

我该如何解决这个问题？

Answer 1

在您的情况下，您需要推送自己的 jQuery 副本的原因是，包括来自 outerLayout 的文件是运行ning 前端 javascript 外部Apostrophe 的前端资产管道。

要将您的第 3 方/自定义 javascript 包含在 Apostrophe 的资产管道中（推荐，jQuery 最初是运行），您需要推送 javascript来自撇号模块的文件。

最快的前进路径是从 apostrophe-assets 模块推送资产，该模块应该已经在您的项目中。

在app.js

...
'apostrophe-assets': {
      scripts: [
        {
          name: 'yourFile'
        }
      ]
    },
...

这将加载 lib/modules/apostrophe-assets/public/js/yourFile.js

更多关于将资产推送到浏览器的信息http://apostrophecms.org/docs/tutorials/getting-started/pushing-assets.html

以后您可能希望通过适当的模块来组织前端资产，而不是将它们全部放入堆中，这将是一个很好的参考 http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html#adding-a-java-script-widget-player-on-the-browser-side

另外，当你推送时你可以期待什么 javascript http://apostrophecms.org/docs/tutorials/getting-started/custom-widgets.html#what-39-s-available-in-the-browser

Answer 2

非常感谢 Stuart - 这无疑将我推向了正确的方向:)

然而，为了使它起作用，我最终所做的是首先按照您的建议将文件放入 lib/modules/apostrophe-assets/public/js/，然后编辑 lib/modules/apostrophe-assets/index.js 文件：

module.exports = {
    stylesheets: [
        {
            name: 'site'
        }
    ],
    scripts: [
        {
            name: 'bootstrap/js/bootstrap.min'
        },
        {
            name: 'sticky/jquery.sticky'
        },
        {
            name: 'scrollto/jquery.scrollTo.min'
        }
    ]
};

在 Apostrophe cms 中使用第 3 方 jquery 插件

Using 3rd party jquery plugins in Apostrophe cms

node.js

apostrophe-cms