hexo引入js的方法

在使用Hexo搭建个人博客或网站时，有时需要引入JavaScript来实现一些交互功能或特定效果。下面将详细介绍几种在Hexo中引入js的方法。

方法一：在页面模板中直接引入

找到你要添加js的页面模板文件，通常在 themes/your-theme/layout/ 目录下。例如，如果要在文章页面引入js，可以编辑 article.ejs 文件。在文件中合适的位置，比如在 </body> 标签之前，使用 <script> 标签来引入js文件。

<script src="/js/your-script.js"></script>

这里的路径是相对于网站根目录的。你需要确保你的js文件存放在 source/js/ 目录下，这样Hexo在编译时就能正确找到并处理。

方法二：使用Hexo的脚本注入功能

Hexo提供了一种更灵活的方式来注入脚本，通过 _config.yml 文件。打开主题目录下的 _config.yml 文件，找到 scripts 字段（如果没有则自行添加）。

scripts:
  - /js/your-script.js

同样，路径是相对于网站根目录的。这种方法的好处是，你可以统一管理所有要注入的脚本，而且可以方便地控制脚本的加载顺序。

方法三：使用npm包管理js依赖

如果你使用了一些npm包作为js依赖，可以先在项目根目录下初始化npm项目：

npm init -y

然后安装你需要的包，例如：

npm install jquery

安装完成后，在页面模板中引入这些包。对于像jQuery这样的常用库，你可以在 themes/your-theme/layout/_partial/head.ejs 文件中添加：

<script src="/node_modules/jquery/dist/jquery.min.js"></script>

需要注意的是，在生产环境中，建议将这些依赖打包和压缩，以提高网站的加载速度。可以使用Webpack等工具来处理这些任务。

在Hexo中引入js并不复杂，通过上述几种方法，你可以根据自己的需求选择合适的方式来为网站添加交互性和功能。无论是简单的自定义脚本，还是复杂的npm包依赖，都能轻松实现。