先说结果，暂时没有改造成功。原因是发现 Pjax 其实非常依赖布局的一致性。而目前自己名为 Gacman 的主题，本质是脱胎于老版本的 Pacman ，各个页面结构差别较大，而 Pjax 在检测到布局差别大的页面时，会自动重新拉取页面，从而失去了局部刷新的特性。

什么是 Pjax

Pjax 通过ajax从服务器获取HTML，然后用加载的HTML替换页面上容器元素的内容。然后，它使用pushState更新浏览器中的当前URL。即 pjax = pushState + ajax 。

它最大的优势在于，可以在网站本身无刷新的情况下，局部刷新内容，同时在现代浏览器中支持前进和后退，由于局部加载的数据量极小，加载速度极快，因此可以最大程度的提升用户体验。

它的天生劣势在于，默认配置对 SEO 并不友好，需要大量改造来优化。

最早的时候，Pjax 是一个基于 jQuery 的插件，后来推出了完全独立的版本，适应更广泛的应用场景。

为 Hexo 引入 Pjax

很多较早使用 Pjax 的 Hexo 主题，都使用了基于 jQuery 的版本。由于我是新引入，所以使用了最新的独立版本的 Pjax （ github.com/MoOx/pjax ）。

1

<script src="https://cdn.jsdelivr.net/npm/pjax@VERSION/pjax.min.js"></script>

为什么要引入 Pjax

其实原因超简单，因为最近迷上了 精神氮泵 ，也是晚上肝代码肝图的有效工具。于是在网易云音乐做了个专辑，想放到博客里。

但是如果不进行改造，跳转页面肯定会引起播放器中断，于是就想到了利用 Pjax 的特性，局部加载核心内容，而不影响播放器。

兼容处理

查了不少资料，整体是参考 Volantis6 主题 Pjax 版的开发文档。

首先独立版的 Pjax 工作方式其实特别好理解。例如初始化：

 1 2 3 4 5 6 7 8 9101112131415

document.addEventListener('DOMContentLoaded', function () {  pjax = new Pjax({    elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([onclick="return false;"]):not([onclick="return!1"]):not([target="_blank"]):not([target="view_window"]):not([href$=".xml"])', // 丁仪    selectors: [      "head title", // 标题      "head meta[name=keywords]", // 关键词      "head meta[name=description]", // 描述      ".pjax",      "pjax", // <pjax></pjax> 标签      "script[data-pjax], .pjax-reload script" // script标签添加data-pjax 或 script标签外层添加.pjax-reload 的script代码段重载    ],    cacheBust: <%= theme.plugins.pjax.cacheBust %>,   // url 地址追加时间戳，用以避免浏览器缓存    timeout: <%= theme.plugins.pjax.timeout %>,  });});

然后是标签部分，当然，在我主题中是轻量使用 Pjax，所以主要是用在以下场景：

12345678

<div class="pjax">我是将被pjax重载的内容</div><script data-pjax>我是将被pjax重载的内容</script><div class="pjax-reload">    <div>        <div>我不是将被pjax重载的内容</div>        <script>我是将被pjax重载的内容</script>    </div></div>

问题

看上去都很顺畅，但是后来实际测试问题非常多。

调整

我为了模块化管理，把一些脚本都放到各个模块的 ejs 中了，这就造成管理重载内容非常麻烦，需要每个地方单独改，否则就需要整理到一个地方统一处理。总之都很麻烦。

然而我还是耐着性子花了几乎一个通宵处理好了所有模板（除了评论外）。

布局

这个是最严重的问题，独立版的 Pjax 会自动检测布局变化，如果变化过大，则会重载整个页面。

实际测试就发现非常容易触发重载，尤其是 page 和 post ，因为这两个部分原本的处理就完全不同。测试了一下，如果完全相同，则不会触发重载。

所以，最终由于这个原因，我给 Pjax 版的博客打了个分支，还是继续使用老版的主题了。

[2023年01月27日原始发布于本作者博客]

👇点击“阅读原文”可恢复文章内所有链接哦！

阅读原文： www.gsgundam.com/2023/01/202…