fix(pjax): 样式表版本同步修复部署后旧会话裸奔 + 关于页 CSS 冗余清理

- pjax:success 时比对新取 HTML 的样式表指纹,不一致则整页 reload 一次
  (sessionStorage 防循环)—— 根治「部署换了 CSS 指纹后,PJAX 旧会话
  永远跑旧样式」的线上 bug(2026-10-07 关于页裸奔实锤)
- cacheBust: true —— PJAX 请求加时间戳,绕开 HTML 长缓存
- main.css:删整段重复的响应式块/死选择器 .uk-scrollspy-inview .ab-bar/
  死代码 .about-card;.ab-stat 悬停归位进布局区
This commit is contained in:
zqlit committed 2026-10-07 22:54:28 +08:00
1 parent ac7ad23e8c
commit 72bbf9db3e
2 files changed
+57 -36

No files matched your search

+48 -1
View File
@@ -8,7 +8,10 @@
var pjax = new Pjax({
// 这里填写页面中改变的部分(和 CSS 选择器用法一样)
selectors: ["title", "#pjax-container"],
cacheBust: false,
// ★ cacheBust: PJAX 取新页面时在 URL 上加时间戳参数,绕开浏览器/CDN
// 对 HTML 的长期缓存。没有它,HTML 缓存期内 PJAX 会把「部署前的旧页面」
// 直接换进来(站点 HTML 的 Cache-Control 长达数天,踩过实锤)。
cacheBust: true,
elements: "a", // 拦截所有链接
switches: {
"#pjax-container": Pjax.switches.default
@@ -21,6 +24,50 @@
console.log("Pjax initialized:", pjax);
})();
// ── 静态资源版本同步(修复「部署后 PJAX 页面样式裸奔」)──
// ─────────────────────────────────────────────────────────────
// 根因:Pjax 只换 title 和 #pjax-container,<head> 里的指纹 CSS
// (style.min.<hash>.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,把带