尝试改造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​​ （ https://github.com/MoOx/pjax ）。

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

为什么要引入 Pjax

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

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

兼容处理

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

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

document.addEventListener('DOMContentLoaded', function () {
pjax = new Pjax({
    elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox]):not([notallow="return false;"]):not([notallow="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​​，所以主要是用在以下场景：

<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日原始发布于本作者博客]