laoyang/wordpress-kratos-yang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台代码配色预览不高亮（后台未加载 hljs）+ donate.png 404 #14

New Issue
Closed
opened 2026-10-26 03:54:29 +00:00 by laoyang · 2 comments
laoyang commented 2026-10-26 03:54:29 +00:00
Owner
Copy Link
Copy Source

现象

后台「主题设置 → 代码高亮 → 代码配色」切换配色后，下方预览示例代码没有高亮（一片单色文字），
只在顶栏/边框上能看到深/浅变化。控制台另有 donate.png 404。

浏览器控制台报的两行：

load-scripts.php?...:5 JQMIGRATE: Migrate is installed, version 3.4.1
donate.png:1  Failed to load resource: the server responded with a status of 404 ()

根因（已定位）

一、预览不高的高亮：后台从未加载 hljs 本体（主因）

yang_hl_admin_assets() 里只 enqueue 了三个资源，依赖数组全为空、也没有 hljs：

资源 实际 enqueue
yang-hl-admin-card assets/css/highlight.css
yang-hl-admin-preview assets/css/highlight-admin.css
yang-hl-admin-preview（JS） assets/js/highlight-admin.js，deps = array()

而 highlight-admin.js 的 recolor() 第一句就是：

if (!code || !window.hljs) { return; }   // ← 后台永远走这里

hljs 只在前台 wp_enqueue_scripts（yang_hl_enqueue）里加载，且函数开头
if (is_admin() || is_feed()) { return; } 直接挡掉后台。

⇒ 后台 window.hljs 恒 undefined ⇒ recolor() 静默 return，连一行报错都没有
⇒ 预览里只有服务端 esc_html() 出来的纯文本 + 配色 CSS 给的 <pre> 背景色，
token 一个都没有 ⇒ 看起来「只有底色变了、字没高亮」。

这也解释了为什么它看起来像在部分工作：卡片边框、顶栏颜色是 data-kind
驱动的 CSS，不依赖 hljs，所以深/浅切换仍然可见 —— 极容易误判成「预览是好的」。

二、donate.png 404

yang_hl_admin_assets() 之外的问题，与预览无关，但同一屏暴露出来：

inc/theme-option-defaults.php:76-77 的默认值登记的是根相对路径
/assets/img/donate.png，yang_image_default() 拼出来是 ASSET_PATH . $rel；
而当 ASSET_PATH 为空（非 CDN 模式）时拿到的是 /assets/img/donate.png
⇒ 浏览器按站点根解析成 https://yangyq.net/assets/img/donate.png
⇒ 真实文件在 /wp-content/themes/kratos_yang/assets/img/donate.png ⇒ 404。

已实测：主题目录下的 donate.png 存在（559 B），HTTP 直取该正确路径 200。

诉求

  1. 后台预览必须真的高亮，且切换配色后 token 颜色跟着变（不用保存）。
  2. 后台不要再出现 donate.png 404。
  3. 两条都要能用「注入破坏 ⇒ 判据变红」证明判据有效，不能只看截图。

验收标准

  • 后台选项页 window.hljs 存在、hljs.listLanguages() 返回 36 种。
  • 预览里 <code> 内的 span.hljs-* 数量 > 0（不是纯文本）。
  • 切到深色配色后，关键字 token 的 color 与浅色配色不同（读数不相等，不是比字面量）。
  • 预览卡片的行号条数与代码行数一致。
  • 后台 HTML 里不再出现指向站点根的 /assets/img/donate.png。
  • 反向注入：把 hljs 的 enqueue 删掉 / 把 recolor 短路掉 ⇒ 判据必须变红。
## 现象 后台「主题设置 → 代码高亮 → 代码配色」切换配色后，**下方预览示例代码没有高亮**（一片单色文字）， 只在顶栏/边框上能看到深/浅变化。控制台另有 `donate.png 404`。 浏览器控制台报的两行： ``` load-scripts.php?...:5 JQMIGRATE: Migrate is installed, version 3.4.1 donate.png:1 Failed to load resource: the server responded with a status of 404 () ``` ## 根因（已定位） ### 一、预览不高的高亮：后台从未加载 hljs 本体（主因） `yang_hl_admin_assets()` 里只 enqueue 了三个资源，**依赖数组全为空、也没有 hljs**： | 资源 | 实际 enqueue | |---|---| | `yang-hl-admin-card` | `assets/css/highlight.css` | | `yang-hl-admin-preview` | `assets/css/highlight-admin.css` | | `yang-hl-admin-preview`（JS） | `assets/js/highlight-admin.js`，`deps = array()` | 而 `highlight-admin.js` 的 `recolor()` 第一句就是： ```js if (!code || !window.hljs) { return; } // ← 后台永远走这里 ``` hljs 只在**前台** `wp_enqueue_scripts`（`yang_hl_enqueue`）里加载，且函数开头 `if (is_admin() || is_feed()) { return; }` 直接挡掉后台。 ⇒ 后台 `window.hljs` 恒 undefined ⇒ `recolor()` **静默 return，连一行报错都没有** ⇒ 预览里只有服务端 `esc_html()` 出来的纯文本 + 配色 CSS 给的 `<pre>` 背景色， token 一个都没有 ⇒ 看起来「只有底色变了、字没高亮」。 这也解释了为什么它**看起来像在部分工作**：卡片边框、顶栏颜色是 `data-kind` 驱动的 CSS，不依赖 hljs，所以深/浅切换仍然可见 —— 极容易误判成「预览是好的」。 ### 二、`donate.png 404` `yang_hl_admin_assets()` 之外的问题，与预览无关，但同一屏暴露出来： `inc/theme-option-defaults.php:76-77` 的默认值登记的是**根相对路径** `/assets/img/donate.png`，`yang_image_default()` 拼出来是 `ASSET_PATH . $rel`； 而当 `ASSET_PATH` 为空（非 CDN 模式）时拿到的是 `/assets/img/donate.png` ⇒ 浏览器按**站点根**解析成 `https://yangyq.net/assets/img/donate.png` ⇒ 真实文件在 `/wp-content/themes/kratos_yang/assets/img/donate.png` ⇒ 404。 已实测：主题目录下的 `donate.png` 存在（559 B），HTTP 直取该正确路径 **200**。 ## 诉求 1. 后台预览必须真的高亮，且切换配色后 token 颜色跟着变（不用保存）。 2. 后台不要再出现 `donate.png 404`。 3. 两条都要能用「注入破坏 ⇒ 判据变红」证明判据有效，不能只看截图。 ## 验收标准 - 后台选项页 `window.hljs` 存在、`hljs.listLanguages()` 返回 36 种。 - 预览里 `<code>` 内的 `span.hljs-*` 数量 > 0（不是纯文本）。 - 切到深色配色后，关键字 token 的 `color` 与浅色配色**不同**（读数不相等，不是比字面量）。 - 预览卡片的行号条数与代码行数一致。 - 后台 HTML 里不再出现指向站点根的 `/assets/img/donate.png`。 - 反向注入：把 hljs 的 enqueue 删掉 / 把 recolor 短路掉 ⇒ 判据必须变红。
laoyang commented 2026-10-26 04:20:59 +00:00
Author
Owner
Copy Link
Copy Source

3.2.45 已发布，等待后台点升级后实测确认

一、两个报障的实际根因

① 后台预览的示例代码没有高亮 —— 三层原因叠在一起，缺任何一层都查不全：

# 原因 表现
1 yang_hl_admin_assets() 从未 enqueue hljs 本体，而 yang_hl_enqueue() 开头 if (is_admin() || is_feed()) return; 挡掉后台 后台 window.hljs 恒 undefined ⇒ recolor() 静默 return
2 init() 里 applyTheme(sel.value, true) 传了 noRecolor=true 首屏永不上色，只有手动拨一下下拉框才有颜色
3 recolor() 缺 hljs 时只是 return 控制台一个字都没有，极难定位

第 1 条特别迷惑：卡片的边框、顶栏颜色是 data-kind 驱动的纯 CSS，切深浅配色时它们照样会变，所以看着像"预览在工作，只是代码没颜色"。而第 2 条才是报障原话"下面的示例代码并没有高亮"的直接原因 —— 它不是完全不工作，是首屏不工作。

② donate.png 404 —— 库里 kratos 选项的 g_donate_alipay / g_donate_wechat 存着旧主题目录名的绝对 URL：

https://yangyq.net/wp-content/themes/kratos-master/assets/img/donate.png

主题目录后来从 kratos-master 改名成 kratos_yang。前台走 yang_option_image() 有 yang_image_url_is_stale() 兜底所以正常；但后台 class-options-media-uploader.php 直接 echo $value，绕过检测 ⇒ 每次打开设置页 404 一次。

二、改了什么

  • inc/theme-highlight.php：后台 enqueue hljs 本体，并作为 preview 脚本的硬依赖（不靠 WP 加载顺序碰运气）；前台那个函数仍然挡后台，没走"放开前台函数"这条歪路。
  • assets/js/highlight-admin.js：删掉 noRecolor 这个"能否跳过核心动作"的参数 —— 这类参数调用方迟早会用错；首屏与切换走同一条路径。缺 hljs / 上色失败时 console.error 出声 + 打标记。
  • assets/css/highlight-admin.css：给失败标记做可见样式（橙色虚线框 + 顶栏文字"预览未能上色，请查看浏览器控制台"），不再让失败显示成一坨单色字。
  • 配色样式加载主路径改为 setTimeout(once, 125)，link.onload 只当"提前一拍"的加速。onload 三种情况不触发：样式表已在缓存、link 移除后重插、jsdom 无网络。
  • inc/options-framework/includes/class-options-media-uploader.php：预览图与"浏览文件"href 走检测后的 $preview（带 function_exists 兜底）；输入框仍显示库里的原值，不偷偷改用户数据。
  • style.css：3.2.44 → 3.2.45。

三、验证结果

# 测试 结果
1 _admin_preview_test.js（jsdom 配色切换） 22 / 0
2 _admin_preview_falsify.js 6 / 0 真红
3 _admin_enqueue_test.php（enqueue 注册表） 9 / 0
4 _admin_enqueue_falsify.php 5 / 5 真红
5 _admin_e2e_highlight.js（真端到端，能抓两个真实 bug） 16 / 0，token span = 17
6 _admin_e2e_falsify.js 3 / 3 真红
7 _admin_image_stale_test.php 10 / 0
8 _admin_image_stale_falsify.php 3 / 3 真红
9 _hl_unit_run.py（既有 44 + 24 单测） 全通过

发布脚本自带的反证（现场改包内字节，证明判据真会红）：R1 删后台 hljs、R2 还原 noRecolor=true、R2b 删 setTimeout 兜底、R3 去掉陈旧检测、R4 让输入框输出 $preview —— 5 / 5 全红。

四、发布记录

  • 包：kratos_yang-3.2.45.zip，md5 ed755c1f04098374f5b5bd8f869278e5，4,715,745 B，232 文件，时间戳单一（不是 1980 默认值）
  • 通道：只往 /theme-update/ 放 zip + readme + update.json，没有触碰 wp-content/themes/kratos_yang/
  • 顺序：包结构校验 → 反证 → 备份 → 替换 zip/readme → HTTP 冒烟（下载 md5 与磁盘一致、完整性通过、包里三处修复都读得到）→ 最后落 update.json
  • update.json 现为 {"version": "3.2.45", ...}
  • 服务器主题目录仍是 3.2.44，等你在 WP 后台点"升级"
  • 线上 donate.png 正确路径 HTTP 200，旧 kratos-master 路径 404（符合预期）
  • git：9da5e9e 已推送 main

五、请你实测确认这两点

  1. WP 后台点升级到 3.2.45 后，打开主题设置 →「代码高亮 → 代码配色」，一进来示例代码就是彩色的（不用先拨下拉框），切换配色立刻跟着换。
  2. 同一个页面按 F12，Console 里不再有 donate.png 404；"打赏"那一项的预览图正常显示。

若还有问题，把 Console 里的报错（现在会出声了）贴给我。

## 3.2.45 已发布，等待后台点升级后实测确认 ### 一、两个报障的实际根因 **① 后台预览的示例代码没有高亮** —— 三层原因叠在一起，缺任何一层都查不全： | # | 原因 | 表现 | |---|---|---| | 1 | `yang_hl_admin_assets()` **从未 enqueue hljs 本体**，而 `yang_hl_enqueue()` 开头 `if (is_admin() \|\| is_feed()) return;` 挡掉后台 | 后台 `window.hljs` 恒 `undefined` ⇒ `recolor()` 静默 `return` | | 2 | `init()` 里 `applyTheme(sel.value, true)` 传了 `noRecolor=true` | **首屏永不上色**，只有手动拨一下下拉框才有颜色 | | 3 | `recolor()` 缺 hljs 时只是 `return` | 控制台**一个字都没有**，极难定位 | 第 1 条特别迷惑：卡片的边框、顶栏颜色是 `data-kind` 驱动的**纯 CSS**，切深浅配色时它们**照样会变**，所以看着像"预览在工作，只是代码没颜色"。而第 2 条才是报障原话"下面的示例代码并没有高亮"的直接原因 —— 它不是完全不工作，是**首屏**不工作。 **② donate.png 404** —— 库里 `kratos` 选项的 `g_donate_alipay` / `g_donate_wechat` 存着旧主题目录名的**绝对 URL**： ``` https://yangyq.net/wp-content/themes/kratos-master/assets/img/donate.png ``` 主题目录后来从 `kratos-master` 改名成 `kratos_yang`。前台走 `yang_option_image()` 有 `yang_image_url_is_stale()` 兜底所以正常；但后台 `class-options-media-uploader.php` **直接 echo `$value`**，绕过检测 ⇒ 每次打开设置页 404 一次。 ### 二、改了什么 - `inc/theme-highlight.php`：后台 enqueue hljs 本体，并作为 preview 脚本的**硬依赖**（不靠 WP 加载顺序碰运气）；前台那个函数**仍然挡后台**，没走"放开前台函数"这条歪路。 - `assets/js/highlight-admin.js`：删掉 `noRecolor` 这个"能否跳过核心动作"的参数 —— 这类参数调用方迟早会用错；首屏与切换走**同一条路径**。缺 hljs / 上色失败时 `console.error` 出声 + 打标记。 - `assets/css/highlight-admin.css`：给失败标记做**可见样式**（橙色虚线框 + 顶栏文字"预览未能上色，请查看浏览器控制台"），不再让失败显示成一坨单色字。 - 配色样式加载主路径改为 `setTimeout(once, 125)`，`link.onload` 只当"提前一拍"的加速。`onload` 三种情况不触发：样式表已在缓存、`link` 移除后重插、jsdom 无网络。 - `inc/options-framework/includes/class-options-media-uploader.php`：预览图与"浏览文件"href 走检测后的 `$preview`（带 `function_exists` 兜底）；**输入框仍显示库里的原值**，不偷偷改用户数据。 - `style.css`：3.2.44 → 3.2.45。 ### 三、验证结果 | # | 测试 | 结果 | |---|---|---| | 1 | `_admin_preview_test.js`（jsdom 配色切换） | **22 / 0** | | 2 | `_admin_preview_falsify.js` | **6 / 0** 真红 | | 3 | `_admin_enqueue_test.php`（enqueue 注册表） | **9 / 0** | | 4 | `_admin_enqueue_falsify.php` | **5 / 5** 真红 | | 5 | `_admin_e2e_highlight.js`（真端到端，能抓两个真实 bug） | **16 / 0**，token span = 17 | | 6 | `_admin_e2e_falsify.js` | **3 / 3** 真红 | | 7 | `_admin_image_stale_test.php` | **10 / 0** | | 8 | `_admin_image_stale_falsify.php` | **3 / 3** 真红 | | 9 | `_hl_unit_run.py`（既有 44 + 24 单测） | 全通过 | 发布脚本自带的反证（现场改包内字节，证明判据真会红）：R1 删后台 hljs、R2 还原 `noRecolor=true`、R2b 删 `setTimeout` 兜底、R3 去掉陈旧检测、R4 让输入框输出 `$preview` —— **5 / 5 全红**。 ### 四、发布记录 - 包：`kratos_yang-3.2.45.zip`，md5 `ed755c1f04098374f5b5bd8f869278e5`，4,715,745 B，232 文件，时间戳单一（不是 1980 默认值） - 通道：只往 `/theme-update/` 放 zip + readme + update.json，**没有触碰** `wp-content/themes/kratos_yang/` - 顺序：包结构校验 → 反证 → 备份 → 替换 zip/readme → HTTP 冒烟（下载 md5 与磁盘一致、完整性通过、包里三处修复都读得到）→ **最后**落 update.json - `update.json` 现为 `{"version": "3.2.45", ...}` - 服务器主题目录仍是 **3.2.44**，等你在 WP 后台点"升级" - 线上 `donate.png` 正确路径 HTTP **200**，旧 `kratos-master` 路径 **404**（符合预期） - git：`9da5e9e` 已推送 `main` ### 五、请你实测确认这两点 1. WP 后台点升级到 3.2.45 后，打开主题设置 →「代码高亮 → 代码配色」，**一进来**示例代码就是彩色的（不用先拨下拉框），切换配色立刻跟着换。 2. 同一个页面按 F12，**Console 里不再有 `donate.png 404`**；"打赏"那一项的预览图正常显示。 若还有问题，把 Console 里的报错（现在会出声了）贴给我。
laoyang commented 2026-10-26 04:30:03 +00:00
Author
Owner
Copy Link
Copy Source

已交付并发布（3.2.45）

两个问题都已修复并上线，用户确认可以关闭。

① 后台「代码配色」预览不上色

三层原因叠加：

  • yang_hl_admin_assets() 从未 enqueue hljs 本体，而前台函数 if (is_admin() || is_feed()) return;
    挡掉后台 ⇒ window.hljs 恒 undefined
  • init() 里 applyTheme(sel.value, true) ⇒ 首屏永不上色，只有拨下拉框才是彩色
  • 缺 hljs 时只是静默 return，控制台零输出

修法：后台 enqueue hljs 并作为预览脚本硬依赖；删掉 noRecolor 参数（首屏与切换走同一路径）；
缺 hljs 时 console.error + 橙色虚线框「预览未能上色」提示。

② donate.png 404

库里 kratos 选项的 g_donate_alipay / g_donate_wechat 存着旧主题目录名
kratos-master 的绝对 URL。前台有 yang_image_url_is_stale() 兜底，后台 uploader
直接 echo $value 绕过检测。修在渲染处：预览图走检测后的 $preview，输入框仍显示原值。

验证

9 组测试全绿（22/0 · 6/0 · 9/0 · 5/5 · 16/0 · 3/3 · 10/0 · 3/3 · 既有单测全通过），
发布脚本自带反证 5/5 真红。

发布

kratos_yang-3.2.45.zip md5 ed755c1f04098374f5b5bd8f869278e5，232 文件，
commit 9da5e9e 带 #14，走 /theme-update/ 通道，服务器主题目录未被覆盖。

## 已交付并发布（3.2.45） 两个问题都已修复并上线，用户确认可以关闭。 ### ① 后台「代码配色」预览不上色 三层原因叠加： - `yang_hl_admin_assets()` 从未 enqueue hljs 本体，而前台函数 `if (is_admin() || is_feed()) return;` 挡掉后台 ⇒ `window.hljs` 恒 undefined - `init()` 里 `applyTheme(sel.value, true)` ⇒ **首屏永不上色**，只有拨下拉框才是彩色 - 缺 hljs 时只是静默 `return`，控制台零输出 修法：后台 enqueue hljs 并作为预览脚本硬依赖；删掉 `noRecolor` 参数（首屏与切换走同一路径）； 缺 hljs 时 `console.error` + 橙色虚线框「预览未能上色」提示。 ### ② donate.png 404 库里 `kratos` 选项的 `g_donate_alipay` / `g_donate_wechat` 存着旧主题目录名 `kratos-master` 的绝对 URL。前台有 `yang_image_url_is_stale()` 兜底，后台 uploader 直接 echo `$value` 绕过检测。修在渲染处：预览图走检测后的 `$preview`，输入框仍显示原值。 ### 验证 9 组测试全绿（22/0 · 6/0 · 9/0 · 5/5 · 16/0 · 3/3 · 10/0 · 3/3 · 既有单测全通过）， 发布脚本自带反证 5/5 真红。 ### 发布 `kratos_yang-3.2.45.zip` md5 `ed755c1f04098374f5b5bd8f869278e5`，232 文件， commit `9da5e9e` 带 `#14`，走 `/theme-update/` 通道，服务器主题目录未被覆盖。
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
laoyang (老杨)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: laoyang/wordpress-kratos-yang#14