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 失败（每条都对应上面某一条诉求）， 发布后要求全绿。
This commit is contained in:
+32
-3
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user