小记一下Hexo Anzhiyu主题数学公式Katex和pjax冲突问题

这个问题解决方案和懒加载基本一致

问题现象

在使用Anzhiyu主题的Hexo博客中，数学公式（KaTeX）与PJAX功能存在严重冲突：

  1. PJAX跳转异常：通过导航栏或文章链接跳转到另一个包含公式的页面时，公式显示为原始代码（如$E = mc^2$）

image-20251221191833274

  1. 刷新后正常：按F5刷新页面后，公式又能正常显示

image-20251221191843571

问题根源

这个问题和 懒加载图片 与PJAX冲突是同一原理：

  • PJAX：页面切换时不刷新整个页面，只更新内容区域，提升用户体验
  • KaTeX：需要在页面加载完成后执行JavaScript来渲染公式
  • 冲突点：PJAX切换页面后，KaTeX的渲染函数没有被重新调用，导致新页面中的公式保持原始状态

解决方案

打开主题文件\themes\hexo-theme-anzhiyu-1.6.14\source\js\main.js

1
2
3
4
5
6
7
8
9
document.addEventListener('pjax:complete', function() {
    // 延迟执行，确保DOM完全加载
    setTimeout(() => {
      // 重新渲染KaTeX公式
      if (window.KATEX_INITIALIZED && typeof initKatex === 'function') {
        initKatex();
      }
    }, 10);
  });

添加到如下位置

image-20251221192037722

再次测试就成功啦

image-20251221192210521