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

[PJ-568]

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

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

目前发现的问题：

• #back-to-top 返回页顶按钮在 Pjax 后消失；
• Pjax 后 footer 消失，疑似与上一条相关；
• 语法高亮不可用；
• 代码框样式不同，无法折叠，无复制按钮；
• 图片不显示描述，无法点击查看大图；
• 移动端导航栏目录遮罩失效（缺少 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
• 请添加pjax #992
• 希望加入pjax功能 #722
• Problem occur when using Pjax/Pjax函数重载问题 #649
• 刷新问题 #507
• Icarus 有添加 pjax 的计划吗

[am-abudu]

发现在引入pjax之后，若网站设置背景，加载网页时会出现白色遮罩，导致体验割裂。请求解决方案

解决方案是为

<link rel="stylesheet" href={url_for('/css/' + variant + '.css')} />

去除data-pjax标签，目前没有发现问题