尝试改造Hexo主题以兼容Pjax

文章目录

1. 1. 什么是 Pjax
2. 2. 为 Hexo 引入 Pjax
3. 3. 为什么要引入 Pjax
4. 4. 兼容处理
5. 5. 问题
   1. 5.1. 调整
   2. 5.2. 布局

先说结果，暂时没有改造成功。原因是发现 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([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，所以主要是用在以下场景：

<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 版的博客打了个分支，还是继续使用老版的主题了。