# Hexo 使用 LeanCloud 获取路径不适配问题

最近在我使用最新评论跳转 post 时遇到了评论链接路径不正确的问题。网站部署在 GitHub Pages 的子目录 /Bananaki/ 下，但最新评论跳转链接却没有包含该子目录，导致页面跳转失败。

# 问题表现

最新评论的链接形式为：
/2025/07/21/日本語テスト/#687d6c11995fce229a966375
但实际正确的路径应该是：
/Bananaki/2025/07/21/日本語テスト/#687d6c11995fce229a966375
缺少了 /Bananaki/ 前缀。

# 尝试过的方案

最初在 Valine 配置中尝试修改 pathname ：

1

options.pathname = '/Bananaki/' + LOCAL.path.replace(/^\//, '');

虽然 Valine 评论功能正常，但 LeanCloud 最新评论组件生成的评论链接并没有被影响，仍旧缺少了子目录路径。

# 解决方案

经过调试，发现 LeanCloud 评论列表是动态渲染的 DOM 元素，Valine 的路径配置无法直接影响这些链接。

因此采用了前端 JS 动态修改的方法：

• 页面加载完毕或 PJAX 刷新后，查找所有最新评论中的链接。
• 如果链接地址不包含 /Bananaki/ 前缀，则自动插入。
• 通过定时器保证在内容加载完成后执行修正。

# 代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function fixCommentLinks() {
  const links = document.querySelectorAll('.leancloud-recent-comment a');
  if (links.length === 0) {
    // 如果评论还没加载完成，延迟重试
    setTimeout(fixCommentLinks, 300);
    return;
  }
  links.forEach(a => {
    const href = a.getAttribute('href');
    if (href && !href.startsWith('/Bananaki/')) {
      a.setAttribute('href', '/Bananaki' + (href.startsWith('/') ? '' : '/') + href);
    }
  });
}

// Valine初始化后调用
vendorJs('valine', function() {
  var options = Object.assign({}, CONFIG.valine);
  options = Object.assign(options, LOCAL.valine || {});
  options.el = '#comments';
  options.pathname = '/Bananaki/' + LOCAL.path.replace(/^\//, '');
  options.pjax = pjax;
  options.lazyload = lazyload;

  new MiniValine(options);

  setTimeout(() => {
    fixCommentLinks();
  }, 1000);
}, window.MiniValine);

# 新增问题

在完成了针对 LeanCloud 最新评论路径的修正后，发现启用 PJAX 后，文章页面的评论区评论无法正常显示。具体表现为：

• 首页和其他页面的最新评论加载正常；
• 进入具体文章页面时，评论区虽被初始化，但评论内容不显示。

该问题源于 PJAX 仅局部刷新页面，Valine 评论组件未能在每次 PJAX 成功后正确重新初始化。

# 解决办法

针对 PJAX 的特点，调整页面刷新逻辑：

• 在 pjax:success 事件中重新初始化 Valine 评论实例，确保评论区内容重新加载；
• 保留对最新评论链接的路径修正，避免影响评论区的正常调用；
• 通过延时执行，确保 DOM 渲染完毕后再操作评论相关元素。

示例关键代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

window.addEventListener('pjax:success', function() {
  // 重新初始化 Valine 评论
  vendorJs('valine', function() {
    var options = Object.assign({}, CONFIG.valine, LOCAL.valine || {});
    options.el = '#comments';
    options.pathname = '/Bananaki/' + LOCAL.path.replace(/^\//, '');
    options.pjax = pjax;
    options.lazyload = lazyload;
    new MiniValine(options);

    setTimeout(() => {
      fixCommentLinks();
    }, 1000);
  }, window.MiniValine);
});

# 其他相关改动说明

• 在 siteRefresh 函数中，Valine 初始化完成后调用 fixCommentLinks() ，确保最新评论链接正确。
• fixCommentLinks 函数支持延迟重试，保证评论链接在内容加载完成后被修正。
• 保留 Valine 配置中的路径设置，确保评论组件功能正常。
• 仅针对 .leancloud-recent-comment a 链接进行路径修正，避免影响其他页面内容。
• 结合 PJAX 刷新机制，确保每次页面切换时评论区和最新评论均能正确加载显示。

# 总结

• 网站部署在子目录时，动态加载的 LeanCloud 评论路径需要特殊处理，防止跳转错误。
• 仅修改 Valine 配置无法完全解决最新评论链接路径问题，需配合前端脚本修正。
• 结合 PJAX 的局部刷新特性，需在每次页面加载后重新初始化评论组件，保证评论区正常显示。
• 本方案简单有效，兼顾了路径修正和 PJAX 兼容性，提升用户体验和页面稳定性。
• 遇到类似问题时，可以参考本文方法灵活调整。

感谢阅读，如有疑问或经验交流，欢迎留言讨论。