引入 Pjax 以加速网页切换速度

[PJ-568]

引入 Pjax 以加速网页切换速度

引入 Pjax 后一些主题相关的 JS 需在每次 Ajax 时重载，鄙人才疏学浅，无法定位相关 JS 。 本主题有计划添加 Pjax 支持吗？

目前发现的问题：

• [x] #back-to-top 返回页顶按钮在 Pjax 后消失；
• [x] Pjax 后 footer 消失，疑似与上一条相关；
• [x] 语法高亮不可用；
• [x] 代码框样式不同，无法折叠，无复制按钮；
• [x] 图片不显示描述，无法点击查看大图；
• [x] 移动端导航栏目录遮罩失效（缺少 div#toc-mask ）；
• [ ] pace 加载进度条应在首次页面加载后或在 Pjax 开始加载时触发（默认设置会在 Ajax 时自动加载但在某些情况下无法触发，最好手动触发）；

此方案后的网站：blog.PJ568.sbs

引入方式

方案选择

• MoOx/pjax

设置并初始化 Pjax

// 初始化并设置哪些需要改变
var pjax = new Pjax({
    selectors: [
        "head title",
        ".columns",
        ".navbar-start",
        ".navbar-end",
        ".searchbox",
        "#back-to-top",
        "[data-pjax]",
        ".pjax-reload"
    ],
});

// 包含一些 Pjax 加载后需要重新执行的函数
function pjax_reload() {
    // 需要重新执行的函数写在这
}

// 监听 Pjax 完成后，重新加载上面的函数
document.addEventListener("pjax:complete", function () {
    pjax_reload();
});

脚本中添加了 .pjax-reload 和 [data-pjax] 。若切换页面时，某些元素需重新加载，可添加 .pjax-reload 到该元素，脚本可添加 [data-pjax] 属性。

利用 Hexo 注入器功能引入 Pjax 和初始化脚本：

const js = hexo.extend.helper.get('js').bind(hexo);

hexo.extend.injector.register('head_end', () => {
  return js('//lib.baomitu.com/pjax/0.2.8/pjax.min.js');
});

hexo.extend.injector.register('head_end', () => {
  return js('/js/SetPjax.js');
});

---

相关 issues 和 Discussions ：

• 1269

• 992

• 722

• 649

• 507

• Icarus 有添加 pjax 的计划吗