HY
折腾进行时
Hello, I'm HY.
博客日志 · 第 3 页
BLOG CHANGELOG/PUBLIC RECORD
博客日志
这里记录这个博客从上线、写作到页面迭代的每一个重要节点，每一次都按真实改动整理，展开即可查看完整变更说明。
版本规则：Major 代表结构级升级 · Minor 代表新功能 · Patch 代表修复、内容与维护
V1.50当前版本52个更新日255条详细记录26.09—26.10时间跨度
- 第 32 次记录
桌面端留言板的面板顶边原来正好贴着首屏壁纸下沿，太挤，往下压 2rem 留出呼吸感
展开这条记录
背景
留言板是透明玻璃面板，主题又会让主内容区上浮 3.5rem 叠在首屏壁纸底部，所以之前专门写了 margin-top: 3.5rem 把整块推回壁纸下沿 —— 数值卡得刚好，面板顶边和壁纸下沿严丝合缝地贴在一起。普通页面那边卡片是不透明白底，压在壁纸上正好形成层次感；留言板是透明的，这一贴就只剩下「挤」。改成 calc(3.5rem + var(--guestbook-banner-gap))，多出来的那段单独抽成变量，默认 2rem，嫌不够松只改这一行。只动位置不动高度，聊天区还是原来 100dvh 那份宽松高度，代价是整页多 2rem 滚动距离；没改成按壁纸高度扣减高度，因为那样在小视口下会把聊天区压成几百像素、气泡和输入框叠在一起。只影响 ≥1024px 且有壁纸的情形，移动端本来就不显示壁纸。
01视觉 · 具体变更
桌面端留言板整体下移 2rem：新增 --guestbook-banner-gap（默认 2rem），与原本抵掉上浮的 3.5rem 相加，面板顶边不再贴着首屏壁纸下沿
02修复 · 具体变更
只改 margin-top、不动高度：聊天区仍是 calc(100dvh - var(--guestbook-viewport-offset)) 的宽松高度，代价只是整页多 2rem 滚动距离；移动端（<1024px）不显示壁纸，不受影响
- 第 31 次记录
把全站卡片的边框从几乎看不见的浅灰细线换成 2px 纯黑描边，对齐参考站那种卡片轮廓很清楚的观感
展开这条记录
背景
参考站的卡片有一圈很深很明显的黑色描边，扒了一下它的做法发现主题本来就自带 enable-card-border 这一套开关，本站早就开着，只是边框色用的是 --line-divider——亮色下是 8% 的黑，淡到看不出轮廓。把它换成纯黑、宽度加到 2px 就完事了，样式落在页脚注入点，没碰上游的 src/styles 里的任何文件。麻烦的是后面：留言板、Steam、朋友圈、书签导航、友链、Bilibili 卡片，这些页面的卡片各用各的类名，第一版一个都没盖到，最后全站扫了一遍才补齐。
01视觉 · 具体变更
全站卡片描边改为纯黑 2px：.card-base（文章卡片、侧栏组件）、.card-base-transparent、.btn-card（分页与上下篇按钮）统一生效，粗细由 --card-border-width 一处控制，想加粗改这一行即可
03视觉 · 具体变更
自建页逐个补齐：朋友圈 /moments/ 的文章卡片 .moment-card 原本是 1px 的 --line-divider，而「推荐友链」「本站主理人」两种变体各自还带金色 / 蓝色描边，现在连同变体一起换成纯黑（暗色纯白），身份仍由背景色与角标区分；同页顶部那张招牌的「随机一篇文章」卡（.moments-random-article，带会转的光束边）和「未订阅的站点」提示条（.moments-unsubscribed）原本也是 1px 染色边，一并收进来；代价是悬停时边框不再变主题色，反馈改由位移和阴影承担
05视觉 · 具体变更
暗色主题下描边自动切纯白（--card-border-color 在 html.dark 段覆盖），避免深色卡片上描边看不见
02视觉 · 具体变更
自建页单独补上：留言板主面板与公告/隐私弹窗（.guestbook-chat / .privacy-panel，原来只有 1px 的玻璃边框）、Steam 页四类卡片（.steam-profile / .steam-stat / .steam-recent__item a / .steam-card，原来完全没有描边）也换成同款描边；Steam 那几类要连 border-style 一起补，只写宽度和颜色是画不出来的
04视觉 · 具体变更
上游页面 / 组件里自己画描边的卡片也一并补齐（这些文件与上游零差异、不能改，只能页脚注入）：书签导航 .booknav-card、友链页 .friend-card、Bilibili 卡片 .media-card、更新日志页的 .blog-changelog-card / .blog-changelog-pager 及翻页卡里的方块按钮；同样牺牲了 hover 时的边框变色
06维护 · 具体变更
样式落在 src/config/FooterConfig.html 的注入点，未改动上游 src/styles/**，合并上游主题更新仍是零冲突
- 第 30 次记录
把文章从主题仓库里搬出去单独立了个私有仓库：主仓库从此只留主题代码和配置，合并上游不用再为文章目录解冲突
展开这条记录
背景
文章和主题代码原来住在同一个仓库（src/content），而上游更新很勤——示例文章、文档、demo 项目经常顺带一起改，同一个目录下两边都在动，每次 merge 都要手工裁决。这次做了内容分离：文章迁到独立的私有仓库，构建前由 scripts/sync-content.mjs 从 CONTENT_REPO_URL 浅克隆到 src/site-content/ 再编译。中途换过一次方案——先按最正统的做法试了 git submodule，推送后才发现 Vercel 官方明确不支持私有 submodule（构建阶段直接失败），改成构建时同步。另外踩了两个坑：内容目录一度放在仓库根，导致主题的图片解析（ImageWrapper.astro 里写死扫 src/ 的 import.meta.glob）扫不到图，所有文章封面渲染成空白；以及构建平台的环境变量里混进一个换行符把 token 截断——Vercel 报 url contains a newline，Cloudflare 报 Invalid username or token，其实是同一个病根。最后补上 Deploy Hook：内容仓库推送时由 Actions 调用两个平台的 hook 触发重新构建。
01维护 · 具体变更
文章迁至独立私有仓库 hy4962/firefly-content；主仓库 src/site-content/ 进 .gitignore，git ls-files 已归零，主仓库只保留主题代码与配置
03维护 · 具体变更
Vercel（vercel.json 的 buildCommand）与 Cloudflare（面板里的构建命令）都在 pnpm build 前执行同步脚本，两个平台均需配置环境变量 CONTENT_REPO_URL
05维护 · 具体变更
本地开发改走 CONTENT_DIR + watch-content.mjs：项目内的 src/site-content/ 退化成同步副本（不再手动 pull、不会分叉），dev.sh / dev.bat 一键完成「同步 → 后台监听 → 起 dev」，在外部内容仓保存文件即热重载
02内容 · 具体变更
新增 scripts/sync-content.mjs：构建前从 CONTENT_REPO_URL 浅克隆内容（git clone --depth=1），本地已有内容时自动跳过，日志对 URL 脱敏并清理值中的空白字符
04部署 · 具体变更
内容仓库新增 .github/workflows/deploy.yml：push 后调用 Vercel Deploy Hook 与 Cloudflare 部署挂链，文章推上去即自动重新构建上线
- 第 29 次记录
修掉移动端首页「关于我那张卡片压住下滑箭头」的问题：屏幕矮时卡片整体往上抬一点，把箭头完整让出来，屏够高时一点都不动
展开这条记录
背景
首页那张卡片是垂直居中的（top: 50%），下滑箭头钉在底部（窄屏 bottom: 10rem），两者一个跟着屏幕高度居中、一个固定贴着底边，屏幕越矮它们靠得越近。卡片底边本身只是个虚线框还不明显，但卡片下面挂着一排社交标签（socials 用了 margin-bottom: -49px，是刻意让标签垂到面板外面当吊牌的），标签是实打实的色块，于是先被糊住的就是箭头。更麻烦的是装饰层 z-index 是 25、箭头只有 10，箭头就算被盖住也抢不到上层，只能挨着。修法不写死常数：脚本按实测算出「卡片视觉底边 + 12px 净空」到箭头之间差了多高，把差值写进 CSS 变量抬升卡片，屏够高时算出来是 0 就是原样。量尺寸走布局数据（容器高度、offsetHeight）而不是 getBoundingClientRect，因为入场动画正在跑时 rect 里混着 transform 的位移和缩放，量出来会偏。抬升量还有个上限，免得屏幕特别矮时卡片被顶进导航栏。
01修复 · 具体变更
窄屏（≤1023px）下首页卡片按实测算出抬升量写入 --home-wallpaper-card-lift，卡片视觉底边（含面板下方垂出的社交标签）与下滑箭头之间保持 12px 净空，不再叠在一起
02首页 · 具体变更
抬升量由 applyMobileCardLift 现算：屏够高（390×800 及以上）结果为 0，卡片仍是原来的垂直居中，桌面端与平板完全不受影响
- 第 28 次记录
修掉移动端留言板顶部「公告栏被左上角与右上角两个悬浮按钮压住」的问题：公告栏文字不再被切掉一半，成员按钮也不跟它挤在一起
展开这条记录
背景
留言板在移动端整体铺满一屏，头部那行（左边「留言板」胶囊、右边「成员」按钮）是 position: absolute 浮在聊天区上方的、不占文档流，这样消息区能从头铺到尾。问题是公告栏还老老实实待在文档流里，于是就钻到了两个按钮底下——左边的「留言板」三个字压在「留言板使用说明」上，右边的成员按钮又跟公告栏的关闭叉号挤在一处，看着像两块 UI 叠在一起。修法很直接：让内容列自己把头部那份高度垫出来（0.375rem × 2 内边距 + 2.5rem 按钮 = 3.25rem），公告栏和消息列表就都落到按钮下方了，有没有公告栏都成立。顺手把公告栏在移动端那几条 top/left/right 删了——它现在是 position: static 的布局内元素，这几条从来没生效过，留着只会误导下一个看代码的人
01修复 · 具体变更
移动端 .guestbook-chat__conversation 垫出 3.25rem，让开浮层式头部：公告栏与首条消息不再被左上「留言板」、右上「成员」两个按钮遮挡
02维护 · 具体变更
删除移动端公告栏里无效的 top/left/right（元素为 position: static，这些属性不生效）
- 第 27 次记录
新增 /steam/ 游戏库页面：拥有游戏数、总时长、近两周时长、等级徽章，以及按时长排序的全部游戏列表；数据由定时任务写入快照，跟朋友圈共用同一条流水线
展开这条记录
背景
在 nxxy335.top/steam 看到他的 Steam 履历页，扒了下源码发现是 Halo 插件在服务端定时拉 Steam Web API、缓存后 SSR——他那边有常驻后端，我这是纯静态站，走不了同一条路。好在博客里早有一条干同类事的流水线：朋友圈的 refresh-friends-feed.yml，定时抓友链 RSS 落快照、有变化就提交、提交触发重建。于是没有新建第二条，直接往里面加了一个步骤，跑一次提交一次构建一次，两类数据一起刷新。取数用官方 Web API（GetPlayerSummaries / GetBadges / GetOwnedGames），需要申请 API Key 并把 Steam 隐私设置的「游戏详情」设为公开；封面图直接按 appid 拼 CDN 地址，不用再拉商店详情。另外补了一条降级路径：没配 Key 时退回抓 steamcommunity 的公开 XML，只拿得到常玩的几款游戏，页面会标出「精简模式」并改称「收录游戏」，不误导读者。密钥只存在于 GitHub Actions 的环境变量里，不进入构建产物与前端，因此 Vercel 和 Cloudflare 后台都不用配任何东西
01Steam · 具体变更
新增 /steam/ 页面与 scripts/refresh-steam-snapshot.ts：取拥有游戏数、总时长、近两周时长、等级与徽章数、最近游玩、全部游戏时长榜（含封面、最后游玩日期）
03Steam · 具体变更
封面图按 https://cdn.cloudflare.steamstatic.com/steam/apps/<appid>/header.jpg 直接拼接，省掉「先拉商店详情拿 hash」这一步
05首页 · 具体变更
导航「我的」子菜单新增「游戏库」入口
02Steam · 具体变更
两条取数路径自动切换：有 STEAM_API_KEY 走 Web API 拿完整游戏库；没有则退回 steamcommunity 公开 XML 的精简模式（仅常玩几款），快照用 partial 字段标记，页面据此显示提示并调整统计卡名称
04维护 · 具体变更
refresh-friends-feed.yml 更名为 Refresh External Snapshots，新增一个 step 跑 Steam 脚本（注入 STEAM_API_KEY），提交逻辑改为一次性 add 两份快照；没有新建第二条 workflow
06维护 · 具体变更
全为新增文件 + src/config 内改动，组件、布局、样式、i18n 等上游高频改动区零改动
- 第 26 次记录
站长动态有了自己的订阅源 /dynamic/rss.xml，和页面同一份数据；动态页头部的「N 动态」旁边多了个 RSS 小按钮，点一下就能把地址丢进阅读器
展开这条记录
背景
在 blog.fufu520.cn 看到 TA 的动态页挂着独立 feed，回头看自己的站长动态页只有网页、没有订阅源——想追更的读者只能手动来翻。于是照着做了一份：feed 在构建期拉 Memos 接口，和页面用的是同一份数据，每条跳回 /dynamic/ 的对应锚点；接口挂了自动回退本地内容集合、再不行输出空频道，构建永远不会因此变红。入口加在动态页头部——那一整页都是主题文件，所以走页脚注入段把 RSS 按钮塞进「N 动态」计数里，只有动态页会出现，head 也一并埋了自动发现声明
01动态 · 具体变更
新增 /dynamic/rss.xml：构建期拉 Memos 接口（与页面同源，当前 12 条），每条跳回 /dynamic/ 对应锚点；接口失败自动回退本地内容集合，再不行输出空频道，绝不炸构建
03维护 · 具体变更
新增 src/pages/dynamic/rss.xml.ts 一个文件 + FooterConfig.html 注入段，主题源文件零改动
02动态 · 具体变更
动态页头部「N 动态」左侧注入「订阅RSS以随时偷窥站长日常」入口（页脚 FooterConfig.html 注入，只在 /dynamic/ 出现，小屏只留图标），点击新标签打开 Feed；head 同步埋 rel=alternate
- 第 25 次记录
首页横幅下方多了一条会持续横向滚动的动态条：左边「动态」胶囊、右边「更多」，中间滚动播放最近的 Memos 动态，鼠标悬停暂停，点某条跳到对应那条
展开这条记录
背景
在 nanzhiy.cn 看到的效果：他首页横幅下面挂着一条一直在横滚的「瞬间」条。扒完发现他用的是 Ethereal 主题而不是 Firefly，页面里还留着服务端模板的痕迹，代码没法照抄，所以只搬机制 —— 数据直连 Memos 公开接口（和 /dynamic/ 同一个源，对方已放开 CORS），滚动靠 CSS 把轨道内容复制成完全相同的两份、在 0 到 -50% 之间平移实现无缝。最折腾的是插在哪：首页那个下滑箭头执行的是 #main-grid.scrollIntoView()，条子放在它之前会被整条甩出视口；第二轮挪进 #content-column 又变成只有文章列那么窄的一小块；最后让它当 #main-grid 的 grid item 配合 grid-column: 1/-1，才同时拿到「不被甩出去」和「横跨左右侧栏的全宽」。改动只落在两个文件，主题源文件零改动
01首页 · 具体变更
首页新增动态滚动条：左侧「动态」胶囊 + 中间滚动区 + 右侧「更多」，取最近 12 条 Memos 动态；悬停暂停，移动端把两侧胶囊压紧、行间距自备（移动端 #main-grid 是 block，没有 gap 可用）后同样显示，点某条跳到 /dynamic/ 对应那条
03性能 · 具体变更
DOM 默认 display:none、数据在页面渲染完之后才异步拉取，拉不到就整条不显示；实测把接口掐断后 FCP 仍是 1112ms、CLS 为 0，首页 10 篇文章照常渲染，数据本身带 10 分钟本地缓存
02首页 · 具体变更
条子作为 #main-grid 的 grid item（grid-column: 1 / -1）横跨左右侧栏，同时解决「点下滑箭头看不到」——箭头滚的就是 #main-grid，条子在它内部才不会被甩出视口
04维护 · 具体变更
新增 public/assets/js/home-dynamic-bar.js + src/config/FooterConfig.html 追加注入段，主题源文件零改动；脚本版本号挂在 ?v= 上绕开 vercel 给 /assets 的 30 天强缓存
- 第 24 次记录
把留言板从 Waline 默认评论框换成群聊风格的聊天窗口：气泡、成员列表、公告栏、表情图片、回复编辑删除都在，30 秒自动同步。后端复用现成的 Waline 一个字节没动，这一页的评论脚本反而从 100 KB 降到 23 KB
展开这条记录
背景
在 blog.amamo.top 的留言板看到的：不是评论区，是一整个聊天窗口。扒了仓库发现后端就是 Waline，我现成有一个。参考站为了塞进主题改了 6 类上游文件，我搬完之后把上游改动压到只动 guestbook.astro 一个——137 个新文案走自建表不进 i18n，CSS 变量就近定义，样式从全站 main.css 挪到页面内引入。顺带修了三件事：旧评论框发的回复显示不出引用块（组件的标记和 Waline 原生 pid 是两套体系）、公告栏文字和消息叠在一起（浮层底色实际只有 9% 不透明度）、标题压在首屏壁纸上（主题的上浮设计遇上透明背景）
01内容 · 具体变更
留言板换成群聊风格聊天窗口：气泡列表、公告栏、成员列表、表情包、图片上传、回复/编辑/删除、30 秒自动同步，移动端公告栏占位布局单独适配
03性能 · 具体变更
50 KB 组件样式从全站 main.css 挪到页面内引入，只有 /guestbook/ 加载；原版做法是打进全站 Layout.css（guestbook-chat 类名在其中出现 200 次），每页白下
05修复 · 具体变更
旧评论框 / Waline 后台发的回复显示不出引用块：解析回退到 Waline 原生 pid / reply_user 字段，判据用 typeof pid === 'number'（一级评论的 pid 是 null 而不是缺失，用 in 判断会误判）
07修复 · 具体变更
留言板标题压在首屏壁纸上：主题的主内容区上浮 3.5rem 是给卡片底色设计的，透明背景挡不住；桌面端下移 3.5rem，面板高度放大到 1.2 倍
09维护 · 具体变更
新增依赖 @waline/api、lucide-svelte；实现记录见《留言板改成聊天窗口》
02性能 · 具体变更
这一页的评论前端从 @waline/client 完整客户端（100.9 KB gzip，走 unpkg 第三方 CDN）换成自写组件（23.4 KB brotli，同域托管），净减约 82 KB
04维护 · 具体变更
137 个新文案走自建 guestbook-lang.ts 不改 src/i18n/，CSS 变量就近定义不进 variables.styl——上游改动只剩 guestbook.astro 一个文件
06修复 · 具体变更
公告栏文字与消息重叠：浮层底色实际只有 9% 不透明度（color-mix 的另一端 --guestbook-surface 是 transparent），改成占位式布局并换 --card-bg 取色，消息不再被切半截
08内容 · 具体变更
公告弹窗加「不再显示」，写入 localStorage 后该访客不再自动弹出，顶部公告栏保留可手动点开
- 第 23 次记录
友链页第 2 步多了个「进入申请表」按钮，点进去是个 GitHub Issue 表单；提交后机器人自己去访问对方的友链页，确认挂了本站链接就自动写入配置并上线，不用等人审核
展开这条记录
背景
在 blog.amamo.top 的友链页看到的效果：他那页顶上有个「自动友链」入口，点进去是 GitHub Issue 表单。他也是 fork 的 Firefly，实现全在 .github 下——Issue 模板 + 一个 Node 脚本 + 一个 workflow，纯静态站就能跑，完全不涉及 SSR（网上讲这套要改 SSR 的那篇文章是另一个人写的）。我按同样的思路重做了一遍，但改了三处：写入只往数组头部插一条，而不是重写整个数组（他的写法会把已有条目的 rss / homepage 字段和注释一起吃掉）；校验只用 Node 内置 fetch，不装 pnpm 和 playwright，workflow 二十来秒跑完；把「主站与友链页必须同域」这条真正补上（他博客里写了，脚本里其实只比了站名）。另外「发评论区 / 发邮件」保留成兜底，用 GitHub 毕竟是有门槛的
01友链 · 具体变更
友链页第 2 步改成「自动友链 · 进入申请表」按钮，链到 GitHub Issue 表单；原来的评论区 / 邮件方式压成一行小字保留
03维护 · 具体变更
写入只往 friendsConfig 数组头部插一条，已有条目的 rss / homepage 字段和注释一个字节不动，并按域名去重
05维护 · 具体变更
新增 .github/ISSUE_TEMPLATE/friend-request.yml、.github/scripts/auto-friend-link.cjs、.github/workflows/auto-friend-link.yml，主题源文件零改动
02友链 · 具体变更
自动校验三项：主站可达、友链页可达且与主站同域、页面里确实挂了本站链接——全过才写入，没过会在 Issue 里回复具体原因
04性能 · 具体变更
校验脚本零第三方依赖（只用 Node 内置 fetch），不需要装 Chromium，单次运行约 20 秒
06修复 · 具体变更
MDX 正文里的 <a> 会被 markdown.css 的 a:not(.no-styling) 染色，按钮橙字压橙底导致文字看不见，改用主题自带的 no-styling 类豁免