Question

在我的Apostrophe 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 INSIDE Apostrophe的资产管道（建议最初运行jQuery），您需要从Apostrophe模块推送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

Thanx很多斯图尔特 - 这肯定会让我朝着正确的方向前进：）

然而，我最终要做的就是首先按照您的建议将文件放在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中使用第三方jquery插件

2 个答案: