友链挂了?自动检测+主页截图,GitHub Actions 全搞定置顶技术教程友链/GitHub Actions/自动化/博客/截图博客系列第9期。用 GitHub Actions 自动检测友链可达性、反链存在、主页截图,零服务器零运维,附触发方式详解。
全屏壁纸的两种性格:classic 揭幕与 hero 视差的实现细节技术教程全屏壁纸/视差滚动/CSS/博客主题/前端博客系列第16期。全屏壁纸模式下的两种布局:classic 壁纸随页滚动的揭幕式、hero 壁纸固定整屏的视差标题式。附首帧落位防闪烁、z-index 不能为负的原因、视差节流与记忆化写入。
从零加一个打赏页:配置驱动、二态卡片与页面可用性体系技术教程打赏/页面设计/配置驱动/Astro/博客主题博客系列第15期。新增 /sponsor/ 打赏页的全过程:扫码/外链二态卡片、打赏者名单网格、内容仓 YAML 配置驱动,以及「页面开关 × 功能开关」双重门控的页面可用性体系。
关于页改造:一张 MDX 卡片承载四个交互组件的内容复刻技术教程MDX/关于页/组件设计/博客主题/前端博客系列第14期。关于页不做多卡片拼盘,而是一张 MDX 卡片承载正文,人物悬浮卡、技术栈手风琴、魔改时间线、品牌色社交链接以 not-prose 区块嵌入正文流,附 MDX 内嵌组件的几个坑。
友链页面设计:二态卡片、粒子特效与死链坟场的三层玩法技术教程友链/卡片设计/Canvas/博客主题/前端博客系列第13期。友链页不止是链接列表:M3E 卡片体系统一视觉、站长/推荐二态卡片配 canvas 星芒流星、死链检测的暂存区与墓碑墙设计,附悬浮预览的 transform 陷阱。
给博客播放器加歌词:LRC 解析、三处消费与 Meting 透传技术教程LRC/歌词/音乐播放器/Astro/博客博客系列第12期。为博客音乐播放器接入歌词:LRC 解析工具、内容仓歌词资源管理、面板歌词 / 悬浮歌词条 / 胶囊歌词三处消费,以及 Meting 在线平台的歌词透传。
把显示设置面板做成「全量配置化」:显隐开关 + 访客默认值两层设计技术教程Astro/配置设计/博客主题/显示设置/前端博客系列第11期。主题的显示设置面板有十几个选项,但站点配置只暴露了一半:本篇补齐显隐开关全覆盖,并把每个选项的访客默认值也收进 YAML——站长想要 Hero 布局默认展示,改一行配置就行。
给博客左下角的音乐播放器做三态变形:唱片 / 歌词胶囊 / 完整控件技术教程Svelte/音乐播放器/UI重构/博客/前端博客系列第10期。参考 Firefly 的三态形态机,把左下角悬浮音乐播放器从「唱片 + 弹出面板」重构成 disc / pill / bar 三态一体 dock,附拖动顺滑与指针事件的两个实战坑。