feat(关于页): 重设计为「时间线 + 数据一览」版式,动效对齐全站 UIKit 范式
- 版式:01 关于我(属性四行 + 时间线四节点 + 三张数据卡 + 分类 Top5 条, 全部构建期实时统计,新增 partial about-intro.html)+ 02 这个博客 + 03 走心 评论 + 04 热力图,间距统一由 .about-sec 管,字号统一四档 - 动效:纯官方 UIKit scrollspy(与归档页同源)—— target 一律后代选择器、 动画类用 uk-animation-slide-*-medium(50px 位移)+ repeat:true 滚回重播、 分节标题 fade 不 repeat;删自研编排器,CSS 只留分类条宽度填充与 prefers-reduced-motion 守卫 - 修复 PJAX 下 UIKit 不重绑的既有 bug:mypjax.js 换页后调 UIkit.update() (评论区/说说的 scrollspy 同样依赖此修复) - 走心评论:骨架屏、8s 超时、sessionStorage 缓存(10 分钟)、重试按钮; 异步渲染后手动 UIkit.update() 让卡片参与入场级联
This commit is contained in:
1 parent
a884180787
commit
654de1fdf0
7 files changed
+692
-88
No files matched your search
@@ -21,6 +21,32 @@
|
||||
console.log("Pjax initialized:", pjax);
|
||||
})();
|
||||
|
||||
// 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");
|
||||
@@ -99,6 +125,12 @@ document.addEventListener("pjax:complete", function () {
|
||||
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;
|
||||
|
||||
Reference in new issue
Block a user