彩蛋调整:文案改回原句,去掉悬停变色/下划线,那句话改回纯文本

按站主要求三处调整:

1) 文案改回原文
   他还需要一个诗意的世界。 → 他还应该拥有诗意的世界。
   (仍是 12 字,和最长那句 15 字的关系不变,固定字号不受影响)

2) 去掉悬停的变色与下划线
   现在那句话悬停时完全不变化,保持纯排版。
   删掉 .hero-quote-link 的两条规则,以及 reduced-motion 里对它的引用。

3) 那句话不再可点
   去掉 h1 里的 <a>,文字恢复成纯文本。豆瓣链接只剩卡片里那一处。
   交互全部落在署名上:悬停/聚焦淡入署名 → 点署名展开卡片 → 卡片里去豆瓣。
   这样读的时候不会误触跳走。

署名按钮补了 aria-label(「查看这句话的出处:王小波《万寿寺》」),
因为现在它是唯一的交互元素,读屏用户需要知道它是干嘛的。

验证:pnpm build 退出码 0
- 新文案在 hero.*.js 里,旧文案无残留
- dist/index.html 里豆瓣链接只剩 1 处、h1 内为纯 <span>、无 hero-quote-link
- 产物 CSS 从 16 条 hero-quote 规则减到 14 条,
  仍保留署名淡入、展开态常显、@media(hover:none) 手机常显
This commit is contained in:
dsh
2026-09-16 18:24:49 +08:00
parent 0f74467933
commit 2c876f8776
3 changed files with 11 additions and 35 deletions
+8 -16
View File
@@ -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><a> 而不是把 h1 本身变成链接:保住标题语义,
而且点击热区只包住文字,不会连整行空白一起可点。
光标 ::after 挂在 h1 上(链接外面),点光标不会触发跳转。
那句话故意不做成链接:点击文字不跳转,交互只落在署名上,
免得读的时候误触跳走。
*/}
<div className="hero-quote">
<h1
className={`hero-typewriter font-sans ${HERO_SIZE_CLASSES} font-bold tracking-tight text-foreground leading-[1.15] min-h-[1.2em] whitespace-nowrap`}
>
<a
className="hero-quote-link"
href={DOUBAN_URL}
target="_blank"
rel="noopener noreferrer"
aria-label="这句话出自王小波《万寿寺》,点击查看他的豆瓣主页"
>
{renderText()}
</a>
{renderText()}
</h1>
{/* 固定高度的一行,内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */}
@@ -197,6 +188,7 @@ export function Hero() {
onClick={() => setCardOpen((open) => !open)}
aria-expanded={cardOpen}
aria-controls="hero-quote-card"
aria-label="查看这句话的出处:王小波《万寿寺》"
>
—— 王小波 ·《万寿寺》
</button>