laoyang/wordpress-kratos-yang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
78 Commits 1 Branch 0 Tags
4c1d67b86bb4a686b85542e99bcfde75f20711f8
Commit Graph
12 Commits
Author SHA1 Message Date
laoyang 492d8e11a6 3.2.48: 归档倒序/字号/底边对齐/共N篇 + 评论标题线等长 + 工具条分隔线统一 #18 
工单 #18 八条诉求逐条落地：

1. 月份、日期、年份全部倒序（最近的在最上面）
   - PHP 侧 `krsort($years[$y]['months'])`（原来是 ksort）
   - JS 侧 `Object.keys(...).sort((a,b)=>b-a)` —— 对象键序对纯数字整数键
     会强制升序，服务端顺序传不过来，必须前端自己再排一次
   - 年份本来就是 krsort，日期本来就是倒序，本次只补月份

2. 年份字体再大一点
   - 原来 CSS 写的 22px **从来没有生效过**：`.yang-archives .ar-year` 是
     (0,2,0)，被 `.k-main .details .article .content h3` 的 (0,4,1) 压死，
     线上实际是 18px
   - 改为带 `.k-main` 前缀（提到 (0,5,0)）+ 26px + 700
   - `.ar-month-title` 同一个坑，一并修（写 14px/600，线上实际 16px/500）

3. 「共 N 篇」太高、比年份还高 → 下移与年份底边对齐
   - `.ar-head` 的 `align-items: center` → `flex-end`
   - `.ar-year` 的 margin 显式清零（kratos 的 `h1..h6 { margin: 0 0 30px 0 }`）
   - 窄屏媒体查询同步改，否则手机上又回到居中
   - 注意 `flex-end` 对的是 margin box，所以 margin 不清零等于没改

4. 每月后面的裸数字 → 「共 N 篇」
   - PHP：`sprintf(esc_html__('共 %s 篇'), number_format_i18n(...))`
   - JS：同一个文案键 `i18n.monthCount`，服务端输出到 `yangArchivesData`
   - 新增 `monthCount` 键，**没有复用** `totalFmt`（两处语义不同，
     以后要分别改文案时不至于互相牵连）

5. 上一年/下一年按钮看不清 → 与「写下你的评论」同款观感
   - 平时：`1px solid #cfe6fb` 浅蓝框 + 透明底 + `--yq-primary-dark` 蓝字
   - 悬停：主色实底 + 白字（`.ar-nav-year` / `.ar-nav-arrow` 也要跟白，
     否则图标还是蓝的在蓝底上看不见）
   - 禁用态保持灰（`is-disabled` + opacity .42），不能跟可用态一个样

6. 评论「评论者」下面的灰线太短 → 延长到与评论分隔线等长、右侧到头
   - 🔴 这里改过一次方案：一开始以为把 h3 `flex: 1 1 auto` 撑宽就行，
     实测发现 `.comments-head` 是 flex 行，右边还有「写下你的评论」按钮
     （flex: 0 0 auto），h3 撑满也只能长到按钮左边缘 —— 原理上到不了右端
     （实测 h3 110.5px / li 561.98px，差的 451px 就是按钮 + gap）
   - 最终方案：**线从 h3 搬到 `.comments-head` 容器上**，
     h3 显式 `border-bottom: none` 干掉 kratos 的 #f0f0f0，
     否则会出现一短一长两条线，比原来更难看
   - 容器那条规则**还必须带 `.k-main` 前缀**（(0,5,0)），否则压不过
     kratos 的 `.comments .title`。发布判据当场抓到这一条：注释里写了
     「带 .k-main 前缀」，代码里漏了 —— 注释不能当证据

7. 工具条分隔细线不统一 → 5 个按钮 4 条线
   - 原来 B/I 之间没有线，其余有 ⇒ 现在统一
   - 写成「每条后面跟一条」会在末尾多出贴容器边缘的孤线，所以是 5 按钮 4 线

8. 清理无用 JS/CSS
   - 四轮查证结论：**没有可安全删除的**，代码一行未动
   - 排查过程已作为评论发到工单

测试：归档单测 113/0（反向 13 真红）、归档 e2e 112/0（反向 24 真红）、
评论几何 157/0（反向含新增 5 条，覆盖"线搬回标题""两处都画"两种错误形态）。
线上真实页面几何探针发布前 17 通过/16 失败（每条都对应上面某一条诉求），
发布后要求全绿。
 2026-10-26 18:42:40 +08:00
laoyang 7047ab3ece 3.2.46: 新增 [Archives] 归档短代码 + 评论关闭时整块零输出 #15 
需求一：[Archives] 短代码 —— 归档式全站文章列表
  · 在文章/页面正文写一行 [Archives]，该位置渲染全站文章的年月归档
  · 默认显示今年，按月份归类；每篇带浏览/评论/点赞三个数
  · 上下两排各有一组「上一年 / 下一年」按钮（四角），JS 切换不刷新页面
  · 地址栏同步 ?arc_year=，刷新与分享链接都能保持同一年
  · 只在用到短代码的页面才加载 assets/js|css/archives.js|css
  · 参数：year="2025" 指定首年；month="0" 不按月分组

需求二：评论关闭时评论区整块消失
  · comments.php 在**任何输出之前** `if (!comments_open()) return;`
    —— 零字节，不是空容器、不是 display:none、不留提示文字
  · 已有评论的老文章关评论后也不再显示（需求原话：正文之外什么都没有）
  · inc/theme-comments.php 的资源守卫与之同口径：关评论时不加载
    约 10KB 的 comments.css / comments.js
  · 删掉 .comments-closed 样式与两处「评论已关闭」提示分支

开发中实测抓到并修掉的三个真实 bug（都是"测试把期望值写对之后"才显形）：
  · 年份标题 / 导航年份过了 number_format_i18n() ⇒ 输出「2,025」，
    而 JS 侧 String(year) 输出「2025」⇒ 首屏与切年后不一致
  · 月份标题同样过 number_format_i18n()，与 JS 侧 String(m) 口径不一致
  · yang_archives_render_nav() 把 ar-nav-top 写死，而下排也调它生成
    ⇒ 下排被叫成 top（视觉上被更高特异性规则压住，看不出问题）

验证：
  归档  _archives_unit.php        94 通过 / 0 失败
        _archives_e2e.js        109 通过 / 0 失败
        _archives_e2e_falsify.js 反证 25 真红 / 0 无效
        _archives_unit_falsify.py 反证 6 真红 / 0 无效
  评论  _comments_closed_test.php 54 通过 / 0 失败
        _comments_closed_falsify.py 反证 13 真红 / 0 无效
  回归  _test_comments.php        64 通过 / 0 失败
        _hl_unit_run.py          24 通过 / 0 失败
  全量  96 个 PHP 文件语法检查通过；包内 lint 通过
  发布  已推 3.2.46 到 /theme-update/，update.json 已落 3.2.46；
        服务器 wp-content/themes/kratos_yang/ 仍为 3.2.45（未覆盖）

另：把 _archives_unit.php 从 `__DIR__` 定位改为接受根目录参数，
    否则它无法登记进 verify_all.sh，只能手动跑（手动跑 = 长期不跑）。
    5 个新套件已登记进 verify_all.sh（2j ~ 2o）。
 2026-10-26 13:25:51 +08:00
laoyang da0d9ae4a1 代码高亮整套自研：10 浅 + 10 深配色、语言标签、评论区贴代码 (#11) 
不再依赖第三方高亮插件，全部由主题自己实现。

主题配色（20 套）
- 浅色 10：github / vs / atom-one-light / idea / xcode /
  stackoverflow-light / intellij-light / googlecode / magula / color-brewer
- 深色 10：github-dark / atom-one-dark / monokai / github-dark-dimmed /
  a11y-dark / stackoverflow-dark / night-owl / srcery /
  panda-syntax-dark / tomorrow-night-blue
- 深色卡片带 data-kind="dark"，顶栏跟着换深色底
- 只加载当前选中的一套（20 套全加载会让后出现的规则压前面的，
  切换配色容易"看起来没变"）

代码语言标签（用户要求：防止复制错语言）
- 作者标了 language-xxx → 实线边框、正体
- 自动识别猜出来的 → 虚线边框、斜体
- 认不出来 → 显示 "—"，仍保持虚线斜体（不冒充作者标注）

行号
- 默认关；行号槽在 <pre> 外面，复制天然不带行号
- 改掉原主题的 word-break:break-all（任意字符断行，代码像乱码）
- 归零 hljs 主题自带的 pre code.hljs{padding:1em}，
  否则代码被压低 1em、与行号槽错位 15.5px

复制
- 默认开；安全上下文判断 + execCommand 退路（HTTP 下 clipboard 是 undefined）
- 取 textContent 而非 innerHTML
- 默认 opacity:0、hover 显示、触屏覆盖回 1
  （旧写法只在 @media(hover:none) 里写 1，等于空操作）

自动识别
- 做成选项，默认开
- 只对没标语言的块生效；站内实测长块准确率 22%，不能覆盖作者标注

评论区贴代码
- 评论工具条加"代码"按钮 + 29 种语言面板
- kses 放行 pre 并给 pre/code 放开 class
  （WP 默认 pre 整条剥掉、code 属性全清，此前根本贴不了代码）
- 放行 pre 之后 wpautop/wptexturize/make_clickable 自动让路，
  代码里的连续空行、引号、URL 都不会被改写
- comments.js 用占位符保护代码块，避免 walk() 的 /\n{3,}/ 压缩

其它
- 资源版本号改为读主题头，不再写死（写死会导致以后升级后
  浏览器一直用旧缓存，改了 CSS/JS 完全不生效）
- 删除 footer.php 里旧的 Prism 兜底（两套高亮器同页会互相打架）

验收
- 用线上 284 个真实代码块跑产品代码：284/284 全部变卡片，内容丢字 0、双转义 0
- 47 个 text 标记全部映射到 plaintext（hljs 无 text 语言，不映射会静默不上色）
- 80 个裸 <pre>（无 code 子元素）全部覆盖
- 核心纯函数 65/65；核心反向 10/10 变红
- 浏览器端到端 32/32；行号几何逐行对齐偏差 0.00px，几何反向 4/4 变红
- 端到端反向 7/7 变红；语言标签反向 2/2 变红
- 全量 PHP 语法 95 文件 0 错误

发布：走 theme-update 通道（zip + readme + update.json），
未覆盖服务器主题目录；线上主题目录仍是 3.2.41，待后台升级。
 2026-10-26 09:00:17 +08:00
laoyang 0239cbeb2a 3.2.27: 评论嵌套引导线按层变色（1层浅蓝/2层深蓝/3层点赞色/更深扩展色轮换，深层线恢复绘制）；导航多级下拉修复（depth=2 截断改 0，深层父项 dropdown-submenu + hover 右侧弹出，移动端平铺） 2026-10-25 09:52:07 +08:00
laoyang 92ffced7cf 3.2.26: 评论布局重排（姓名/时间垂直居中于头像、正文全宽下移 10px，锚点黄底不再压作者徽章）；引导线与子块留 8px 空隙并与缩进同源（--yq-my-indent）；修深层缩进晚一层生效的存量 bug；后台设置页标题 margin 收编（项间空白 42→22px） 2026-10-24 23:58:55 +08:00
laoyang fb12d58067 3.2.25: 评论框改为所见即所得编辑器（B/I/颜色/表情可视化+序列化白名单+纯文本粘贴）；后台资源 enqueue 版本号改跟 THEME_VERSION（修设置页重排被浏览器缓存挡住的问题） 2026-10-24 22:38:10 +08:00
laoyang fd27b4d218 3.2.24: 评论富文本工具条（B/I/颜色/表情移入）+ kses 放行 span+style + 后台设置页标签左列竖排重排 2026-10-24 21:59:06 +08:00
laoyang 78fce2d87d 3.2.23 评论区：引导线和输入框聚焦统一成主色 
用户对 3.2.22 的反馈：
「这蓝色有点奇怪啊，应该用主题颜色，就是评论的那个按钮背景色。
  把评论回复左侧那个竖着的小蓝条，改成这个颜色，下面输入框被选中的
  时候，周边的颜色，也变成这个颜色。」

1. 引导线 #cfe6fb → var(--yq-primary)
   浅蓝和「发布评论」按钮的背景色（#00a2ff）不是一个蓝，
   页面上两蓝并存反而显乱。改成引用主色变量，以后改主色线自动跟。

2. 输入框聚焦变主色 —— 顺带翻出一个藏了三版的老问题
   实测发现正文输入框聚焦后边框仍是灰色：kratos.css 里
     .k-main .details .comments .comment-respond .comment-textarea
       { border: 1px solid #eee; ... }
   特异性 0,6,0，把 comments.css 的静态边框（0,1,0）、hover 变深
   （0,2,0）、focus 变主色（0,2,0）全部压死。也就是说 3.2.20 重做
   以来，正文框的边框色、圆角、浅底、悬停变色、聚焦变色**全部
   从未真正上线**，用户看到的一直是基础主题的 #eee / 3px / 灰底，
   聚焦时只有一圈很淡的外环是主色的。

   修法：textarea 的静态 / hover / focus 三态都改用同样的
   0,6,0 选择器收编（本表依赖 kratos 后加载，每条稳定压过）。
   不去改 kratos.css —— 那是基础主题，改它等于放弃覆盖层架构。

   姓名/邮箱/网址那排 input 不受影响（kratos.css 没对它们写边框），
   聚焦本来就是主色。

3. 新增线上判据并先证明它能红
   ④ 引导线颜色 = 主色（动态取 .comment-submit 背景色做参照，
      不写死 RGB，主色一改判据自动跟）；
   ⑧ 真实点击姓名框与正文框、等 0.16s 过渡结束后量边框色。
   部署前在 3.2.22 线上跑：④⑧ 正确变红、几何项依旧全绿——
   判据有效，不是空转。

只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。
 2026-10-24 20:49:41 +08:00
laoyang 420605f462 3.2.22 评论区：引导线跟着右移到正文左边缘，锚点高亮改回黄色 
用户对 3.2.21 的反馈：
「回复的内容和上面评论的正文是对齐了，但是回复内容左侧有一条蓝色的线
  还是没有对齐。那条蓝色的线也要向右移，让那条线和上面评论的内容正文对齐。
  如果是为了突出显示打开文章时的锚点，那还是用黄色吧。」

1. 引导线右移
   原来线写在容器的 border-left 上。边框只能贴在盒子外沿，也就是父评论的
   最左边（父头像那一列），而子回复整块已经右移到父正文的位置了，中间
   空出 55px，线与内容脱节。

   现在改成绝对定位的 ::before，位置由缩进算出：
       left: calc(var(--yq-indent) - var(--yq-guide-w))
   线的右边缘正好压住正文左边缘。断点里改缩进，线自动跟着走，
   不需要另写一遍。三档屏幕实测误差 0px。

   取右边缘对齐而不是左边缘，是因为线宽 2px：若左边缘对齐，线会压住
   子头像左侧（头像有一圈 1px 描边，压上去发脏）。

2. 缩进值 53 → 55（连带 44→46、40→42）
   旧值扣掉了 2px，因为那时线是 border，而 padding 从边框内侧算起。
   线不再占布局后，那 2px 不该再扣，否则子回复整体左移 2px。
   缩进回到最朴素的形式：头像宽 + 列间距。以后改这一个数，
   线和内容一起动，不会再出现「只对一半」。

3. 锚点高亮改回暖黄 #fffbe8
   3.2.21 改成浅蓝的理由是「全站只有待审核用暖色」。但用户指出它
   是用于突出显示锚点，该用黄色。这个判断是对的：锚点高亮需要在一整片
   蓝白里「跳出来」，浅蓝与引导线、按钮描边同色系，反而被当成背景噪音。

   与「刚提交」的分工因此清楚：
     :target → 暖黄（一次性，指路）
     is-new  → 浅蓝（即时反馈，我刚发的）
   同页出现也能分辨。

深层（第三个 children 容器起）仍然不画线，改用 content: none 关掉，
而不是以前的 border-left-color: transparent —— 伪元素没有"透明的线"
这种语义，直接不生成更干净。

只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。
 2026-10-24 20:12:23 +08:00
laoyang 5cb42f1716 3.2.21 评论区：去掉多余的装饰，把回复对齐到正文 
用户在 3.2.20 上线后提了 5 条，逐条对应：

1. 去掉「评论」左侧的蓝色竖条。它本身是多余的视觉噪音，
   而且逼着标题让出 12px 左内边距，让标题和下方评论正文对不齐。
   连带断点里为它让路的 11px 一起删掉。

2. 去掉标题下方的灰色横线。它和评论容器自己的上边框只隔十几像素，
   两条平行线挨得太近，像是重复画了一次。

3. 回复内容对齐到父评论正文的左边缘。上一版缩进 18px 是拍脑袋定的，
   结果子回复正文比父正文又右偏 20px，左边缘错开一小截。
   这一版按布局算：父评论一行是「头像 42 + 列间距 13 + 正文」，
   子容器是父 li 的直接子元素、从父 li 左边缘起算，自身还有 2px 引导线，
   而 padding-left 从边框内侧算起，所以
       缩进 = 42 + 13 − 2 = 53px
   窄屏同步为 36+10−2=44、32+10−2=40。实测四个视口误差均为 0。
   缩进改存成 CSS 变量，在 .comments 作用域定义、断点里重新赋值，
   避免三处写死改一漏二。

   同时收住深层累加：padding-left 逐层叠加，53×3=159px 会把
   390px 屏的正文切成竖条。第三层起换用更小的缩进并去掉引导线，
   三层累计 136px 仍有递进感。

4. 回复左侧的引导线换成主题浅蓝 #cfe6fb，与「写下你的评论」
   按钮的描边同一个色系；原来的灰蓝在一片灰白里发闷。

5. 统一高亮底色。原来「有些回复有黄色背景、有些没有」并不是随机：
   暖黄只出现在 :target 命中的那一条，也就是链接末尾带了
   #comment-1234 锚点的时候（从评论通知邮件点进来就是这种）。
   正常打开文章一条都不黄。加上刚发出的 is-new 原本也是暖黄，
   两个黄叠在同一页面上更难分辨。
   现在两者统一为 --yq-primary-soft（#eaf6ff）。徽标里的
   「待审核」暖色保留 —— 那是状态色，需要区分度。

只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。
 2026-10-24 19:38:08 +08:00
laoyang b97f265142 feat(comments): 评论区样式重做，修掉三处可读性不达标与窄屏头像溢出（3.2.20） 
用无头浏览器把评论区的计算样式逐条量出来之后，确认「不好看」里有三处
是硬指标不达标，不是主观审美：

  · 时间戳 #a4abb5  对白底对比度 2.32  → 4.83（WCAG AA 正文需 ≥4.5）
  · 回复按钮 #8a9099 对比度 3.22       → 6.0 （可点元素同样需 ≥4.5）
  · 顶层分隔线 #f5f6f8 对白底 ≈1.04    → 1.17（可见，此前等于没有分隔）

顺带修掉一个只在窄屏出现的真 bug：768px 断点里 avatar 的 width 组
只写了容器与占位符、漏了 img，容器缩到 36px 而图片仍是 42px，
溢出 6px 压在正文上。400px 断点同类问题一并补齐。
这个 bug 之所以能活过多个版本，是因为几何探针量的是容器宽度 ——
容器确实等于 36，98 条断言全绿。已在探针里新增 3 条直接量 img 的断言，
并在反向验证里加入对应的注入用例。

其余为层次与细节调整：
  · 新增 .comments 作用域内的局部设计变量层（--yq-*），信息性颜色带兜底
  · 标题加主色竖条；外框圆角 4→6、阴影对齐整站 .widget 的档位
  · 头像边框改外描边，不占布局，直径保持精确 42px
  · 缩进 20→18px、引导线加深；正文 14→14.5px、行高 1.8
  · 新增 :target 高亮与 prefers-reduced-motion 分支

保持不变的 DOM 契约（已在文件头注明）：.yang-comment 仍为 grid、
子容器缩进仍只加 padding-left、头像断点节奏仍为 42/36/32。

验证：verify_all.sh 30 组全通过；本地几何 107/0、反向注入 25/0、
AJAX 34/0；线上四视口几何 52/0；线上实测时间 4.83、按钮 6.0、分隔线 1.17。
 2026-10-24 12:16:30 +08:00
laoyang cbe0f2dc59 3.2.18: 清明按节气换算、主题内 [TOC] 目录、重建评论区替代 wpDiscuz 
三项功能：

1. 清明不再用固定 04-04
   清明是节气，日期在 4/4~4/6 之间浮动。硬编码 04-04 实测 1900-2100
   共 201 年里只有 76 年是对的（约 38%）。改为内嵌逐年表换算真实日期，
   超出 1900-2100 返回 null 明确放弃，不退化成近似值。
   兼容 3.2.17 及以前勾过的 '04-04' 键，升级后勾选不会被静默丢弃。

2. 主题内实现 [TOC]
   文章里写 [TOC]，该位置输出本文目录，点击跳到对应标题。
   在 the_content 优先级 9 处理（早于 wpautop 10 / do_shortcode 11），
   保证"补 id"与"扫目录"用的是同一份文本，href 与 id 必然对得上。
   嵌套用深度归一化，h1→h3 跳级不会算错层级。
   scroll-margin-top 声明式让位，原生锚点/外部 #hash/后退全都生效。

3. 重建评论区
   旧实现的问题：列表渲染与 AJAX 渲染各写一份 HTML，已经分叉
   （AJAX 返回的新评论没有回复按钮）；<li> 被 <div> 包着，嵌套回复错位。
   现在统一到 yang_comment_html() 单一渲染函数，列表与 AJAX 只差一个
   is-new 类。同时修掉三处真实缺陷：
     · 评论项用 flex 会把 <ol class="yang-children"> 当成第三个 flex 项，
       子评论跑到父评论右侧、正文被挤到 156px、页面横向溢出 75px —— 改 grid
     · 成功提示在 exitReplyMode() 之前设置，被其末尾的 setStatus('','')
       擦掉，用户提交成功却看不到反馈 —— 调整顺序
     · 窄屏媒体查询打不过深层选择器（媒体查询不增加特异性），
       嵌套头像反向变大 —— 补深层覆盖

   与 wpDiscuz 解耦：邮件模块不再无条件 return false（那等于永久关掉
   notify_postauthor 且不报错）；插件在场时不加载主题评论资源，
   避免双份表单互抢。

验证：PHP 语法 73/73；_static_qingming 36、_test_toc 53、
_test_comments 62、_test_comments_falsify 17、
_toc_geometry 121、_toc_geometry_falsify 9、
_comments_geometry 98、_comments_geometry_falsify 23，全部 0 失败。
线上端到端 29/0（真实文章渲染目录 + 真实评论数据渲染）。
 2026-10-24 01:03:36 +08:00