1

在我的撇号 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

我该如何解决这个问题？

4

2 回答 2

2

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

要将您的第 3 方/自定义 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时，您可以期待什么

于 2017-08-24T22:26:13.163 回答
0

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

但是，我最终要做的是首先按照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'
        }
    ]
};
于 2017-08-25T09:26:33.633 回答