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:
+113
-17
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user