diff --git a/assets/css/archives.css b/assets/css/archives.css index 0dbe027..13e1a04 100644 --- a/assets/css/archives.css +++ b/assets/css/archives.css @@ -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 —— 按钮消失会让"上排只剩一个按钮"看着像坏了。 + * + * ⚠️ 禁用态是 ，不是 ，所以上面 `a.ar-nav-btn:hover` 选不中它， + * 不需要额外用 !important 去压。这一点在改样式时容易忽略： + * 如果将来把禁用态也改成 ，就必须回来补一条覆盖。 */ .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 { diff --git a/assets/css/comments.css b/assets/css/comments.css index a466978..9096af4 100644 --- a/assets/css/comments.css +++ b/assets/css/comments.css @@ -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 底，白底上几乎看不出是按钮。 diff --git a/assets/js/archives.js b/assets/js/archives.js index b7712ee..dbeadcf 100644 --- a/assets/js/archives.js +++ b/assets/js/archives.js @@ -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); } diff --git a/comments.php b/comments.php index d147065..2fec580 100644 --- a/comments.php +++ b/comments.php @@ -277,11 +277,34 @@ if ($yang_per_page <= 0) { ?>