在撇号 cms 中使用第三方 jquery 插件

Question

在我的撇号 cms 中，我在标题中有一部分是这样的(在 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的文件在Apostrophe的前端资产管道之外运行前端javascript。

要将第三方/自定义 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

非常感谢斯图尔特 - 这绝对把我推向了正确的方向:)

但是，我最终要使其正常工作的是首先按照您的建议将文件放入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'
}
]
};