如何在hexo app

时间:2016-09-28 18:59:56

标签: npm hexo

我正在使用Hexo创建一个Web应用程序。我想在我的一个页面中使用一个名为slick-carousel的包。顺便提一下,这个包还包含jQuery。所以我通过npm成功安装了包(" - save" ed)。该包显示在我的node_modules文件夹和package.json文件中。

我希望在这样做之后,我应该可以在我的markdown文件中访问jQuery和slick功能,但我不知道。当我在浏览器上渲染生成的页面时,我被告知jQuery未定义。'我在这里失去了什么步骤,以便我可以实际使用我已安装的软件包?

以下是我添加到我正在努力工作的markdown文件中的脚本标记:

<script> jQuery(document).ready(function(){ jQuery('.carousel').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true }); }); </script>

我仍然试图完全掌握已安装的软件包与我的其他应用程序之间的关系,所以请原谅我这个问题是否有意义。您可以给予我任何见解或解释,我将不胜感激!

1 个答案:

答案 0 :(得分:1)

仅仅因为脚本在node_modules中,并不意味着它们会自动添加到您的项目前端。

有多种方法可以满足您的需求:

手动移动资产

不是试图摆弄package.json和模块要求,而是获得你想要的最简单的方法是 将jqueryslick-carousel的分发文件移出 将node_modules文件夹放入Hexo可以使用的文件夹中 它们更好(在快速阅读之后它应该是source)然后你 只需将您的JS文件链接到HTML布局中,一切都应该可以正常工作

自动移动资产

使用某种任务工具包(如GulpGrunt),您可以编写任务,自动将资产移出Hexo可访问的文件夹中的node_modules文件夹,Gulp任务看起来像这样:

gulp.task('jquery', function () {
  return gulp.src('./node_modules/jquery/dist/jquery.js')
    .pipe(gulp.dest('./source/js'))
})

使用require(如果支持)

之前我从未使用过Hexo,所以我不知道它的内部结构,但有时可能只是在Javascript文件中使用require来加载已下载的模块,所以你可以使用

window.jQuery = window.$ = require('jquery')

例如,将脚本直接加载为模块。

您可能需要自己测试一下,但这些可能是处理Node.js项目中资产的三种最常用方法。