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

归档页倒序与排版修正 + 评论区样式统一 + 无用资源清理 #18

New Issue
Closed
opened 2026-10-26 06:18:00 +00:00 by laoyang · 3 comments
laoyang commented 2026-10-26 06:18:00 +00:00
Owner
Copy Link
Copy Source

来源

用户在 /blogtime 归档页与评论区提出的 8 条改进，一次性交付。

需求清单

一、归档页（[archives] 短代码 / /blogtime）

# 需求 现状
1 月份改倒序，最近的在最上面（与年份、日期保持一致） 年份已倒序（krsort）、日期已倒序（strcmp 降序），月份是升序（ksort）⇒ 只这一项要改
2 年份字体再大一点 .ar-year 当前 font-size: 22px
3 「共 x 篇」下移，与年份底边对齐 .ar-head 是 display:flex; align-items:center ⇒ 小字号的总数被垂直居中，比年份顶部还高
4 每月的裸数字改成「共 x 篇」 .ar-month-count 只输出数字，读者无法理解含义

二、上一页 / 下一页按钮

# 需求 现状
5 样式对齐「写下你的评论」按钮：平时浅蓝色描边框，悬停浅蓝底 + 白字 .ar-nav-btn 现在是灰边框 var(--ar-line) + 浅灰字，看不清

三、评论区

# 需求 现状
6 标题下方那条灰线太短，要延长到与下方评论分隔线等长、右侧到头 待定位（评论区标题行为 .comments-head）
7 工具条分隔细线不统一：要有就都有，没有就都没有 4 个按钮之间只有 3 条 .comment-toolbar-sep，加粗/斜体之间缺一条

四、代码卫生

# 需求
8 清查无用 / 未生效的 JS、CSS（历史遗留），确认无用的一律删除

验收标准

  • 归档页月份从 12 月排到 1 月；年份、日期维持倒序不变
  • 年份字号大于当前 22px
  • 「共 x 篇」基线（底边）与年份底边齐平，不再高于年份顶部
  • 每月分组标题旁显示「共 N 篇」，不再是裸数字
  • 上/下一年按钮：默认态浅蓝描边 + 蓝字；:hover 浅蓝实底 + 白字；与 .comment-submit / .comments-jump-form 观感一致
  • 评论区标题下方灰线与顶层评论分隔线左右两端均对齐
  • 工具条分隔线数量与位置统一
  • 删除的 JS/CSS 必须给出「无用」的证据（全站 grep 无引用 + 线上真实页面无对应节点），不做"看起来没用就删"

约束

  • 线上 PHP 7.4 是硬基线（本机 8.4/8.5 只用于 lint）
  • number_format_i18n() 不加到年份/月份等编号上（会变「2,026」）
  • 只走 /theme-update/ 主题更新通道，不覆盖服务器上的 wp-content/themes/kratos_yang/
  • 所有改动必须配套守卫 + 反向注入（证明守卫真会红），并在线上真实页面做几何级复核
## 来源 用户在 [/blogtime](https://yangyq.net/blogtime) 归档页与评论区提出的 8 条改进，一次性交付。 ## 需求清单 ### 一、归档页（`[archives]` 短代码 / `/blogtime`） | # | 需求 | 现状 | |---|---|---| | 1 | **月份改倒序**，最近的在最上面（与年份、日期保持一致） | 年份已倒序（`krsort`）、日期已倒序（`strcmp` 降序），**月份是升序**（`ksort`）⇒ 只这一项要改 | | 2 | **年份字体再大一点** | `.ar-year` 当前 `font-size: 22px` | | 3 | **「共 x 篇」下移，与年份底边对齐** | `.ar-head` 是 `display:flex; align-items:center` ⇒ 小字号的总数被垂直居中，**比年份顶部还高** | | 4 | **每月的裸数字改成「共 x 篇」** | `.ar-month-count` 只输出数字，读者无法理解含义 | ### 二、上一页 / 下一页按钮 | # | 需求 | 现状 | |---|---|---| | 5 | **样式对齐「写下你的评论」按钮**：平时浅蓝色描边框，悬停浅蓝底 + 白字 | `.ar-nav-btn` 现在是灰边框 `var(--ar-line)` + 浅灰字，看不清 | ### 三、评论区 | # | 需求 | 现状 | |---|---|---| | 6 | **标题下方那条灰线太短**，要延长到与下方评论分隔线等长、右侧到头 | 待定位（评论区标题行为 `.comments-head`） | | 7 | **工具条分隔细线不统一**：要有就都有，没有就都没有 | 4 个按钮之间只有 3 条 `.comment-toolbar-sep`，**加粗/斜体之间缺一条** | ### 四、代码卫生 | # | 需求 | |---|---| | 8 | **清查无用 / 未生效的 JS、CSS**（历史遗留），确认无用的一律删除 | ## 验收标准 - 归档页月份从 12 月排到 1 月；年份、日期维持倒序不变 - 年份字号大于当前 22px - 「共 x 篇」基线（底边）与年份底边齐平，不再高于年份顶部 - 每月分组标题旁显示「共 N 篇」，不再是裸数字 - 上/下一年按钮：默认态浅蓝描边 + 蓝字；`:hover` 浅蓝实底 + 白字；与 `.comment-submit` / `.comments-jump-form` 观感一致 - 评论区标题下方灰线与顶层评论分隔线**左右两端均对齐** - 工具条分隔线数量与位置统一 - 删除的 JS/CSS 必须给出「无用」的证据（全站 grep 无引用 + 线上真实页面无对应节点），不做"看起来没用就删" ## 约束 - 线上 PHP **7.4** 是硬基线（本机 8.4/8.5 只用于 lint） - `number_format_i18n()` 不加到年份/月份等**编号**上（会变「2,026」） - 只走 `/theme-update/` 主题更新通道，**不覆盖服务器上的 `wp-content/themes/kratos_yang/`** - 所有改动必须配套守卫 + 反向注入（证明守卫真会红），并在线上真实页面做几何级复核
laoyang commented 2026-10-26 06:29:25 +00:00
Author
Owner
Copy Link
Copy Source

探针 #18-A：无用资源清查结论（不改代码，只报事实）

用户第 8 条要求「检查一下代码，看看里面有没有没用到的 js 和 css，有可能是之前遗留的，如果是没用的、没起到效果的，应该尽量删除」。

我做了四轮查证，结论是：没有可以安全删除的资源。下面把每一轮的方法和结论写清楚，避免以后有人再从零查一遍。

第一轮：文件级零引用（grep 引用点）

枚举 assets/js（13 个）+ assets/css（14 个），逐个在 103 个非 assets 源文件里搜文件名：

  • 唯一零引用的是 kratos.js 和 kratos.css。
  • 但不能删：它们是 kratos.min.js / kratos.min.css 的源码版。
    • kratos.min.css（34,516 B）与 kratos.css（47,278 B）逐条比对，规则集一致，是压缩产物。
    • kratos.min.js 里额外含 grin() 表情函数，站点的 javascript:grin(...) 表情链接依赖它。
    • 站点实际只 enqueue .min 版本（inc/theme-core.php:55、90），源码版留着是给后续维护/重新压缩用的。

第二轮：真实 DOM 比对（5 个代表性页面）

抓 首页/归档页/留言本/关于/分类页 的真实 DOM（含滚到底触发懒加载），取类名并集得 257 个，再拿主题自己的 6 个 CSS 里定义的全部类名去比，得到 64 个「DOM 里没有」的候选。

这 64 个基本都是误报，因为 JS 会动态建类名：

候选 实际状况
.yang-toc-*（31 个） toc.js 建侧栏、theme-toc.php:629 用 'yang-toc-lv' . $lv 拼接生成 lv3~lv6；:985 用 'yang-toc-rail-' . $side 拼接 left/right
.yang-lb-*（18 个） lightbox.js 打开时才建
.is-pending .is-new .is-hidden JS classList.add 动态加
.is-ok .is-err comments.js:66 用 ' is-' + type 拼接
.comments-empty .yang-comment-edit .comments-login-required PHP 条件分支里输出（评论为空/管理员/未登录），当前页面没命中

第三轮：三重判据终审

三条同时成立才算死：① CSS 定义过；② 5 页 DOM 都没有；③ 全部 PHP/JS 源码都搜不到该字符串。并加了白名单（post-2 admin-bar wp-smiley sr-only 等 WP/Bootstrap 标准类名）。

剩 10 个候选，逐个核实后全部是活的：

类名 为什么不能删
.yang-dark（15 条规则） toc.css:508 注释写明：「主题没有内置暗色模式，但用户可能在自定义 CSS 里加」——这是给用户自定义 CSS 预留的钩子，不是遗留垃圾
.yang-toc-lv3/4/5/6 拼接生成（见上）
.yang-toc-rail-left/right 拼接生成（见上）
.yang-lb-lock lightbox.css:100 注释写明是「万一 JS 没设」的兜底网（JS 正常走内联 style）
.comment-body WP 原生评论类名的兼容兜底；本主题用 Yang_Walker_Comment 接管，当前确实不输出，但留着不算错
.yang-toc-target 只是那条选择器列表里第一个选择器，同组 h1[id]…h6[id] 都有效，删它省不下一个字节

第四轮：其他维度

  • CSS 内部完全重复的规则块：comments.css / archives.css 均 0 组。
  • 空的/非法 CSS 声明（无冒号、值为空）：0 处。
  • JS 内部未被调用的函数：comments.js / archives.js / lightbox.js 均 0；toc.js 的 onScroll 是误报（它作为 addEventListener 的回调被引用，不是直接调用）。
  • 废弃备份文件（.bak .old *~ .orig .swp .DS_Store）：0 个。
  • assets/js/buttons/more.js：编辑器工具栏插件，theme-shortcode.php 注册了 10 个按钮全指向它，活的。

结论

3.2.48 不删除任何 JS/CSS。用户要的「尽量删除没用的」，就这份代码库而言，答案是「确实没有可删的」—— 前几轮看着像垃圾的，全是有意设计的预留钩子、拼接类名或兜底网。

这一条也是本轮最有价值的产出：如果按「DOM 里没出现就删」去动手，会删掉侧边目录、图片灯箱、暗色主题适配、滚动锁兜底——线上会立即可见地坏掉，而静态 grep 和单页探针都发现不了。

## 探针 #18-A：无用资源清查结论（不改代码，只报事实） 用户第 8 条要求「检查一下代码，看看里面有没有没用到的 js 和 css，有可能是之前遗留的，如果是没用的、没起到效果的，应该尽量删除」。 我做了四轮查证，**结论是：没有可以安全删除的资源**。下面把每一轮的方法和结论写清楚，避免以后有人再从零查一遍。 ### 第一轮：文件级零引用（grep 引用点） 枚举 `assets/js`（13 个）+ `assets/css`（14 个），逐个在 103 个非 assets 源文件里搜文件名： - 唯一零引用的是 `kratos.js` 和 `kratos.css`。 - 但**不能删**：它们是 `kratos.min.js` / `kratos.min.css` 的源码版。 - `kratos.min.css`（34,516 B）与 `kratos.css`（47,278 B）逐条比对，规则集一致，是压缩产物。 - `kratos.min.js` 里额外含 `grin()` 表情函数，站点的 `javascript:grin(...)` 表情链接依赖它。 - 站点实际只 enqueue `.min` 版本（`inc/theme-core.php:55、90`），源码版留着是给后续维护/重新压缩用的。 ### 第二轮：真实 DOM 比对（5 个代表性页面） 抓 首页/归档页/留言本/关于/分类页 的真实 DOM（含滚到底触发懒加载），取类名并集得 **257 个**，再拿主题自己的 6 个 CSS 里定义的全部类名去比，得到 64 个「DOM 里没有」的候选。 **这 64 个基本都是误报**，因为 JS 会动态建类名： | 候选 | 实际状况 | |---|---| | `.yang-toc-*`（31 个） | `toc.js` 建侧栏、`theme-toc.php:629` 用 `'yang-toc-lv' . $lv` **拼接**生成 lv3~lv6；`:985` 用 `'yang-toc-rail-' . $side` 拼接 left/right | | `.yang-lb-*`（18 个） | `lightbox.js` 打开时才建 | | `.is-pending` `.is-new` `.is-hidden` | JS `classList.add` 动态加 | | `.is-ok` `.is-err` | `comments.js:66` 用 `' is-' + type` **拼接** | | `.comments-empty` `.yang-comment-edit` `.comments-login-required` | PHP 条件分支里输出（评论为空/管理员/未登录），当前页面没命中 | ### 第三轮：三重判据终审 三条同时成立才算死：① CSS 定义过；② 5 页 DOM 都没有；③ 全部 PHP/JS 源码都搜不到该字符串。并加了白名单（`post-2` `admin-bar` `wp-smiley` `sr-only` 等 WP/Bootstrap 标准类名）。 剩 10 个候选，逐个核实后**全部是活的**： | 类名 | 为什么不能删 | |---|---| | `.yang-dark`（15 条规则） | `toc.css:508` 注释写明：「主题没有内置暗色模式，但用户可能在自定义 CSS 里加」——这是**给用户自定义 CSS 预留的钩子**，不是遗留垃圾 | | `.yang-toc-lv3/4/5/6` | 拼接生成（见上） | | `.yang-toc-rail-left/right` | 拼接生成（见上） | | `.yang-lb-lock` | `lightbox.css:100` 注释写明是「万一 JS 没设」的**兜底网**（JS 正常走内联 style） | | `.comment-body` | WP 原生评论类名的兼容兜底；本主题用 `Yang_Walker_Comment` 接管，当前确实不输出，但留着不算错 | | `.yang-toc-target` | 只是那条选择器列表里**第一个选择器**，同组 `h1[id]`…`h6[id]` 都有效，删它省不下一个字节 | ### 第四轮：其他维度 - **CSS 内部完全重复的规则块**：comments.css / archives.css 均 **0 组**。 - **空的/非法 CSS 声明**（无冒号、值为空）：**0 处**。 - **JS 内部未被调用的函数**：comments.js / archives.js / lightbox.js 均 0；toc.js 的 `onScroll` 是**误报**（它作为 `addEventListener` 的回调被引用，不是直接调用）。 - **废弃备份文件**（`.bak` `.old` `*~` `.orig` `.swp` `.DS_Store`）：**0 个**。 - **`assets/js/buttons/more.js`**：编辑器工具栏插件，`theme-shortcode.php` 注册了 10 个按钮全指向它，活的。 ### 结论 `3.2.48` **不删除任何 JS/CSS**。用户要的「尽量删除没用的」，就这份代码库而言，答案是「确实没有可删的」—— 前几轮看着像垃圾的，全是有意设计的预留钩子、拼接类名或兜底网。 **这一条也是本轮最有价值的产出**：如果按「DOM 里没出现就删」去动手，会删掉侧边目录、图片灯箱、暗色主题适配、滚动锁兜底——线上会立即可见地坏掉，而静态 grep 和单页探针都发现不了。
laoyang commented 2026-10-26 10:43:08 +00:00
Author
Owner
Copy Link
Copy Source

3.2.48 已发布到更新通道（提交 492d8e1）

八条需求全部落地，zip 与 readme 已推到 /theme-update/，update.json 已指向 3.2.48。
服务器上的 wp-content/themes/kratos_yang/ 没有被覆盖（仍是 3.2.47），需要你在 WP 后台点一次升级。

逐条对照

# 需求 结果
1 月份、日期也倒序 PHP krsort + JS .sort((a,b)=>b-a)。两边都得改——对象键序对纯数字整数键会强制升序，服务端排好的顺序传不过来
2 年份字体再大一点 22px → 26px / 700，但要紧的是它原来根本没生效：.yang-archives .ar-year 是 (0,2,0)，被 .k-main .details .article .content h3 的 (0,4,1) 压死，线上实为 18px。加 .k-main 前缀提到 (0,5,0) 才真生效。.ar-month-title 同一个坑，一并修
3 「共 x 篇」降下来与年份底边对齐 .ar-head 的 align-items 改 flex-end；.ar-year 的 margin 显式清零（flex-end 对齐的是 margin box，不清零等于没改）；窄屏媒体查询同步改，否则手机上又错回去
4 每月数字写成「共 x 篇」 PHP 走 sprintf(esc_html__('共 %s 篇'))，JS 用同一个 i18n 键 monthCount（新键，没复用 totalFmt）
5 上/下一年按钮改成浅蓝框、悬停浅蓝底白字 默认 1px solid #cfe6fb + 透明底 + 深蓝字；悬停主色实底 + 白字。.ar-nav-year / .ar-nav-arrow 也跟着变白，否则图标在蓝底上看不见
6 「评论者」下的灰线延长到与评论分隔线等长 见下方「改动过的方案」
7 工具条分隔细线统一 5 个按钮 4 条线：[B] │ [I] │ [A] │ [😊] │ [</>]
8 清理无用 JS/CSS 结论：没有可安全删除的，代码一行未动（排查过程见另一条评论）

第 6 条改动过一次方案（值得记一笔）

最初以为把标题 flex: 1 1 auto 撑宽就行。实测不行：.comments-head 是 flex 行，右边还站着
「写下你的评论」按钮（flex: 0 0 auto），标题撑满也只能长到按钮左边缘——原理上到不了右端
（实测标题 110.5px vs 评论项 561.98px，差的 451px 就是按钮 + gap）。

最终把线从标题搬到 .comments-head 容器上，标题显式 border-bottom: none 干掉 kratos 的
#f0f0f0（否则一短一长两条，比原来更难看）。

发布判据当场抓到一个真错

容器那条规则必须带 .k-main 前缀才压得过 kratos 的 .comments .title。
第一版注释里写着「带 .k-main 前缀」，代码里漏了——发布脚本报红才发现的。
注释不能当证据。

验证

  • 归档单测 113/0（反向注入 13 条全部真红）
  • 归档 e2e 112/0（反向 24 条全部真红）
  • 评论几何 157/0（新增第 13 组：标题线等长，桌面 1440 + 手机 390 双端面）
  • 评论几何反向 18 组全部真红，含「线搬回标题」「容器和标题都画」两种错误形态
  • 发布脚本内置反证 R1~R7 全部有效
  • 包内 235 文件，六个改动文件 md5 与本地逐一相符
  • 包内 PHP 全量 lint 通过

你要做的一步

WP 后台 → 外观 → 主题 → 检查更新 → 升级到 3.2.48。

升级后我可以跑线上真实几何探针复核（现在量到的仍是 3.2.47 的旧形态）。
先不关单，等你升级完确认效果再关。

## 3.2.48 已发布到更新通道（提交 `492d8e1`） 八条需求全部落地，zip 与 readme 已推到 `/theme-update/`，`update.json` 已指向 **3.2.48**。 服务器上的 `wp-content/themes/kratos_yang/` **没有被覆盖**（仍是 3.2.47），需要你在 WP 后台点一次升级。 ### 逐条对照 | # | 需求 | 结果 | |---|---|---| | 1 | 月份、日期也倒序 | PHP `krsort` + JS `.sort((a,b)=>b-a)`。**两边都得改**——对象键序对纯数字整数键会强制升序，服务端排好的顺序传不过来 | | 2 | 年份字体再大一点 | 22px → **26px / 700**，但要紧的是它原来**根本没生效**：`.yang-archives .ar-year` 是 (0,2,0)，被 `.k-main .details .article .content h3` 的 (0,4,1) 压死，线上实为 18px。加 `.k-main` 前缀提到 (0,5,0) 才真生效。`.ar-month-title` 同一个坑，一并修 | | 3 | 「共 x 篇」降下来与年份底边对齐 | `.ar-head` 的 `align-items` 改 `flex-end`；`.ar-year` 的 margin 显式清零（`flex-end` 对齐的是 **margin box**，不清零等于没改）；窄屏媒体查询同步改，否则手机上又错回去 | | 4 | 每月数字写成「共 x 篇」 | PHP 走 `sprintf(esc_html__('共 %s 篇'))`，JS 用同一个 i18n 键 `monthCount`（新键，没复用 `totalFmt`） | | 5 | 上/下一年按钮改成浅蓝框、悬停浅蓝底白字 | 默认 `1px solid #cfe6fb` + 透明底 + 深蓝字；悬停主色实底 + 白字。`.ar-nav-year` / `.ar-nav-arrow` 也跟着变白，否则图标在蓝底上看不见 | | 6 | 「评论者」下的灰线延长到与评论分隔线等长 | 见下方「改动过的方案」 | | 7 | 工具条分隔细线统一 | **5 个按钮 4 条线**：`[B] │ [I] │ [A] │ [😊] │ [</>]` | | 8 | 清理无用 JS/CSS | 结论：**没有可安全删除的**，代码一行未动（排查过程见另一条评论） | ### 第 6 条改动过一次方案（值得记一笔） 最初以为把标题 `flex: 1 1 auto` 撑宽就行。实测不行：`.comments-head` 是 flex 行，右边还站着 「写下你的评论」按钮（`flex: 0 0 auto`），标题撑满也只能长到按钮左边缘——**原理上到不了右端** （实测标题 110.5px vs 评论项 561.98px，差的 451px 就是按钮 + gap）。 最终把**线从标题搬到 `.comments-head` 容器**上，标题显式 `border-bottom: none` 干掉 kratos 的 `#f0f0f0`（否则一短一长两条，比原来更难看）。 ### 发布判据当场抓到一个真错 容器那条规则**必须带 `.k-main` 前缀**才压得过 kratos 的 `.comments .title`。 第一版注释里写着「带 .k-main 前缀」，代码里**漏了**——发布脚本报红才发现的。 注释不能当证据。 ### 验证 - 归档单测 113/0（反向注入 13 条全部真红） - 归档 e2e 112/0（反向 24 条全部真红） - 评论几何 157/0（新增第 13 组：标题线等长，桌面 1440 + 手机 390 双端面） - 评论几何反向 18 组全部真红，含「线搬回标题」「容器和标题都画」两种错误形态 - 发布脚本内置反证 R1~R7 全部有效 - 包内 235 文件，六个改动文件 md5 与本地逐一相符 - 包内 PHP 全量 lint 通过 ### 你要做的一步 WP 后台 → 外观 → 主题 → 检查更新 → 升级到 3.2.48。 升级后我可以跑线上真实几何探针复核（现在量到的仍是 3.2.47 的旧形态）。 **先不关单**，等你升级完确认效果再关。
laoyang commented 2026-10-27 14:51:34 +00:00
Author
Owner
Copy Link
Copy Source

按用户确认收尾，交付内容见上条发布评论。

交付版本：3.2.48（归档倒序/字号/底边对齐 + 评论标题线等长 + 工具条分隔线统一）

用户已验收（线上主题已升级至 3.2.58，包含本单全部改动），关闭本单。

按用户确认收尾，交付内容见上条发布评论。 交付版本：3.2.48（归档倒序/字号/底边对齐 + 评论标题线等长 + 工具条分隔线统一） 用户已验收（线上主题已升级至 3.2.58，包含本单全部改动），关闭本单。
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#18