laoyang
9da5e9e2df
Bug 1：后台预览的示例代码没有高亮。三层原因叠在一起。
① yang_hl_admin_assets() 从未 enqueue hljs 本体，而 yang_hl_enqueue()
开头 `if (is_admin() || is_feed()) return;` 挡掉后台
⇒ 后台 window.hljs 恒 undefined ⇒ recolor() 静默 return。
卡片的边框/顶栏是 data-kind 驱动的纯 CSS，切深浅配色时照样会变，
看起来像"预览在工作，只是代码没颜色"。
② init() 里 applyTheme(sel.value, true) 传 noRecolor=true ⇒ 首屏永不上色，
只有手动拨下拉框才有颜色（正是报障的"下面的示例代码并没有高亮"）。
③ recolor() 缺 hljs 时只是 return，控制台零输出 ⇒ 极难定位。
修法：
- inc/theme-highlight.php：后台 enqueue hljs 本体，并作为 preview 脚本的
硬依赖（不靠 WP 的加载顺序碰运气）；前台 yang_hl_enqueue() 仍挡后台。
- assets/js/highlight-admin.js：删掉 noRecolor 这个"能否跳过核心动作"的
参数（调用方迟早会用错）；首屏与切换走同一条路径。
- 缺 hljs / 上色失败时 console.error 出声，并给 code 打
data-unhighlighted、给卡片打 data-hl-failed；CSS 画橙色虚线框 +
顶栏文字，让失败在画面上也看得出来，不再是一坨单色字。
- 配色样式加载主路径改为 setTimeout(once, 125)，link.onload 只作加速。
onload 三情形不触发：样式表已在缓存、link 移除后重插、jsdom 无网络。
Bug 2：后台设置页报 donate.png 404。
库里 g_donate_alipay / g_donate_wechat 存的是旧主题目录名
`.../themes/kratos-master/assets/img/donate.png` 的绝对 URL。前台走
yang_option_image() 有 yang_image_url_is_stale() 兜底，后台
class-options-media-uploader.php 直接 echo $value，绕过检测。
修在渲染处：预览图与"浏览文件"href 走检测后的 $preview（带
function_exists 兜底），输入框仍显示库里的原值，不偷偷改用户数据。
版本 3.2.44 → 3.2.45。
136 lines
3.8 KiB
CSS
136 lines
3.8 KiB
CSS
/**
|
||
* 后台设置页：代码配色预览区布局
|
||
*
|
||
* 🔴 这个文件**只负责把预览框摆好**，绝不改代码块的外观。
|
||
* 代码块的一切外观（背景、边框、token 颜色）都来自两个前台文件：
|
||
* assets/hljs/styles/<配色>.min.css → token 颜色
|
||
* assets/css/highlight.css → 卡片骨架
|
||
* 在这里另写一套样式会让"预览"和"前台"不一致，比没有预览更误导人。
|
||
*
|
||
* 唯一必须在这里做的是**作用域隔离**：后台页面没有正文容器
|
||
* （.k-main .details .article .content），highlight.css 里大量规则带这个前缀，
|
||
* 单看 .cb 的规则在后台也能生效（那些规则都写了无前缀的兜底选择器），
|
||
* 但行号槽之类的尺寸依赖父级字号，所以这里要显式给一个正常的正文环境。
|
||
*/
|
||
|
||
.yang-hl-preview {
|
||
margin: 12px 0 4px;
|
||
padding: 14px 16px 10px;
|
||
border: 1px solid #dcdcde;
|
||
border-radius: 6px;
|
||
background: #fff;
|
||
max-width: 860px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.yang-hl-preview-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #f0f0f1;
|
||
}
|
||
|
||
.yang-hl-preview-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #1d2327;
|
||
}
|
||
|
||
.yang-hl-preview-name {
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: #2271b1;
|
||
padding: 1px 7px;
|
||
border-radius: 4px;
|
||
background: #f0f6fc;
|
||
border: 1px solid #c5d9ed;
|
||
}
|
||
|
||
.yang-hl-preview-hint {
|
||
font-size: 12px;
|
||
color: #646970;
|
||
}
|
||
|
||
.yang-hl-preview-note {
|
||
margin: 8px 0 0;
|
||
font-size: 12px;
|
||
color: #646970;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 预览里的卡片：
|
||
* ① 给一个明确的字号基准（后台正文字号是 13px，代码用 12.5px 与前台一致）
|
||
* ② 限制高度，样例只有 13 行不需要滚动，但要防止窄屏下溢出 */
|
||
.yang-hl-preview .cb {
|
||
margin: 0;
|
||
}
|
||
|
||
.yang-hl-preview .cb pre,
|
||
.yang-hl-preview .cb code {
|
||
font-size: 12.5px;
|
||
line-height: 1.62;
|
||
}
|
||
|
||
/* 复制按钮在预览里没有实际功能（disabled），视觉上弱化，避免用户以为能点 */
|
||
.yang-hl-preview .cb-copy[disabled] {
|
||
opacity: .45;
|
||
cursor: default;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* 后台配色切换时，卡片边框跟着深浅走，避免"深色代码 + 白边框"的割裂感。
|
||
* 这里只调边框和顶栏，token 颜色一律交给配色 CSS。 */
|
||
.yang-hl-preview .cb[data-kind="dark"] {
|
||
border-color: #3a3f46;
|
||
}
|
||
|
||
.yang-hl-preview .cb[data-kind="dark"] .cb-bar {
|
||
background: #21262d;
|
||
border-bottom-color: #3a3f46;
|
||
}
|
||
|
||
.yang-hl-preview .cb[data-kind="dark"] .cb-lang {
|
||
color: #adbac7;
|
||
background: #2d333b;
|
||
border-color: #444c56;
|
||
}
|
||
|
||
.yang-hl-preview .cb[data-kind="dark"] .cb-body {
|
||
background: #22272e;
|
||
}
|
||
|
||
@media screen and (max-width: 782px) {
|
||
.yang-hl-preview {
|
||
padding: 10px 10px 8px;
|
||
}
|
||
.yang-hl-preview-hint {
|
||
flex-basis: 100%;
|
||
}
|
||
}
|
||
|
||
/* ── 上色失败的可视标记 ──────────────────────────────────
|
||
*
|
||
* 3.2.44 的教训：预览没上色时，画面上和"某套配色本来就很朴素"
|
||
* 完全无法区分。用户在后台看到单色代码，只能猜是配色问题还是坏了。
|
||
* ⇒ 上色失败时打一个 data 标记，这里给一道醒目的虚线框，
|
||
* 让"坏了"和"配色就这样"在视觉上立刻分开。
|
||
*
|
||
* 判据：这是**降级提示**，不是正常态。所以颜色用后台的警告橙
|
||
* （#dba617），不引入新色值。 */
|
||
.yang-hl-preview .cb[data-hl-failed="1"] {
|
||
outline: 2px dashed #dba617;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.yang-hl-preview .cb[data-hl-failed="1"] .cb-bar::after {
|
||
content: "预览未能上色，请查看浏览器控制台";
|
||
margin-left: auto;
|
||
padding-left: 8px;
|
||
font-size: 11px;
|
||
color: #dba617;
|
||
white-space: nowrap;
|
||
} |