wordpress-kratos-yang

95 Commits 1 Branch 0 Tags

2 Commits

Include renames

Author	SHA1	Message	Date
laoyang	f3583e07c5	perf(lightbox): 点开图片不再白屏干等，先糊后清 #10 用户反馈：点一张图之后先是白背景渲染出来，图片迟迟不出现，感觉特别慢。实测归因（_v40_slow.py，自建慢速 HTTP 服务，3.2 Mbps）： · 遮罩可见 31ms —— 纯 CSS 底色，一帧就画完，从来不是瓶颈 · 图片有像素 6 秒后仍然没有线上原图最大 3.2MB（PUA的两面性与界定-scaled.png），3Mbps 下要 8 秒以上，这段时间屏幕上是整片白 + 一个 0x0 的空 img。三层改造： 1. 缩略图占位（blur-up）：点开瞬间把正文里已经解码过的 currentSrc 顶上， 0 延迟就有像素；原图到了再淡入覆盖。 2. 原图淡入：is-ready 后 opacity 0→1，避免看到渐进渲染的半张图。 3. 空闲预取：requestIdleCallback 里串行预取视口上下 1.5 屏内的原图，用 new Image() 不塞 DOM；尊重 saveData / slow-2g。 CSS 的 .yang-lb-stage 从 flex 改 grid，占位层/原图/转圈都 grid-area:1/1 叠在同一个格子（flex 会让子元素并排，absolute 又不参与居中）。实测（_v40_opt2.py，5/0）：立刻点（最坏）遮罩 25ms · 首帧有像素 25ms · 原图 15012ms 读 12 秒后点遮罩 25ms · 首帧有像素 25ms · 原图 25ms（预取命中）服务端各收到 1 次请求，预取一次命中、没有重复下载。验证：交互 245/0（新增 J 段占位层与加载态 45 条）· 服务端 55/0（8.4+8.5） · 演示页 34/0 · 反向验证 27/27（新增 U11~U14） Refs #10	2026-10-25 23:03:13 +08:00
laoyang	7125fdd3ce	feat(lightbox): 正文图片点击在当前页放大、多图轮播、键盘切换新增主题自带的图片灯箱，替代「点图片跳新标签页」的旧行为，不再依赖第三方灯箱插件。主要能力 · 正文里的图片链接改写成「在当前页覆盖展示原图」，不跳转 · 原图优先按附件 ID 取 full size（wp_get_attachment_image_src），取不到才退回 href 自己 —— 不在前端从缩略图文件名反推原图地址 · 原图地址写在 href 里而不是 data-full：主题的 CDN 是整页输出缓冲改写，只认 src= / href= 与 CSS url()，写 data-* 会绕回源站 · 多图左右箭头轮播（到头循环），键盘 ←↑ / →↓ 切换、Esc 关闭、 Home / End 跳首尾，点空白关闭，打开时锁滚动并在关闭后归还焦点 · 两套遮罩配色（白色默认 / 深色）与九档不透明度（默认 80%） · 图片本身始终保持不透明：透明度只作用在遮罩底色上兼容性处理 · 剥掉第三方灯箱插件留下的触发属性（data-rel / data-imagelightbox / data-rl_title 等）。线上实测 100 篇文章 112 张图全部带这些属性，若只「让给插件」则主题灯箱永不生效；同时关掉开关时一律不动，插件可照常工作 · 移除 imgnofollow() 给图片链接加的 target="_blank" 与 rel，链接不再承担跳转职责 · 无 JS 时 href 仍在，右键「在新标签页打开图片」照常可用可读性 · 半透明遮罩下底部说明条自带更实的底（≥0.9），并按「遮罩底下是纯黑」的最坏情况验证文字对比度 ≥ 4.5:1 · 行内不透明度样式用 [data-theme] 选择器，避免被样式表默认值压掉（裸类名优先级不足，会让深色配色下透明度静默失效）验证 · 服务端正文改写探针 51 通过 / 0 失败（PHP 8.4 与 8.5） · 浏览器真实交互探针 200 通过 / 0 失败（两配色 × 80%，含 50%/100%） · 上述两者的反向验证 21 项注入全部按预期捕获 · 三个改动文件 php -l 通过 Refs #10	2026-10-25 22:05:24 +08:00

Author

SHA1

Message

Date

laoyang

f3583e07c5

perf(lightbox): 点开图片不再白屏干等，先糊后清 #10

用户反馈：点一张图之后先是白背景渲染出来，图片迟迟不出现，感觉特别慢。

实测归因（_v40_slow.py，自建慢速 HTTP 服务，3.2 Mbps）：
  · 遮罩可见 31ms      —— 纯 CSS 底色，一帧就画完，从来不是瓶颈
  · 图片有像素 6 秒后仍然没有
线上原图最大 3.2MB（PUA的两面性与界定-scaled.png），3Mbps 下要 8 秒以上，
这段时间屏幕上是整片白 + 一个 0x0 的空 img。

三层改造：
1. 缩略图占位（blur-up）：点开瞬间把正文里已经解码过的 currentSrc 顶上，
   0 延迟就有像素；原图到了再淡入覆盖。
2. 原图淡入：is-ready 后 opacity 0→1，避免看到渐进渲染的半张图。
3. 空闲预取：requestIdleCallback 里串行预取视口上下 1.5 屏内的原图，
   用 new Image() 不塞 DOM；尊重 saveData / slow-2g。

CSS 的 .yang-lb-stage 从 flex 改 grid，占位层/原图/转圈都 grid-area:1/1
叠在同一个格子（flex 会让子元素并排，absolute 又不参与居中）。

实测（_v40_opt2.py，5/0）：
  立刻点（最坏）  遮罩 25ms · 首帧有像素 25ms · 原图 15012ms
  读 12 秒后点    遮罩 25ms · 首帧有像素 25ms · 原图 25ms（预取命中）
服务端各收到 1 次请求，预取一次命中、没有重复下载。

验证：交互 245/0（新增 J 段占位层与加载态 45 条）· 服务端 55/0（8.4+8.5）
· 演示页 34/0 · 反向验证 27/27（新增 U11~U14）

Refs #10

2026-10-25 23:03:13 +08:00

laoyang

7125fdd3ce

feat(lightbox): 正文图片点击在当前页放大、多图轮播、键盘切换

新增主题自带的图片灯箱，替代「点图片跳新标签页」的旧行为，
不再依赖第三方灯箱插件。

主要能力
· 正文里的图片链接改写成「在当前页覆盖展示原图」，不跳转
· 原图优先按附件 ID 取 full size（wp_get_attachment_image_src），
  取不到才退回 href 自己 —— 不在前端从缩略图文件名反推原图地址
· 原图地址写在 href 里而不是 data-full：主题的 CDN 是整页输出缓冲
  改写，只认 src= / href= 与 CSS url()，写 data-* 会绕回源站
· 多图左右箭头轮播（到头循环），键盘 ←↑ / →↓ 切换、Esc 关闭、
  Home / End 跳首尾，点空白关闭，打开时锁滚动并在关闭后归还焦点
· 两套遮罩配色（白色默认 / 深色）与九档不透明度（默认 80%）
· 图片本身始终保持不透明：透明度只作用在遮罩底色上

兼容性处理
· 剥掉第三方灯箱插件留下的触发属性（data-rel / data-imagelightbox /
  data-rl_title 等）。线上实测 100 篇文章 112 张图**全部**带这些属性，
  若只「让给插件」则主题灯箱永不生效；同时关掉开关时一律不动，
  插件可照常工作
· 移除 imgnofollow() 给图片链接加的 target="_blank" 与 rel，
  链接不再承担跳转职责
· 无 JS 时 href 仍在，右键「在新标签页打开图片」照常可用

可读性
· 半透明遮罩下底部说明条自带更实的底（≥0.9），并按「遮罩底下是
  纯黑」的最坏情况验证文字对比度 ≥ 4.5:1
· 行内不透明度样式用 [data-theme] 选择器，避免被样式表默认值压掉
  （裸类名优先级不足，会让深色配色下透明度静默失效）

验证
· 服务端正文改写探针 51 通过 / 0 失败（PHP 8.4 与 8.5）
· 浏览器真实交互探针 200 通过 / 0 失败（两配色 × 80%，含 50%/100%）
· 上述两者的反向验证 21 项注入全部按预期捕获
· 三个改动文件 php -l 通过

Refs #10

2026-10-25 22:05:24 +08:00