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
This commit is contained in:
2026-10-25 22:05:24 +08:00
parent 203721b1fe
commit 7125fdd3ce
6 changed files with 1367 additions and 1 deletions
+87
View File
@@ -1054,6 +1054,93 @@ function kratos_options()
'type' => 'info',
);
/* ══════════════════════════════════════════════════════════
* 十二、图片灯箱 —— 正文图片点击在当前页放大
*
* 放在 CDN 之后:灯箱里加载的原图地址会被 CDN 一起改写,
* 两者是相关的,放近一点方便对照着调。
*
* ⚠️ 这里的 std 必须与 inc/theme-lightbox.php 的运行时默认值一致
* (yang_lightbox_active() / yang_lightbox_theme())。
* `std` 只服务「后台预填」和「恢复默认」,**运行时完全不读**;
* 两处不一致会出现「后台看着勾上了、前台却没生效」。
* ══════════════════════════════════════════════════════════ */
$options[] = array(
'name' => __('图片灯箱', 'kratos'),
'type' => 'heading',
);
$options[] = array(
'name' => __('启用图片灯箱', 'kratos'),
'desc' => __('点击正文里的图片,<b>在当前页面</b>覆盖展示原图,不再跳新标签页。'
. '一篇文章有多张图时可以左右切换,也支持键盘方向键。'
. '<br><b>说明:</b>这些图在正文里通常是缩略图,点开后加载的是<b>原图</b>;'
. '若开启了 CDN 加速,原图地址同样走 CDN。'
. '<br>关掉则完全退回原有行为(点击在新标签页打开图片)。', 'kratos'),
'std' => '1',
'id' => 'a_lightbox_enable',
'type' => 'checkbox',
);
/* 遮罩配色的两个单选项
*
* 用户先要「黑底也行、不黑也行」,看了两套演示后明确选了**白色**,
* 所以 std 从 dark 改成 light。深色仍然保留:看照片时它更合适
* (周围全黑对颜色判断干扰最小),换站/换内容时可能需要。
* 说明文字里写清各自适合什么图,避免用户反复切换试错。 */
$options[] = array(
'name' => __('遮罩配色', 'kratos'),
'desc' => __('<b>白色</b>(默认)适合以截图、文档、白底图为主的内容,'
. '不会让白底图的边缘发灰。'
. '<br><b>深色</b>适合看照片:周围全黑时对图里颜色的判断更准。', 'kratos'),
'std' => 'light',
'id' => 'a_lightbox_theme',
'type' => 'radio',
'options' => array(
'light' => __('白色遮罩(浅底,看截图与文档)', 'kratos'),
'dark' => __('深色遮罩(黑底,看照片)', 'kratos'),
),
/* 只有灯箱开着时才有意义;关着的时候藏起来,
避免用户改了配色却不知道为什么没变化。 */
'requires' => 'a_lightbox_enable',
);
/* 遮罩不透明度
*
* 用户要求「不一定要把内容全盖住一点都看不见,只突出这张照片就行,
* 透明度 80% 左右」。做成可调而不是写死 80:
* · 各人屏幕亮度不同,80 在别人站上可能偏透或偏实;
* · 以后想临时更实一点(确认底下文字)或更透一点,
* 改一个数字就行,不用等主题更新。
*
* ⚠️ 用 select 而不是文本输入:文本输入让用户自己敲数字,
* 敲出 0 或 300 都是灾难(0 = 完全看不见遮罩,300 = 非法值)。
* 给固定的几档,每个档都验证过可读性。 */
$options[] = array(
'name' => __('遮罩不透明度', 'kratos'),
'desc' => __('数值越小,底下正文透出来越多 —— 能看出自己还停在哪一页,'
. '但正文也越容易干扰看图的注意力。'
. '<br><b>80%(默认)</b>是「隐约可见、照片仍是主角」的平衡点。'
. '低于 70% 时请在深色图片较多的页面上确认一下底部文字是否还看得清。'
. '<br><b>说明:</b>这里改的是<b>遮罩底色</b>的透明度,'
. '照片本身不会被弄淡。', 'kratos'),
'std' => '80',
'id' => 'a_lightbox_opacity',
'type' => 'select',
'options' => array(
'100' => __('100% —— 完全盖住(不透)', 'kratos'),
'95' => __('95% —— 几乎不透明', 'kratos'),
'90' => __('90% —— 很实', 'kratos'),
'85' => __('85%', 'kratos'),
'80' => __('80% —— 默认,隐约可见', 'kratos'),
'75' => __('75%', 'kratos'),
'70' => __('70% —— 能明显看到底下', 'kratos'),
'60' => __('60% —— 偏透', 'kratos'),
'50' => __('50% —— 最透(下限)', 'kratos'),
),
'requires' => 'a_lightbox_enable',
);
/* ══════════════════════════════════════════════════════════
* 十三、自定义代码 —— 兜底用,放最后
*