From 96bbb3d1b53cbb1c61359cb34e84ec1c89a18b78 Mon Sep 17 00:00:00 2001 From: laoyang Date: Fri, 23 Oct 2026 20:43:25 +0800 Subject: [PATCH] =?UTF-8?q?v3.2.14=20=E5=93=80=E6=82=BC=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E6=9D=A1=E6=94=B9=E5=88=B0=E6=95=B4=E9=A1=B5=E6=9C=80=E4=B8=8A?= =?UTF-8?q?=E6=96=B9=E6=AD=A3=E4=B8=AD=EF=BC=8C=E5=8F=AA=E5=9C=A8=E7=BA=AA?= =?UTF-8?q?=E5=BF=B5=E6=97=A5=E5=BD=93=E5=A4=A9=E5=87=BA=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户要求：哀悼说明「放在最上方的最中间，只在纪念日、哀悼模式开启时才显示， 其他时间不显示」。 改的过程中量出三个真问题： 1. 提示条与站点标题重叠 32px。提示条从 y=0 开始、高 40px，而导航栏 .k-nav 是 position:absolute; top:0、z-index 1030；提示条 z-index 9990 ⇒ 直接盖在 Logo 上。CSS 每个字都没写错，就是叠在一起。 2. 内容偏左 38px。为了给右侧关闭按钮让位写了 padding-right:46px、 左侧只有 18px ⇒ 文字中心 602 vs 视口中心 640。"最中间"没做到。 3. 页脚有常驻的「纪念日哀悼说明」链接，一年 365 天都显示。平时打开 站点的人既没看到黑白也不知在哀悼什么，这个入口本身就是困惑源。 修法： - 提示条占文档流第一行、width:100%，内容交给内层 .ymb-inner 居中， 左右 padding 等宽、关闭按钮 absolute 不占内部流 ⇒ 几何中心 = 视口中心。 - .k-nav 是绝对定位，body 的 padding 推不动它（这个原因单看代码想不到， 是量几何量出来的）⇒ 单独补一条 body.has-yang-mourning-bar .k-nav{top:var(--ymb-h)}。 偏移量由脚本读真实高度写入，窄屏换行后也准。 - 不用 fixed：那会滚动时顶部永远压一条深色带，内容从它下面穿过去。 - 移除页脚常驻入口与 wp_footer 注册，说明页入口只在提示条里。 非哀悼日输出 0 字节。 验证： - run_tests2 163 条（新增 9 条位置契约） - _check_hidden.php 19 条（非哀悼日 0 字节、每个纪念日都能触发） - mourning_bar_geometry.py 28 条（线上真实页面实测 4 种视口： 顶部贴边、横跨整宽、居中误差 ≤1px、与标题和导航栏零重叠） - falsify 44 条注入全被抓住（新增 9 条） 两个假绿当场被反面验证抓出并修掉： - 判据照着 fixed 方案写，实现改成 relative 后 4 条断言集体假红 （教训：设计前提变了，判据必须跟着改）。 - 页脚断言用 ob_start 取输出，但函数是 return 不是 echo ⇒ $fl 恒空 ⇒ 注入"返回一个链接"仍全绿（教训：否定式断言在空输出上恒真）。 --- inc/theme-mourning.php | 119 +++++++++++++++++++++++++++++++---------- style.css | 2 +- 2 files changed, 92 insertions(+), 29 deletions(-) diff --git a/inc/theme-mourning.php b/inc/theme-mourning.php index ab87b0c..c1165e4 100644 --- a/inc/theme-mourning.php +++ b/inc/theme-mourning.php @@ -258,17 +258,50 @@ function yang_mourning_status_text() ); } /** - * 哀悼期间在页面顶部显示一条提示，链接到说明页 + * 哀悼期间在页面**最顶部正中**显示一条提示，链接到说明页 * - * ── 为什么必须放在顶部 ──────────────────────────────────────── + * ── 为什么必须放在最顶部 ────────────────────────────────────── * 用户的原话是「别人都不知道咋回事，为啥变黑白」。只把入口藏在页脚， * 绝大多数人根本不会看到 —— 他们看到一片灰就关掉了。 - * 所以提示条要出现在**首屏就能看到**的位置。 + * 所以提示条必须出现在**首屏第一眼就看到**的位置：整页最上方、水平居中。 + * + * ── 只在哀悼日出现 ──────────────────────────────────────────── + * 平时打开站点的人不应该看到任何"哀悼说明"的入口 —— 他既没看到黑白， + * 也不知道在对什么致哀，那个入口本身就是困惑源。所以页脚的常驻链接 + * 已经移除，说明页的入口就只在这条提示里。 * * ── 为什么不做成弹窗 ────────────────────────────────────────── * 弹窗会挡住内容，纪念日当天每个访客每次访问都被弹一次，是骚扰。 * 一条可以关闭的细横条才是合适的强度，且关闭状态记在 sessionStorage * （用 session 而不是 localStorage：当天关闭后，第二天不应该还记着）。 + * + * ── 定位方式：占文档流第一行 + 同步下移导航栏 ───────────────── + * 目标是「整页最上方、水平居中」。实现时连撞两次，都靠真实几何测出来： + * + * 第一版：`position:relative`，排进文档流。左右 padding 是 + * `9px 46px 9px 18px`（左 18、右 46，为了给关闭按钮让位）， + * 内容整体偏左（实测文字中心 602、视口中心 640，偏 38px）—— + * "最中间"根本没做到。同时它从 y=0 开始、高 40px，而导航栏 + * `.k-nav` 是 `absolute; top:0`、z-index 1030，提示条 z-index 9990 + * ⇒ **压在站点标题上方**（与 `.navbar-brand` 实测重叠 32px），把 Logo 遮住。 + * + * 第二版：改成 `position:fixed; top:0; left:0; right:0`，并给 body 加 + * `padding-top`。居中问题解决了（中心精确等于视口中心），但**重叠仍在 31px**。 + * 原因很隐蔽：`.k-nav` 是 `position:absolute`，它的包含块是初始包含块 + * （视口），**body 的 padding 推不动它**。 + * + * 现在的做法（两件事配合）： + * 1. 提示条本身 `position:relative` 占文档流第一行、横跨整宽， + * 内容交给内层 `.ymb-inner` 居中，左右 padding 等宽， + * 关闭按钮 absolute 不占内部流 ⇒ 几何中心 = 视口中心。 + * 它占位后，`.k-header` 会被自然推下去，正文不受影响。 + * 2. 唯独 `.k-nav` 是 absolute，必须单独补一条 + * `body.has-yang-mourning-bar .k-nav{top:var(--ymb-h)}` 把它挪到提示条下方。 + * 没有提示条时该变量不存在、偏移为 0，行为与改动前完全一致。 + * + * 不用 fixed 的理由：fixed 会一直悬浮，滚动看文章时顶部永远压一条深色带， + * 内容从它下面穿过去；而且它不占位，必须靠 padding 补偿，补偿量还算不准 + * （窄屏换行后高度会变）。占文档流第一行没有这些问题。 */ function yang_mourning_notice_bar() { @@ -287,36 +320,67 @@ function yang_mourning_notice_bar() : __('今天是纪念日，本站以黑白致哀。', 'kratos'); ?>
- - - + + + + +
-