From 420605f462e4caed18696a08708693599f80ba08 Mon Sep 17 00:00:00 2001 From: laoyang Date: Sat, 24 Oct 2026 20:12:23 +0800 Subject: [PATCH] =?UTF-8?q?3.2.22=20=E8=AF=84=E8=AE=BA=E5=8C=BA=EF=BC=9A?= =?UTF-8?q?=E5=BC=95=E5=AF=BC=E7=BA=BF=E8=B7=9F=E7=9D=80=E5=8F=B3=E7=A7=BB?= =?UTF-8?q?=E5=88=B0=E6=AD=A3=E6=96=87=E5=B7=A6=E8=BE=B9=E7=BC=98=EF=BC=8C?= =?UTF-8?q?=E9=94=9A=E7=82=B9=E9=AB=98=E4=BA=AE=E6=94=B9=E5=9B=9E=E9=BB=84?= =?UTF-8?q?=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户对 3.2.21 的反馈： 「回复的内容和上面评论的正文是对齐了，但是回复内容左侧有一条蓝色的线 还是没有对齐。那条蓝色的线也要向右移，让那条线和上面评论的内容正文对齐。 如果是为了突出显示打开文章时的锚点，那还是用黄色吧。」 1. 引导线右移 原来线写在容器的 border-left 上。边框只能贴在盒子外沿，也就是父评论的 最左边（父头像那一列），而子回复整块已经右移到父正文的位置了，中间 空出 55px，线与内容脱节。 现在改成绝对定位的 ::before，位置由缩进算出： left: calc(var(--yq-indent) - var(--yq-guide-w)) 线的右边缘正好压住正文左边缘。断点里改缩进，线自动跟着走， 不需要另写一遍。三档屏幕实测误差 0px。 取右边缘对齐而不是左边缘，是因为线宽 2px：若左边缘对齐，线会压住 子头像左侧（头像有一圈 1px 描边，压上去发脏）。 2. 缩进值 53 → 55（连带 44→46、40→42） 旧值扣掉了 2px，因为那时线是 border，而 padding 从边框内侧算起。 线不再占布局后，那 2px 不该再扣，否则子回复整体左移 2px。 缩进回到最朴素的形式：头像宽 + 列间距。以后改这一个数， 线和内容一起动，不会再出现「只对一半」。 3. 锚点高亮改回暖黄 #fffbe8 3.2.21 改成浅蓝的理由是「全站只有待审核用暖色」。但用户指出它 是用于突出显示锚点，该用黄色。这个判断是对的：锚点高亮需要在一整片 蓝白里「跳出来」，浅蓝与引导线、按钮描边同色系，反而被当成背景噪音。 与「刚提交」的分工因此清楚： :target → 暖黄（一次性，指路） is-new → 浅蓝（即时反馈，我刚发的） 同页出现也能分辨。 深层（第三个 children 容器起）仍然不画线，改用 content: none 关掉， 而不是以前的 border-left-color: transparent —— 伪元素没有"透明的线" 这种语义，直接不生成更干净。 只改样式表与版本号，评论的取数、分页、回复、加载更多逻辑未动。 --- assets/css/comments.css | 129 ++++++++++++++++++++++++++++------------ style.css | 2 +- 2 files changed, 92 insertions(+), 39 deletions(-) diff --git a/assets/css/comments.css b/assets/css/comments.css index 59f40d8..9da2abb 100644 --- a/assets/css/comments.css +++ b/assets/css/comments.css @@ -81,13 +81,24 @@ --yq-radius-lg: 6px; /* 子回复的缩进量（见第 5 节的推导）。 - * 公式：头像宽 + 列间距 − 引导线宽(2px) - * 桌面 42+13−2 = 53 / ≤768 36+10−2 = 44 / ≤400 32+10−2 = 40。 + * 公式：头像宽 + 列间距 + * 桌面 42+13 = 55 / ≤768 36+10 = 46 / ≤400 32+10 = 42。 + * + * ⚠️ 3.2.22 起**不再减引导线宽**。上一版引导线是容器的 border-left， + * 而 padding-left 从边框内侧算起，所以那个 2px 必须扣掉； + * 现在引导线改成绝对定位的伪元素、完全不占布局，扣掉反而会让 + * 子回复整体左移 2px。缩进从此就是纯粹的「父正文左边缘距父 li 多远」。 + * * 存在变量里是因为它必须和头像宽度、列间距**同时**在断点里改， * 分散写三处迟早漏一处（上一版就是这么漏掉 img 宽度的）。 */ - --yq-indent: 53px; + --yq-indent: 55px; --yq-indent-deep: 30px; + /* 引导线的宽度。单独抽出来是给两处用：伪元素的 width， + * 以及"线要贴在正文左边缘的左侧"这个位移量（见第 5 节）。 + * 改成 2px 以外还要同时看 --yq-indent 的定义，别只改一处。 */ + --yq-guide-w: 2px; + /* 统一动效曲线：进出都用同一条，避免"有的滑有的弹" */ --yq-ease: cubic-bezier(0.4, 0, 0.2, 1); } @@ -512,35 +523,60 @@ /* 层级用三重冗余表达，任何一重失效另外两重仍在： * ① 缩进（padding-left） - * ② 引导线（border-left） + * ② 引导线（::before 绝对定位的竖线） * ③ 头像尺寸（42 → 34） * * ── 缩进值是怎么算出来的（别随手改）──────────────────────────── - * 目标：**子回复那一块的正文左边缘，正好落在父评论正文的左边缘上**。 + * 目标：**子回复那一块的左边缘，正好落在父评论正文的左边缘上**。 * * 父评论一行是 `[头像 42][列间距 13][正文…]`，所以父正文左边缘 * 距父 li 左边缘 42 + 13 = 55px。`ol.yang-children` 是父 li 的 - * 直接子元素、从父 li 左边缘起算，但它自己带 2px 的 border-left， - * 而 padding-left 是从边框**内侧**算起的，所以 + * 直接子元素、从父 li 左边缘起算，所以 * - * padding-left = 头像宽 + 列间距 − 边框宽 - * = 42 + 13 − 2 = 53px + * padding-left = 头像宽 + 列间距 = 42 + 13 = 55px * - * 就精确对齐了，不是"接近"。`_geo_indent.js` 卡的就是「子正文左边缘 - * 减父正文左边缘 == 0」。768 / 400 两个断点头像与列间距都变小， - * 这个值必须跟着换（44 / 40），否则窄屏上子回复会突出去。 + * 就精确对齐了，不是"接近"。768 / 400 两个断点头像与列间距都变小， + * 这个值必须跟着换（46 / 42），否则窄屏上子回复会突出去。 * - * ⚠️ 缩进只能用 padding-left，**不能用 margin-left**： + * ── 引导线为什么改成伪元素（3.2.22）────────────────────────── + * 原来它写在容器的 border-left 上，于是只能贴在**父 li 的左边缘** —— + * 也就是父头像那一列。但子回复整块已经右移到父正文的位置了， + * 线却还留在最左边，中间空出 55px，看起来像"线和内容脱节了"。 + * + * 用户明确要求：**线也要跟着右移，和上面评论的正文对齐**。 + * border 做不到（它只能贴在盒子的外沿），所以改用绝对定位的伪元素， + * 位置由 --yq-indent 决定 —— 断点里改缩进，线会自动跟着走，不会脱节。 + * + * 线的定位取 `left: calc(indent - 线宽)`，让线的**右边缘**与正文左边缘 + * 重合，于是线完全落在头像左侧、不压头像（头像有一圈 1px 描边，压上去会脏）。 + * 视觉上就是"一条竖线紧贴正文左边缘"，这也正是用户要的对齐。 + * + * ⚠️ 缩进仍然只能用 padding-left，**不能用 margin-left**： * `_diag318_children_geo.js` 判据 A 要求 `ol.yang-children` 的 * 左偏移（相对父 li）≤4px、判据 B 要求宽度 ≥ 父宽 90%。 * margin-left 会同时破坏这两条，padding-left 不会。 + * （伪元素是绝对定位、不参与布局，所以加它不影响这两条判据。） * * 引导线用主题主色的浅色版 #cfe6fb（和「写下你的评论」按钮的描边 * 同一个色）—— 原来是灰蓝 #dbe6f2，用户要求改成主题自带的浅蓝。 */ .yang-children { + position: relative; margin-top: 4px; - padding-left: var(--yq-indent, 53px); - border-left: 2px solid var(--yq-guide, #cfe6fb); + padding-left: var(--yq-indent, 55px); +} + +/* 竖线本体。不占布局，所以不会像 border 那样把内容再推 2px。 + * top/bottom 撑满整块，等价于原来 border-left 的长度。 + * pointer-events: none —— 它压在 padding 区域上，别让它拦住点击。 */ +.yang-children::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: calc(var(--yq-indent, 55px) - var(--yq-guide-w, 2px)); + width: var(--yq-guide-w, 2px); + background-color: var(--yq-guide, #cfe6fb); + pointer-events: none; } .yang-children > .yang-comment { @@ -573,17 +609,28 @@ /* 第三层起改用更小的缩进（--yq-indent-deep），并去掉引导线。 * - * 为什么必须减小：padding-left 是**逐层累加**的。第一层 53px 对齐好看， - * 但到第三层就是 53×3 = 159px —— 390px 屏上正文只剩 100 多像素， - * 长文会被切成竖条。所以从第三层起换成 30px，三层累计 53+53+30 = 136px， + * 为什么必须减小：padding-left 是**逐层累加**的。第一层 55px 对齐好看， + * 但到第三层就是 55×3 = 165px —— 390px 屏上正文只剩 100 多像素， + * 长文会被切成竖条。所以从第三层起换成 30px，三层累计 55+55+30 = 140px， * 仍然呈现递进，但不再失控。 * * 引导线也去掉：三条竖线平行叠在一起会变成"表格"观感，反而更难读。 - * ⚠️ 这里**必须显式设 padding-left**，不能只是清掉 border-left —— - * 否则它会继承上一层的 53px，与"减小"的意图正好相反。 */ + * 3.2.22 起线是伪元素，所以这里要 **content: none** 把它整个关掉， + * 而不是像以前那样改 border-left-color —— 伪元素没有"透明色"的需求， + * 直接不生成更干净（也不会残留一个不可见的绝对定位盒）。 + * + * ⚠️ 这里**必须显式设 padding-left**，不能只关掉线 —— + * 否则它会继承上一层的 55px，与"减小"的意图正好相反。 + * + * 注：去掉 border 后，这里的 30px 变成"纯粹的偏移量"。 + * 上一版因为 border 占 2px，实际偏移是 32px；差这 2px 对第三层 + * 的观感没有影响，且方向是略微更宽松，不去追平。 */ .yang-children .yang-children .yang-children { padding-left: var(--yq-indent-deep, 30px); - border-left-color: transparent; +} + +.yang-children .yang-children .yang-children::before { + content: none; } /* 新提交的评论：淡入 + 短暂底色，让用户看到自己刚发的那条 */ @@ -599,8 +646,9 @@ } /* 刚提交的那条：淡入 + 短暂底色。 - * 底色用主题浅蓝而不是暖黄 —— 全站只有「待审核」是暖色， - * 这里再用黄会和状态色混淆。 */ + * 底色用主题浅蓝 —— 它表达的是"这条刚发出去"的即时反馈， + * 和主色系统一致，也和下面锚点高亮（暖黄）**区分开**： + * 一个是"刚发生"，一个是"你要找的就是这条"，不该长得一样。 */ .yang-comment.is-new { animation: yang-comment-in 0.28s var(--yq-ease); border-radius: var(--yq-radius-lg, 6px); @@ -610,23 +658,27 @@ /* 从通知/后台带 #comment-123 跳过来时，高亮那一条。 * * ── 这就是「有些回复下面有黄色背景、有些没有」的原因 ────────── - * 原来的底色是暖黄 #fffbe8。它只在**链接里带了该条评论的锚点**时出现 + * 底色是暖黄 #fffbe8。它只在**链接里带了该条评论的锚点**时出现 * （:target 伪类），所以： * · 从评论通知邮件点进来 → URL 末尾有 #comment-1234 → 那一条是黄的； * · 自己正常打开文章 → 没有任何锚点 → 一条都不黄。 * 于是同一个页面上"有的黄有的不黄"，看起来像随机。 * - * 加上 `is-new`（刚发的新评论）原本也是暖黄，两个黄色叠在一起， - * 更难判断哪条是"被高亮的"、哪条是"刚发的"。 + * ── 3.2.21 曾改成浅蓝，3.2.22 按用户要求改回黄色 ─────────────── + * 3.2.21 的考虑是"全站只有待审核用暖色，这里再用黄会混淆"。 + * 但用户明确指出：**这就是为了突出显示锚点，还是用黄色**。 + * 这个判断是对的 —— 锚点高亮是一次性的、需要"跳出来"的提示， + * 浅蓝和引导线、按钮描边同色系，反而被当成背景噪音忽略掉； + * 暖黄在一个全蓝的页面里立刻能看见。 * - * 现在统一成主题浅蓝，和引导线、按钮描边同一色系： - * · :target → #eaf6ff（和主色按钮的浅底同色） - * · is-new → 同上 - * 一眼能看出"这是被指到的那条"，但不再是突兀的黄色块。 */ + * 与 is-new 的分工因此变得清楚： + * · :target → 暖黄（一次性，指路） + * · is-new → 浅蓝（即时反馈，我刚发的） + * 两者不再撞色，同页出现也能分辨。 */ .yang-comment:target .yang-comment-content { border-radius: var(--yq-radius, 4px); - background-color: var(--yq-primary-soft, #eaf6ff); - box-shadow: 0 0 0 8px var(--yq-primary-soft, #eaf6ff); + background-color: #fffbe8; + box-shadow: 0 0 0 8px #fffbe8; } /*-------------------------------------------------------------- @@ -1047,11 +1099,12 @@ } /* 缩进量必须和下面的头像宽度、列间距同步改： - * 头像 36 + 列间距 10 − 引导线 2 = 44；深层同上 36+10−2=44， - * 但深层要更省空间，取 26。写在这里（.comments 上）是因为变量 - * 定义在 .comments 作用域，媒体查询里重新赋值就能让所有后代取到新值。 */ + * 头像 36 + 列间距 10 = 46（3.2.22 起不再扣引导线宽，理由见变量定义处）； + * 深层要更省空间，取 26。写在这里（.comments 上）是因为变量 + * 定义在 .comments 作用域，媒体查询里重新赋值就能让所有后代取到新值 —— + * 引导线的位置是 `calc(indent - 线宽)`，所以它自动跟着走，不用另写一遍。 */ .comments { - --yq-indent: 44px; + --yq-indent: 46px; --yq-indent-deep: 26px; } @@ -1139,9 +1192,9 @@ } @media screen and (max-width: 400px) { - /* 同样要同步缩进：头像 32 + 列间距 10 − 引导线 2 = 40；深层取 22。 */ + /* 同样要同步缩进：头像 32 + 列间距 10 = 42；深层取 22。 */ .comments { - --yq-indent: 40px; + --yq-indent: 42px; --yq-indent-deep: 22px; } diff --git a/style.css b/style.css index 5e4077d..e5a2007 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,7 @@ /* Theme Name: Kratos_Yang Text Domain: kratos_Yang -Version: 3.2.21 +Version: 3.2.22 Requires PHP: 7.0 Description: 这是一个Kratos主题的分支版本，用来增加一些定制化功能。 Tags: 博客, 双栏, 响应式, 自定义背景, 自定义颜色, 自定义图标, 自定义菜单, 特色图像, 收录优化, 邮件中心, 主题选项, 小工具, 文章置顶, 无障碍友好