From 2c876f8776e8164b83cd69448805b8132e581ef5 Mon Sep 17 00:00:00 2001 From: dsh Date: Wed, 16 Sep 2026 18:24:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BD=A9=E8=9B=8B=E8=B0=83=E6=95=B4=EF=BC=9A?= =?UTF-8?q?=E6=96=87=E6=A1=88=E6=94=B9=E5=9B=9E=E5=8E=9F=E5=8F=A5=EF=BC=8C?= =?UTF-8?q?=E5=8E=BB=E6=8E=89=E6=82=AC=E5=81=9C=E5=8F=98=E8=89=B2/?= =?UTF-8?q?=E4=B8=8B=E5=88=92=E7=BA=BF=EF=BC=8C=E9=82=A3=E5=8F=A5=E8=AF=9D?= =?UTF-8?q?=E6=94=B9=E5=9B=9E=E7=BA=AF=E6=96=87=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 按站主要求三处调整： 1) 文案改回原文 他还需要一个诗意的世界。 → 他还应该拥有诗意的世界。 （仍是 12 字，和最长那句 15 字的关系不变，固定字号不受影响） 2) 去掉悬停的变色与下划线 现在那句话悬停时完全不变化，保持纯排版。 删掉 .hero-quote-link 的两条规则，以及 reduced-motion 里对它的引用。 3) 那句话不再可点 去掉 h1 里的 ，文字恢复成纯文本。豆瓣链接只剩卡片里那一处。 交互全部落在署名上：悬停/聚焦淡入署名 → 点署名展开卡片 → 卡片里去豆瓣。 这样读的时候不会误触跳走。 署名按钮补了 aria-label（「查看这句话的出处：王小波《万寿寺》」）， 因为现在它是唯一的交互元素，读屏用户需要知道它是干嘛的。 验证：pnpm build 退出码 0 - 新文案在 hero.*.js 里，旧文案无残留 - dist/index.html 里豆瓣链接只剩 1 处、h1 内为纯 、无 hero-quote-link - 产物 CSS 从 16 条 hero-quote 规则减到 14 条， 仍保留署名淡入、展开态常显、@media(hover:none) 手机常显 --- src/components/hero.tsx | 24 ++++++++---------------- src/data/reading.json | 2 +- src/styles/global.css | 20 ++------------------ 3 files changed, 11 insertions(+), 35 deletions(-) diff --git a/src/components/hero.tsx b/src/components/hero.tsx index 6a0f4ea..0b2a466 100644 --- a/src/components/hero.tsx +++ b/src/components/hero.tsx @@ -14,7 +14,7 @@ const DOUBAN_URL = "https://www.douban.com/personage/27480512/" const phrases = [ { prefix: "一个人只拥有此生此世", highlight: "是不够的，" }, - { prefix: "他还需要一个", highlight: "诗意的世界。" }, + { prefix: "他还应该拥有", highlight: "诗意的世界。" }, ] /** @@ -166,27 +166,18 @@ export function Hero() { {/* 彩蛋：这句话出自王小波《万寿寺》。 - - 悬停/聚焦：整句话由墨黑变朱红，下方淡入署名（无 hover 的设备常显署名） - - 点那句话 → 直接去豆瓣人物页 - - 点署名 → 展开一张极简卡片，卡片里也能去豆瓣 + - 平时完全看不出可点，那句话本身不动（纯粹的排版） + - 悬停/聚焦：下方淡入署名（无 hover 的设备常显署名） + - 点署名 → 展开一张极简作者卡片，卡片里可以去豆瓣 - 结构上用

而不是把 h1 本身变成链接：保住标题语义， - 而且点击热区只包住文字，不会连整行空白一起可点。 - 光标 ::after 挂在 h1 上（链接外面），点光标不会触发跳转。 + 那句话故意不做成链接：点击文字不跳转，交互只落在署名上， + 免得读的时候误触跳走。 */}

- - {renderText()} - + {renderText()}

{/* 固定高度的一行，内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */} @@ -197,6 +188,7 @@ export function Hero() { onClick={() => setCardOpen((open) => !open)} aria-expanded={cardOpen} aria-controls="hero-quote-card" + aria-label="查看这句话的出处：王小波《万寿寺》" > —— 王小波 ·《万寿寺》 diff --git a/src/data/reading.json b/src/data/reading.json index 07c3ba4..1f5a236 100644 --- a/src/data/reading.json +++ b/src/data/reading.json @@ -1,5 +1,5 @@ { - "updatedAt": "2026-09-16T10:03:27.302Z", + "updatedAt": "2026-09-16T10:24:32.413Z", "source": "weread", "books": [ { diff --git a/src/styles/global.css b/src/styles/global.css index ead198b..7ed8cb4 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -804,29 +804,14 @@ a.card-github:hover .github-logo { /* ——— 首屏彩蛋：那句话出自王小波《万寿寺》 ——— * - * 默认完全看不出可点。悬停/聚焦时整句话由墨黑转朱红、浮出细下划线， - * 署名随之淡入。点那句话直接去豆瓣；点署名展开一张极简作者卡片。 + * 那句话本身不做任何变化（不加下划线、不变色、不可点），保持纯排版。 + * 悬停/聚焦时只有署名淡入，点署名展开一张极简作者卡片。 */ .hero-quote { position: relative; } -.hero-quote-link { - color: inherit; - text-decoration: none; - transition: color 240ms ease; -} - -.hero-quote:hover .hero-quote-link, -.hero-quote:focus-within .hero-quote-link { - color: var(--primary); - text-decoration: underline; - text-decoration-thickness: 2px; - text-underline-offset: 0.14em; - text-decoration-color: var(--primary); -} - /* 署名占一行固定高度：平时透明，hover 才淡入。 空间一直留着，所以展开卡片时下面的按钮不会往上跳。 */ .hero-quote-credit-row { @@ -922,7 +907,6 @@ a.card-github:hover .github-logo { } @media (prefers-reduced-motion: reduce) { - .hero-quote-link, .hero-quote-credit, .hero-quote-card { transition: none;