diff --git a/src/components/hero.tsx b/src/components/hero.tsx index b61a3b0..6a0f4ea 100644 --- a/src/components/hero.tsx +++ b/src/components/hero.tsx @@ -9,6 +9,9 @@ import { site } from "@/data/site" * 原来那四句是 14/11/4/4 字,长短差 3.5 倍,只能靠自适应字号兜底, * 结果是每换一句首屏最大的字就跳 1.5 倍。 */ +/** 王小波的豆瓣人物页。点击那句话或卡片里的链接都去这里。 */ +const DOUBAN_URL = "https://www.douban.com/personage/27480512/" + const phrases = [ { prefix: "一个人只拥有此生此世", highlight: "是不够的," }, { prefix: "他还需要一个", highlight: "诗意的世界。" }, @@ -31,6 +34,8 @@ const HERO_SIZE_CLASSES = "text-[clamp(1.125rem,5.6vw,4rem)]" export function Hero() { const [phraseIndex, setPhraseIndex] = useState(0) + /** 「作者卡片」展开状态:点署名展开,再点收起 */ + const [cardOpen, setCardOpen] = useState(false) const [displayText, setDisplayText] = useState("") const [isDeleting, setIsDeleting] = useState(false) // Pause the typewriter loop when the hero is offscreen or the tab is hidden; @@ -159,14 +164,62 @@ export function Hero() { {site.tagline}

- {/* 光标是 CSS ::after 画的一个竖线字符,见 styles/global.css 的 .hero-typewriter */} -

- {renderText()} -

+ {/* + 彩蛋:这句话出自王小波《万寿寺》。 + - 悬停/聚焦:整句话由墨黑变朱红,下方淡入署名(无 hover 的设备常显署名) + - 点那句话 → 直接去豆瓣人物页 + - 点署名 → 展开一张极简卡片,卡片里也能去豆瓣 -
+ 结构上用

而不是把 h1 本身变成链接:保住标题语义, + 而且点击热区只包住文字,不会连整行空白一起可点。 + 光标 ::after 挂在 h1 上(链接外面),点光标不会触发跳转。 + */} +
+

+ + {renderText()} + +

+ + {/* 固定高度的一行,内容 hover 才淡入 —— 这样展开卡片时按钮不会跳 */} +
+ +
+ +
+
+ + 王小波1952–1997 + + + 豆瓣主页 + +
+
+
+ +