Fqzlrのblog

卡片体系统一：先定语言再谈花样#

友链页最容易做乱——每个卡片一个样式，堆起来就是杂货铺。我的做法是先给所有卡片类页面定同一套视觉语言，友链、项目、技能、关于页共用：

1
.friend-card
2
  border-radius: var(--shape-corner-l)
3
  border: 1px solid var(--outline-variant)
4
  background: var(--card-bg)

横向布局：56px 圆角头像 + 标题/描述/标签信息区，网格用 repeat(auto-fill, minmax(15rem, 1fr))——15rem 是实测门槛，保证 1024px 宽度下稳定三列。

hover 是整套语言的「呼吸」：边框、标题、底色一起转向主色（底色用 color-mix(in oklab, var(--primary) 5%, var(--card-bg))），阴影升到 --m3e-elevation-1，右上角一个 arrow-outward 箭头从 translate(-0.25rem, 0.25rem) 浮现，头像轻微 scale(1.05)。所有卡片同频呼吸，页面就「齐」了。

二态卡片：站长紫与推荐金#

70 个友链里总要有层级。设计了两种特殊状态：

两个色板刻意与评论系统（Waline）的站长标识同源，暗色模式另有独立色板。粒子的绘制是同一个工具函数换参数：

1
traceRoundedStar({ points: 5, innerScale: 0.48 }) // → 五角星
2
traceRoundedStar({ points: 4, innerScale: 0.36 }) // → 四角星芒

死链检测：暂存区与墓碑墙#

友链页最大的维护痛点是死链。方案是检测体系 + 分区降级：

• 检测结果按 data-status="success | slow | warn | timeout" 点亮状态徽标；
• 结果缓存进 localStorage（键 shirone:friend-check-result），先渲染缓存再后台刷新；
• 失败 1-6 次进入暂存区（pendingZone），可能只是对方临时抽风；
• 失败 7 次以上进墓碑墙（graveyardZone）——头像变灰排成一堵墙，既不冤枉也不装瞎。

悬浮预览与一个 transform 陷阱#

鼠标悬停卡片时弹出站点截图预览。截图地址存在 data-siteshot 上，预览浮层用 portalToBody 挂到 body 下。

小结#

友链页的三层结构：统一卡片语言保下限、二态卡片 + 粒子做出识别度、死链检测分区解决长期维护。数据结构与 Mizuki 同款，迁移友链数据零成本。