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
parent db2e9c4230
commit 492d8e11a6
6 changed files with 265 additions and 31 deletions
@@ -20,6 +20,9 @@
  /* 主色 / 文字三级 / 线 —— 与 comments.css 同一套取值，视觉统一 */
  --ar-primary: #00a2ff;
  --ar-primary-soft: #eaf6ff;
+  /* 3.2.48：新增深主色 —— 导航按钮的默认字色要它。
+   * 取值与 comments.css 的 --yq-primary-dark 完全一致，两处按钮才同色。 */
+  --ar-primary-dark: #0089db;
  --ar-text: #33383f;
  --ar-text-2: #5b6470;
  --ar-text-3: #6b7280;
@@ -37,18 +40,63 @@
 1. 头部：年份 + 总数 + 上排导航
 --------------------------------------------------------------*/

+/* 头部一行：年份 + 共 x 篇 + 上排导航
+ *
+ * 🔴 3.2.48：`align-items` 从 center 改成 **flex-end（底边对齐）**。
+ *
+ * 用户原话：「后面的共x篇，的位置，有点不太好，太高了，比前面的2026
+ * 还要高，让它降下来和2026，也就是年份的底边对齐」。
+ *
+ * 为什么 center 会出这个问题：年份 26px、总数 12.5px，两者行盒高度
+ * 差 11px 以上，垂直居中后小字号的**顶部**会跑到年份顶部上面去 ——
+ * 视觉上「共 15 篇」比「2026」还高，读起来像两个不相干的元素。
+ * flex-end 让两者的底边贴同一条线，正是用户的描述。
+ *
+ * 为什么不用 baseline：baseline 对齐的是文字基线，12.5px 的字
+ * 基线之上还有一半行高，底边仍会差几个像素，不满足"底边对齐"。
+ *
+ * ⚠️ flex-end 对齐的是 **margin box**，所以下面 .ar-year 的
+ * margin 必须清零 —— kratos 的 `.article .content h3` 会给它
+ * margin-bottom: 16px，不清掉的话"底边"会整体上浮 16px。 */
 .yang-archives .ar-head {
  display: flex;
  flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-end;
  gap: 8px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ar-line, #eaedf2);
 }

-.yang-archives .ar-year {
+/* 🔴🔴 3.2.48 重要教训：这里的 font-size / font-weight 原来**从来没生效过**。
+ *
+ * 本文件写 22px/700，线上真实计算值是 **18px/500**（CDP
+ * CSS.getMatchedStylesForNode 抓到的赢家是
+ * `.k-main .details .article .content h3 { font-size: 18px }`，
+ * 特异性 (0,4,1)）。本规则 `.yang-archives .ar-year` 只有 (0,2,0)，
+ * 而且 kratos.min.css 在 archives.css **之前**入队也没用 ——
+ * 层叠先比特异性，后比顺序。同一个坑还有 .ar-month-title：
+ * 写 14px/600，实际 16px/500。
+ *
+ * 用户当时说的「年份字体再大一点」，前提是"现在就是 22px"，
+ * 实际它一直是 18px。
+ *
+ * 修法不是继续加类名硬拼（.yang-archives .ar-year.ar-year 这种
+ * 特异性 hack 会随模板层级变化再次失效），而是：
+ *   ① 选择器带上 .k-main 前缀，把特异性提到 (0,5,0)，稳定压过 (0,4,1)；
+ *   ② 同时写 font-weight，因为 h3 的 500 也来自同一条规则。
+ * 判据不能只断言「CSS 文件里有 22px」——那种断言上面这段一直是通过的。
+ * 必须断言**线上真实渲染的 computed font-size**，见 _live_geom18.js。 */
+.yang-archives .ar-year,
+.k-main .details .content .yang-archives .ar-year {
+  /* margin 必须清零：kratos 的 `.article .content h3` 会给它
+   * margin-bottom: 16px。底边对齐（align-items: flex-end）对的是
+   * margin box，留着这 16px 会让年份整体上浮，"底边齐平"落空。
+   * 实测线上 computed margin 曾经就是 `24px 0px 16px`。 */
  margin: 0;
-  font-size: 22px;
+  /* 用户要求「再大一点」：18px（实际生效值）→ 26px。
+   * 26 而不是 24，是因为年份是这一屏的锚点，且它右侧还有个
+   * 12.5px 的总数要形成明显对比。 */
+  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ar-text, #33383f);
@@ -59,6 +107,10 @@
 .yang-archives .ar-total {
  font-size: 12.5px;
  color: var(--ar-text-3, #6b7280);
+  /* 底边对齐时，行盒底部自带一点留白（line-height 1.6 的 descent），
+   * 微调 1px 让它与年份的数字底边视觉齐平，而不是与原文字盒齐平。 */
+  line-height: 1.6;
+  padding-bottom: 1px;
 }

 /*--------------------------------------------------------------
@@ -91,15 +143,32 @@
  min-width: 0;
 }

+/* 上一年 / 下一年按钮
+ *
+ * 3.2.48：整套换成「写下你的评论」(.comments-jump-form) 的观感。
+ * 用户原话：「上一年，下一年的按钮，看不清，样式和写下你的评论
+ * 保持一致吧，就是平时是浅蓝色的框，鼠标悬停后是浅蓝色背景，白色字」。
+ *
+ * 原来是灰边框 var(--ar-line,#eaedf2) + 灰字 #5b6470，在白底上
+ * 对比度只有 2.x:1，确实"看不清"。
+ *
+ * 具体取值与 comments.css 的 .comments-jump-form 逐项对齐：
+ *   border   #cfe6fb        浅蓝细框（原 #eaedf2）
+ *   color    var(--ar-primary-dark,#0089db)  深蓝字（原 #5b6470）
+ *   hover    background var(--ar-primary,#00a2ff) + color #fff
+ *            （原来是 primary-soft #eaf6ff 浅蓝底 + 蓝字）
+ *
+ * ⚠️ 禁用态（is-disabled）不能跟着 hover 变蓝 —— 它压根不可点。
+ *    下面单独覆盖，且用 higher 特异性压住 hover 规则。 */
 .yang-archives .ar-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
-  padding: 6px 12px;
-  border: 1px solid var(--ar-line, #eaedf2);
+  padding: 6px 14px;
+  border: 1px solid #cfe6fb;
  border-radius: var(--ar-radius, 4px);
-  background-color: #fff;
-  color: var(--ar-text-2, #5b6470);
+  background-color: transparent;
+  color: var(--ar-primary-dark, #0089db);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
@@ -109,11 +178,18 @@

 .yang-archives a.ar-nav-btn:hover {
  border-color: var(--ar-primary, #00a2ff);
-  background-color: var(--ar-primary-soft, #eaf6ff);
-  color: var(--ar-primary, #00a2ff);
+  background-color: var(--ar-primary, #00a2ff);
+  color: #fff;
  text-decoration: none;
 }

+/* 悬停时里面两段小字（年份、箭头）也跟着变白，否则会是灰字压蓝底 */
+.yang-archives a.ar-nav-btn:hover .ar-nav-year,
+.yang-archives a.ar-nav-btn:hover .ar-nav-arrow {
+  color: #fff;
+  opacity: 1;
+}
+
 .yang-archives a.ar-nav-btn:focus-visible {
  outline: 2px solid var(--ar-primary, #00a2ff);
  outline-offset: 2px;
@@ -131,16 +207,21 @@
  font-variant-numeric: tabular-nums;
 }

-.yang-archives a.ar-nav-btn:hover .ar-nav-year {
-  color: inherit;
-}
+/* 3.2.48：hover 变白的规则已合并到上面 .ar-nav-btn:hover 那一组
+ * （原来只有 .ar-nav-year，箭头仍是灰色 opacity .8，蓝底上发灰）。
+ * 这里只保留禁用态。 */

 /* 禁用态：到最早/最新一年。用 opacity + 去掉交互，
- * 不用 display:none —— 按钮消失会让"上排只剩一个按钮"看着像坏了。 */
+ * 不用 display:none —— 按钮消失会让"上排只剩一个按钮"看着像坏了。
+ *
+ * ⚠️ 禁用态是 <span>，不是 <a>，所以上面 `a.ar-nav-btn:hover` 选不中它，
+ *    不需要额外用 !important 去压。这一点在改样式时容易忽略：
+ *    如果将来把禁用态也改成 <a>，就必须回来补一条覆盖。 */
 .yang-archives .ar-nav-btn.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
  background-color: transparent;
+  color: var(--ar-text-3, #6b7280);
 }

 /*--------------------------------------------------------------
@@ -151,13 +232,20 @@
  margin-top: 18px;
 }

-.yang-archives .ar-month-title {
+/* 月份标题
+ *
+ * 🔴 与 .ar-year 同一个坑：`.k-main .details .article .content h4`
+ *   （(0,4,1)）把本规则原写的 14px/600 全部压掉，线上实际是 16px/500。
+ *   所以这里补一条带 .k-main 前缀的高特异性选择器。 */
+.yang-archives .ar-month-title,
+.k-main .details .content .yang-archives .ar-month-title {
  display: flex;
-  align-items: center;
+  align-items: baseline;
  gap: 8px;
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 600;
+  line-height: 1.5;
  color: var(--ar-text-2, #5b6470);
 }

@@ -329,8 +417,16 @@
  }

  .yang-archives .ar-head {
-    /* 窄屏下导航换到标题下方并且铺满，两个按钮各占一半 */
-    align-items: baseline;
+    /* 窄屏下导航换到标题下方并且铺满，两个按钮各占一半。
+     *
+     * 🔴 3.2.48：这里原来写 align-items: baseline。改成 flex-end ——
+     *    用户要求的是「共 x 篇与年份**底边**对齐」，而 baseline 对的
+     *    是文字基线，小字号元素基线之上还有半行行高，底边仍会差几像素。
+     *    窄屏如果还用 baseline，宽屏修好了、手机上又错回去，
+     *    这种"只在大屏对"的 bug 最容易在验收时漏掉。
+     *    （不需要保留 baseline：导航按钮在同一行时靠 flex 自己撑，
+     *      换行后是独立一行，对齐方式对它没有影响。） */
+    align-items: flex-end;
  }

  .yang-archives .ar-nav {
@@ -130,25 +130,99 @@
  box-shadow: none;
 }

-.comments-head {
+/* 3.2.48：`padding-bottom` 从 15px 改成 0 —— 分隔线现在挂在 .title
+ * 自己的 border-bottom 上（见下），标题已自带 12px 下内边距。
+ * 若这里还留 15px，线与第一条评论之间会空出 27px，线看起来"飘在
+ * 半空"。 */
+/* 标题：不加任何装饰。
+ * 曾经在左侧加过一条主色竖条 —— 用户明确要求去掉：标题本身字重足够，
+ * 竖条只是多余的视觉噪音，而且它逼着标题让出 12px 左内边距，
+ * 让「评论」两个字和下方评论正文的左边缘对不齐。
+ *
+ * 🔴🔴 3.2.48：标题下面那条**灰线太短**的真正原因，以及为什么线要搬家。
+ *
+ * 用户看到的是：「评论者两个字下面，有一个灰色的线，太短了」。
+ * （"评论者"其实是标题里的「评论（614）」，线上没有"评论者"三个字。）
+ *
+ * ── 这条线原来是哪来的 ──────────────────────────────────────
+ * **不是本文件画的**，是 kratos.css:1534：
+ *     .k-main .details .comments .title {
+ *       padding: 16px 0;
+ *       border-bottom: 1px solid #f0f0f0;    ← 就是它
+ *       font-size: 19px;
+ *     }
+ * 特异性 (0,4,0)，压过本文件原来的 `.comments-head .title`（0,2,0）。
+ * 所以早期在本文件里调它，怎么调都不生效。
+ *
+ * ── "短"有两层原因，只修一层不够 ────────────────────────────
+ * 第一层：h3 作为 flex 项默认 `flex: 0 1 auto`，宽度收缩到**内容宽度**
+ *         （线上实测 110.5px），而下方评论分隔线是 li 的 border-bottom，
+ *         撑满容器（实测 561.98px）。差 451px。
+ * 第二层（更关键）：即使把 h3 撑到 `flex: 1 1 auto`，**它也只能长到
+ *         「写下你的评论」按钮的左边缘**——那个按钮是同一行的第二个
+ *         flex 项（`flex: 0 0 auto`）。所以 h3 上的任何边框，
+ *         原理上都不可能"右侧到头"。
+ *
+ * ⇒ 结论：**线必须画在整行上**，不能画在标题元素上。
+ *    `.comments-head` 是这一行的容器，它的宽度就是 561.98px，
+ *    与评论列表的 li 完全一致 —— 这才是"和下面的分割线一样长"。
+ *    标题和右侧按钮都浮在这条线之上，视觉上就是
+ *    「评论（614）  ……  写下你的评论」压在一条通栏细线上。
+ *
+ *    所以下面 .title 里**必须** `border-bottom: none`，
+ *    并且把 kratos 那条 (0,4,0) 的 #f0f0f0 一起干掉 ——
+ *    否则会出现**两条线**：h3 自己一条短的、容器一条长的。
+ *
+ * 判据（_live_geom18.js）：线的右端必须与
+ * `.yang-comment-list > .yang-comment` 的 border-box 右边缘对齐。
+ * ⚠️ 这条判据是"量出来的"，不是"看 CSS 有没有写" ——
+ *    因为第一层原因就是"写了也不生效"，靠读代码根本发现不了。 */
+.comments-head,
+.k-main .details .comments .comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
-  padding-bottom: 15px;
+  /* 12px 下内边距把文字与线隔开（原来靠 h3 的 padding-bottom，
+   * 线搬到容器上后这个活也归容器）。 */
+  padding-bottom: 12px;
+  /* 🔴 线画在这里：整行宽度 = 评论列表宽度。
+   * 加 `.k-main …` 前缀是为了在后续若有更高特异性规则时仍能守住，
+   * 同时也把 kratos 给 .comments 加的 margin/padding 影响考虑进去
+   * （实测容器与 li 同宽，见 _live_geom18.js 的实测值）。
+   * ⚠️ 这个前缀曾经**只写在注释里、代码里没加** —— 注释与代码不一致，
+   *    被发布脚本的第②条判据抓出来了。现在真加上了。 */
+  border-bottom: 1px solid var(--yq-line, #eaedf2);
 }

-/* 标题：不加任何装饰。
- * 曾经在左侧加过一条主色竖条 —— 用户明确要求去掉：标题本身字重足够，
- * 竖条只是多余的视觉噪音，而且它逼着标题让出 12px 左内边距，
- * 让「评论」两个字和下方评论正文的左边缘对不齐。 */
-.comments-head .title {
+/* 标题本体：**不再有自己的下边框**（线已搬到容器上）。
+ *
+ * 🔴 `border-bottom: none` 这一句是必须的，不是清理：
+ *    kratos.css 的 `.k-main .details .comments .title` 给了
+ *    `border-bottom: 1px solid #f0f0f0`（(0,4,0)），不显式干掉就会出现
+ *    两条线 —— 短的在内、长的在外，比原来只有一条短的更难看。
+ *    选择器带 .k-main + .comments-head，特异性 (0,5,0)，压得过 (0,4,0)。
+ *
+ * `flex: 1 1 auto; min-width: 0` 仍然保留：让标题吃掉剩余宽度，
+ * 把「写下你的评论」稳定推到最右；同时 min-width:0 防止长标题
+ * 把按钮挤出容器。但**它已经不负责任何线条的长度**了。 */
+.comments-head .title,
+.k-main .details .comments .comments-head .title {
+  flex: 1 1 auto;
+  min-width: 0;
+  /* margin 必须显式清零：kratos.css 的 `h1..h6 { margin: 0 0 30px 0 }`
+   * 会给它 30px 下外边距，线与列表之间会空出一大块，看起来"线飘在上面"。 */
  margin: 0;
  color: #1f2328;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.005em;
+  /* 干掉 kratos 那条 (0,4,0) 的 #f0f0f0 下边框 —— 见上面注释。
+   * 横向 padding 也归零：一旦有左右内边距，标题文字的左右边缘
+   * 就会与评论正文对不齐。 */
+  padding: 0;
+  border-bottom: none;
 }

 /* 「写下你的评论」：原来用 3px 圆角 + #f4f8ff 底，白底上几乎看不出是按钮。
@@ -196,9 +196,17 @@
      return frag;
    }

-    // 月份升序（1 月在先）—— 与 PHP 的 ksort 一致
+    /* 月份**倒序**（12 月在先）—— 与 PHP 的 krsort 一致。
+     *
+     * 🔴 3.2.48 从升序改成降序，必须与 inc/theme-archives.php 那个
+     *    krsort 同向。这里写死方向、不读服务端顺序，是因为切年时
+     *    JS 拿到的 JSON 里 months 是**对象**，对象键序在 JS 里对
+     *    纯数字键会**自动升序**（ECMAScript 的整数索引规则），
+     *    `Object.keys()` 得到的本来就是 1..12 升序 —— 也就是说
+     *    「照抄服务端顺序」这件事在这里根本做不到，只能自己排。
+     */
    var months = Object.keys(yd.months).map(Number).sort(function (a, b) {
-      return a - b;
+      return b - a;
    });

    if (!months.length) {
@@ -216,7 +224,11 @@

      if (showMonth) {
        var h = el('h4', 'ar-month-title', fmt(i18n.month, pad2MonthLabel(m)));
-        var cnt = el('span', 'ar-month-count', formatNum(md.count || 0));
+        /* 3.2.48：裸数字 → 「共 N 篇」，与 PHP 侧同一文案。
+         * i18n.monthCount 由 PHP 透传（'共 %s 篇'），这里只做占位替换，
+         * **不要**在 JS 里硬写中文 —— 站点语言切换时两侧会不一致。 */
+        var cnt = el('span', 'ar-month-count',
+          fmt(i18n.monthCount || '共 %s 篇', formatNum(md.count || 0)));
        h.appendChild(cnt);
        box.appendChild(h);
      }
@@ -277,11 +277,34 @@ if ($yang_per_page <= 0) {
                        ?>
 						<div class="comment-toolbar" role="toolbar"
 							aria-label="<?php esc_attr_e('评论格式工具条', 'kratos'); ?>">
+							<?php
+                            /* 🔴 3.2.48：分隔线规则统一为「**每个按钮之间一条**」。
+                             *
+                             * 原来 4 个工具按钮（加粗、斜体、颜色、表情、代码 里
+                             * 加粗与斜体算一组）只有 3 条分隔线，位置是：
+                             *     [B][I] │ [A] │ [😊] │ [<>]
+                             * 加粗和斜体挤在同一组、中间没线，于是用户看到
+                             * 「有些中间有细线，有些没有」。
+                             *
+                             * 现在：**5 个按钮、4 条线，每两个相邻按钮之间一条，
+                             * 首尾都不画**。
+                             *     [B] │ [I] │ [A] │ [😊] │ [<>]
+                             * 判据在 _comments_geometry.js：sep 数量必须恒等于
+                             * 「.comment-tool-btn 数量 - 1」，且每条 sep 左右两侧
+                             * 都紧邻一个按钮（不是贴在容器边上）。
+                             *
+                             * ⚠️ 别把它写成"每个按钮后面跟一条"：那样最后会多出
+                             *    一条贴到容器右边缘的孤线，看起来像个掉队的竖线。
+                             */
+                            ?>
 							<button type="button" class="comment-tool-btn" id="yang-tool-bold"
 								title="<?php esc_attr_e('加粗', 'kratos'); ?>"
 								aria-label="<?php esc_attr_e('加粗', 'kratos'); ?>">
 								<span class="comment-tool-glyph comment-tool-glyph-bold" aria-hidden="true">B</span>
 							</button>
+
+							<span class="comment-toolbar-sep" aria-hidden="true"></span>
+
 							<button type="button" class="comment-tool-btn" id="yang-tool-italic"
 								title="<?php esc_attr_e('斜体', 'kratos'); ?>"
 								aria-label="<?php esc_attr_e('斜体', 'kratos'); ?>">
@@ -235,10 +235,26 @@ function yang_archives_data()
        return $cache;
    }

-    // 年份倒序、月份升序 —— 见文件头「排序」一节
+    /* 年份、月份**都是倒序** —— 最近的在最上面。
+     *
+     * 3.2.48 改：月份从 ksort（1 月在前）改成 krsort（12 月在前）。
+     * 用户的原话是「月份和日期也倒序排列吧，就是说，最近的在最上面，
+     * 年份是最近的最靠前，月份和日期也应该保持一致」。
+     *
+     * 三者必须同向，否则页面会自相矛盾：线上真实数据出现过
+     * 「1 月 → 2 月 → 5 月 → 10 月」的月份顺序，而月内文章是
+     * 「01-21 → 01-20 → 01-19」，年份是「2026 → 2025」。
+     * 于是读者看到的整体序列是「2026 年的 1 月、2 月、5 月、10 月，
+     * 到 2025 年又从 1 月开始」—— 年份在往下走，月份却每年重置方向。
+     *
+     * 🔴 改这里必须同步改 assets/js/archives.js 的 buildYear：
+     *    切年时那段 JS 会用同一套类名重建 DOM，它的月份排序写死在
+     *    `Object.keys(...).sort((a,b) => a-b)`。只改 PHP 会出现
+     *    「首屏 12→1，点一下下一年变回 1→12」这种只在交互后才暴露的错。
+     *    判据在 _archives_e2e.js：首屏与切年后的月份序列必须同向。 */
    krsort($years);
    foreach ($years as $y => $yv) {
-        ksort($years[$y]['months']);
+        krsort($years[$y]['months']);
    }

    /* 月内按日期倒序 —— 由产品自己排，不依赖 SQL 的 ORDER BY。
@@ -394,7 +410,17 @@ function yang_archives_render_year($ydata, $year, $show_month)
                    esc_html((string) $m)
                )
                . '<span class="ar-month-count">'
-                . esc_html(number_format_i18n($mdata['count']))
+                /* 3.2.48：原来是**裸数字**，用户反馈「也不知道什么意思」。
+                 * 改成「共 N 篇」，与年度那一行的文案一致。
+                 *
+                 * 🔴 容器类名 ar-month-count 保留不动 —— CSS 的胶囊底、
+                 *    等宽数字都挂在它上面；JS 侧 buildYear 也用同一个类名。
+                 *    改文案不改结构，两侧判据都不用迁。 */
+                . sprintf(
+                    /* translators: %s: 该月文章数 */
+                    esc_html__('共 %s 篇', 'kratos'),
+                    esc_html(number_format_i18n($mdata['count']))
+                )
                . '</span>'
                . '</h4>';
        } else {
@@ -657,6 +683,9 @@ function yang_archives_shortcode($atts, $content = '', $tag = 'archives')
                'untitled'   => __('（无标题）', 'kratos'),
                'empty'      => __('这一年还没有文章。', 'kratos'),
                'totalFmt'   => __('共 %s 篇', 'kratos'),
+                /* 3.2.48：月份计数文案。与 totalFmt 同款，但**单独一个键**——
+                 * 将来若想给月份换个说法（比如「本月 N 篇」），不必牵动年度那行。 */
+                'monthCount' => __('共 %s 篇', 'kratos'),
            ),
        ),
        JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
@@ -1,7 +1,7 @@
 /*
 Theme Name: Kratos_Yang
 Text Domain: kratos_Yang
-Version: 3.2.47
+Version: 3.2.48
 Requires PHP: 7.0
 Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。
 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好