在 Hexo 中添加自己的 JS 文件之前，需要先理解 Hexo 对不同类型文件的处理原理。

Hexo 核心处理逻辑

Hexo 对文件的处理总体上分为两类：

1. 渲染（Render）

  • Hexo 会将源文件转换为 HTML 或其他可输出格式。
  • 通常针对：
    • Markdown (.md)
    • EJS (.ejs)
    • Swig (.swig)
    • YAML (.yml) 等模板文件
  • 渲染后输出到 public/ 目录，会生成最终的 HTML 页面。

2. 原样复制（Copy）

  • Hexo 会直接把源文件拷贝到 public/，不会修改内容。
  • 通常针对：
    • CSS 文件
    • JS 文件
    • 图片
    • 字体等静态资源
  • 也可以通过 skip_render 配置强制跳过渲染。

⚠️ 注意：JS 文件如果放在 source/ 下，需要配合 skip_render，防止被 Hexo 当作模板渲染，生成 HTML 或纯文本。

Hexo 添加 JS 的解决方案

在添加 JS 文件时，需要明确 JS 的类型和用途。

1. 根目录 scripts/script.js（服务端 JS）

  • 放在项目根目录的 scripts/ 下。
  • Hexo 在每次运行时由 Node.js 执行该脚本。
  • 适合用于扩展 Hexo 功能，例如：
    • 注册 Filter
    • 注册 Generator
    • 注册 Helper
  • ⚠️ 不会直接生成到网站前端。

2. 浏览器端 JS：source/js/script.js

  • 放在 source/ 下，例如 source/js/script.js。
  • Hexo 会 原样复制 到 public/js/script.js（需配置 skip_render）。
  • 在网页中通过 <script> 标签引用：
1
<script src="/js/script.js"></script>

全局 JS

next 的全局 JS 的解决方案是 因为每个页面都有 footer 组件 那么我们可以在 footer 组件里面放入一个 script 标签 这样每次都可以运行全局脚本

局部 JS

可以在想要的组件里面添加 script 标签

⚠️ 关于 custom_file_path ：这个参数本意是想让你指定 html 文本类直接注入到 index.html 中，倒是也可以添加一些全局 JS 文件，但是请写上 <script> 包裹你的脚本

JS 执行顺序

Hexo 核心 JS -> 主题自带 JS -> 第三方插件 JS -> 用户自定义 JS

所以你完全不用担心 JS 执行顺序带来的 bug

⚠️ CSS 同理 JS