尝试改造Hexo主题以兼容Pjax
先说结果，暂时没有改造成功。原因是发现 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日原始发布于本作者博客]
👇点击“阅读原文”可恢复文章内所有链接哦！