Hexo 部署到 Hugging Face Spaces 踩坑记：完美解决分页 404 跳转问题

摘要：
将 Hexo 博客部署到 Hugging Face Spaces 后，发现点击底部的“下一页”或页码（如 /page/2/）时，会自动跳转回首页或报 404 错误。本文将深入分析原因，并提供一个“核弹级”的 Hexo 脚本，在构建阶段强制修复所有链接。

🛑 问题现象

在本地 (localhost:4000) 调试时，一切正常。点击分页按钮 1, 2, Next 都能正常跳转。

但是，将代码 Push 到 Hugging Face Spaces 后，点击分页链接（例如 /page/2/），会出现以下情况：

302 Found：服务器返回重定向。
Location 跳转：浏览器被强制踢回了 Hugging Face 的主域名，或者显示 404 页面。
URL 结构：原本的链接是 https://.../page/2/#content-inner。

🕵️‍♂️ 原因分析

这个问题的根源在于 本地开发环境 与 线上托管环境 (Hugging Face) 对 URL 的处理逻辑不同。

本地 (hexo s)：Hexo 的服务器非常智能。当你访问 /page/2/#content-inner 时，它会自动寻找该目录下的 index.html 并展示。
线上 (Hugging Face Spaces)：HFS 的静态托管比较“死板”（或者说严格）。它不会自动为目录补全 index.html。
你请求 /page/2/#content-inner，它就真的去找名为 2 的文件。
找不到？它就报错。
唯一解法：必须显式地告诉它访问 /page/2/index.html#content-inner。

🛠️ 解决方案：构建时暴力修复

既然改配置文件 (_config.yml) 无法控制 Hexo 分页器的输出格式，前端 JS 修复又存在加载延迟和不稳定的问题，我们决定采用最稳妥的方案：

编写一个 Hexo Filter 脚本，在 hexo g 生成 HTML 文件的那一刻，直接修改源代码里的链接。

第一步：创建脚本文件

在你的博客根目录（注意：是与 source, themes, _config.yml 同级的位置），新建一个文件夹 scripts（如果已有则直接进入）。

在 scripts 文件夹内，新建文件 fix-page.js。

⚠️ 目录结构示意：

你的博客根目录/
├── source/
├── themes/
├── _config.yml
└── scripts/          <-- 必须放在这里！
    └── fix-page.js

第二步：写入修复逻辑

将以下代码复制到 fix-page.js 中。

这个脚本比网上的普通版本更强大，它解决了锚点失效的问题（即 /page/2/#content-inner 这种链接也能被正确修复）。

// scripts/fix-page.js

// 注册过滤器：在 Hexo 生成 HTML 后自动运行
hexo.extend.filter.register('after_render:html', function(str, data){
  
  // 正则匹配 href="..." 里的所有链接
  return str.replace(/href=["'](\/[^"']+)["']/g, function(match, p1) {
    
    // 1. 排除资源文件和根目录
    if (p1 === '/' || p1.startsWith('/css') || p1.startsWith('/js') || p1.startsWith('/img') || p1.startsWith('/lib')) {
      return match;
    }

    // 2. 锁定目标：只处理 page, archives, tags, categories, guestbook
    if (p1.includes('/page/') || p1.includes('/archives/') || p1.includes('/tags/') || p1.includes('/categories/') || p1.includes('/guestbook/')) {
        
        let newUrl = p1;

        // 情况 A: 链接里有锚点 (比如 /page/2/#content-inner) -> 插在 # 前面
        if (p1.includes('/#')) {
            newUrl = p1.replace('/#', '/index.html#');
        } 
        // 情况 B: 普通链接以 / 结尾 (比如 /page/2/) -> 直接追加
        else if (p1.endsWith('/')) {
            newUrl = p1 + 'index.html';
        }
        // 情况 C: 既没锚点也没斜杠 (比如 /page/2) -> 补全
        else if (!p1.endsWith('index.html') && !p1.includes('#')) {
             newUrl = p1 + '/index.html';
        }
        
        return `href="${newUrl}"`;
    }

    return match;
  });
});

第三步：验证与发布

脚本写好后，不需要任何配置，直接重新生成即可生效。

清理并生成：

hexo clean && hexo g

本地验证（关键）：
进入 public 文件夹，打开 index.html，搜索 page/2。

修改前：<a href="/page/2/">
修改后：<a href="/page/2/index.html">

只要看到 index.html 出现了，就说明脚本生效了。
3. 推送到服务器：

git add .
git commit -m "fix:page"
git push

🎉 最终效果

推送完成后，刷新浏览器查看效果。

现在，再次点击博客底部的分页按钮，链接会变成 /page/2/index.html#content-inner，页面秒开，再也不会出现 404 或跳转回主页的情况了。

总结：
Hugging Face Spaces 虽然免费且强大，但在静态路由上确实比较“直肠子”。通过 Hexo 的 Filter 脚本在构建阶段解决兼容性问题，是最一劳永逸的方法。