// 定义pjax 预设pjax
(function() {
if (typeof Pjax === 'undefined') {
console.error('Pjax library is not loaded.');
return;
}
var pjax = new Pjax({
// 这里填写页面中改变的部分(和 CSS 选择器用法一样)
selectors: ["title", "#pjax-container"],
// ★ cacheBust 保持 false:重复导航靠浏览器 HTTP 缓存秒出(实测 1ms)。
// 开 true 会给每次 PJAX 加时间戳绕开缓存 → 每次导航多付 ~200-380ms
// 网络往返(2026-10-07 实测,用户可感知的「点 nav 卡一下」)。
// 新鲜度由两层兜底:① 部署换样式表指纹后,下方 pjax:success 的版本
// 同步自动整页刷一次;② CDN 的 HTML 缓存 TTL 应调短(控制台配置)。
cacheBust: false,
elements: "a", // 拦截所有链接
switches: {
"#pjax-container": Pjax.switches.default
}
});
// 将 pjax 实例挂载到 window 以便调试或外部访问
window.pjax = pjax;
console.log("Pjax initialized:", pjax);
})();
// ── 静态资源版本同步(修复「部署后 PJAX 页面样式裸奔」)──
// ─────────────────────────────────────────────────────────────
// 根因:Pjax 只换 title 和 #pjax-container,
里的指纹 CSS
// (style.min..css)一旦因部署换了指纹,**旧会话**里所有后续
// PJAX 页面都跑在旧样式上 —— 新 HTML 的类(.ab-* 等)在旧 CSS 里
// 不存在 → 内容裸奔成纯文本(2026-10-07 关于页上线实锤)。
//
// 解法:pjax:success 时事件对象上带有本次请求(pjax 库把 options 的
// 键直接拷到 event 上,options.request = XMLHttpRequest),从
// responseText 解析出新页面的样式表指纹,与当前 document 比对;
// 不一致 → 整页 reload 一次拿全新资源(sessionStorage 保证每次会话
// 至多一次,防异常情况下的循环刷新)。
document.addEventListener("pjax:success", function (e) {
var request = e.request;
if (!request || typeof request.responseText !== "string" || !request.responseText) return;
var fetchedLinks, currentLinks, i, changed = false;
try {
var doc = new DOMParser().parseFromString(request.responseText, "text/html");
fetchedLinks = doc.querySelectorAll('link[rel="stylesheet"]');
currentLinks = document.querySelectorAll('link[rel="stylesheet"]');
} catch (err) { return; }
if (fetchedLinks.length !== currentLinks.length) {
changed = true;
} else {
for (i = 0; i < fetchedLinks.length; i++) {
if (fetchedLinks[i].getAttribute("href") !== currentLinks[i].getAttribute("href")) {
changed = true;
break;
}
}
}
if (!changed) return;
try {
if (sessionStorage.getItem("pjaxVerReload")) return; // 本会话已刷过
sessionStorage.setItem("pjaxVerReload", "1");
} catch (err) { /* 隐私模式等拿不到 sessionStorage:直接刷,概率极低 */ }
console.info("[pjax] 检测到样式表版本变化,整页刷新以加载新资源");
window.location.reload();
});
// UIKit 重新扫描(PJAX 必需)
// ─────────────────────────────────────────────────────────────
// UIKit 只在页面加载时做一次「全量 boot」:它遍历 document.body,把带
// uk-* 属性的元素逐个 connect 成组件。PJAX 换入的 DOM 是我们用
// innerHTML 塞进去的,UIKit 的 MutationObserver 虽然监听了 childList,
// 但因为「换入前属性就已存在」,observer 拿不到 attribute 的新增事件,
// 加上 PJAX 的替换发生在 UIKit 首次 boot 之后,组件就永远绑不上。
//
// 症状:uk-scrollspy 的元素停在 visibility:hidden(动画类的初始态),
// 下折叠的内容永久不可见,滚动也不会出现。
//
// 解法:换页后手动调一次 UIkit.update()。它会从传入节点向上走到
// document.body,再对整棵子树递归 connect —— 正好补上这次 boot。
function reinitUIKit(root) {
if (typeof window.UIkit === 'undefined' || typeof window.UIkit.update !== 'function') return;
var target = root || document.getElementById('pjax-container') || document.body;
try {
window.UIkit.update(target);
} catch (e) {
console.warn('UIkit.update failed:', e);
}
}
// 暴露给页面脚本:动态插入带 uk-* 属性的内容后,调一次即可让 UIKit 生效
window.reinitUIKit = reinitUIKit;
// pjax预先加载代码
function pjax_reload() {
console.log("Pjax reload triggered");
// 给pjax容器加入css过渡动画
// var pjaxContainer = document.getElementById("pjax-container");
// if (pjaxContainer) pjaxContainer.classList.add("uk-animation-slide-bottom-small");
// 评论区过渡动画
var selectors = [
".comment-meta",
".comment-author vcard",
".comment-metadata",
".comment-content",
".reply"
];
selectors.forEach(function(selector) {
document.querySelectorAll(selector).forEach(function(el) {
el.setAttribute("uk-scrollspy", "cls: uk-animation-fade; delay: 100");
});
});
// 说说页面过渡动画
var shuoshuoBody = document.getElementById("shuoshuo_body");
if (shuoshuoBody) {
shuoshuoBody.setAttribute("uk-scrollspy", "target: > .shuoshuo; cls: uk-animation-fade; delay: 250");
}
}
function refreshHeatmap() {
if (typeof renderHeatmap === 'function') {
try {
renderHeatmap();
} catch (e) {
console.error('renderHeatmap error:', e);
}
}
}
// pjax发送时期
document.addEventListener("pjax:send", function () {
// pjax动画减少圆圈动画
NProgress.configure({
showSpinner: false
});
// pjax执行动画开始
NProgress.start(); //加载动画效果开始
});
// Pjax 成功后,重新加载下面的函数
document.addEventListener("pjax:success", function () {
// 重载图片懒加载插件的js
if (typeof lazyLoadInit === 'function') {
lazyLoadInit({
// coverColor: "white",
// coverDiv: "优世界·一个记录生活点滴的小站
",
offsetBottom: 50,
offsetTopm: 50,
showTime: 1100,
queueInterval: 100
});
}
// 激活文章图片灯箱
if (window.ViewImage) {
ViewImage.init('.post-content img');
}
if (typeof window.refreshFloatingTools === 'function') {
window.refreshFloatingTools();
}
});
// pjax加载完成
document.addEventListener("pjax:complete", function () {
// 立即执行:进度条、基础 UI
if (typeof NProgress !== 'undefined') NProgress.done();
pjax_reload();
// ★ 关键:pjax_reload() 里刚给评论/说说等元素新加了 uk-scrollspy 属性,
// 此刻连同换入的整棵新 DOM 一起交给 UIKit 重新 boot一遍。
// 必须在 pjax_reload() 之后调用,否则新加的属性会被漏掉。
// (关于页的分节动画也走 UIKit scrollspy,所以同样靠这一步复活。)
reinitUIKit();
// 动态加载页面特定JS(PJAX适配)
// 检测当前页面是否为文章详情页,如果是则加载page-only.js
var currentPath = window.location.pathname;
var isArticlePage = document.querySelector('#Comments') !== null ||
document.querySelector('.post-content') !== null;
if (isArticlePage && !window._pageOnlyLoaded && window._pageOnlyScriptUrl) {
// 动态加载page-only.js(使用Hugo fingerprint后的正确URL)
var script = document.createElement('script');
script.src = window._pageOnlyScriptUrl;
script.onload = function() {
window._pageOnlyLoaded = true;
console.log('page-only.js loaded for PJAX navigation');
// 初始化Artalk等
if (typeof window.initArtalk === 'function') {
try { window.initArtalk(); } catch(e) { console.error('initArtalk error:', e); }
}
if (typeof window.initParagraphComments === 'function') {
try { window.initParagraphComments(); } catch(e) {}
}
};
document.body.appendChild(script);
}
// 下一帧执行:轻量初始化
requestAnimationFrame(function() {
if (typeof initCodeCopy === 'function') initCodeCopy();
if (typeof window.initSearch === 'function') {
try { window.initSearch(); } catch(e) {}
}
if (typeof window.refreshFloatingTools === 'function') {
window.refreshFloatingTools();
} else if (typeof window.initFloatingTools === 'function') {
try { window.initFloatingTools(); } catch(e) {}
}
// 文章动画
if (typeof window.initPostScrollspy === 'function') window.initPostScrollspy();
});
// 空闲时执行:非关键功能
var idle = window.requestIdleCallback || function(fn) { return setTimeout(fn, 200); };
idle(function() {
if (typeof window.initParagraphComments === 'function') {
try { window.initParagraphComments(); } catch(e) {}
}
if (typeof window.initInfiniteScroll === 'function' && window.enableInfiniteScroll) {
window.initInfiniteScroll();
}
if (typeof window.initLinkStatus === 'function') {
try { window.initLinkStatus(); } catch(e) {}
}
if (typeof window.initArtalk === 'function') {
try { window.initArtalk(); } catch(e) {}
}
if (typeof window.bsz_fetch === 'function') {
try { window.bsz_fetch(); } catch(e) {}
}
if (typeof window.initImageFrameReveal === 'function') {
try { window.initImageFrameReveal(); } catch(e) {}
}
// 链接卡片和中英文间距(DOM 扫描,非关键)
if (typeof window.initLinkify === 'function') window.initLinkify();
if (typeof window.initPangu === 'function') window.initPangu();
});
// 延迟:代码折叠
setTimeout(function() {
if (typeof window.initCodeFold === 'function') window.initCodeFold();
}, 300);
});