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:
+15
-3
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user