值得参考的个人博客

搭建个人博客之前，先看一些已经稳定运行的网站很有帮助。可以观察它们如何处理首页密度、文章归档、专题索引、搜索入口和个人介绍。

重点参考

• Antfu - Posts：适合参考归档页的信息密度、年份分组和轻量背景处理。
• Innei：适合参考 Light / System / Dark 主题选择、文章页底部信息、交互入口和未来可扩展能力。
• Cassie Codes - Writing：适合参考写作列表、深色模式和长列表节奏。（本站原计划用 load more 控制过长页面，2026-07-24 改成了静态分页 /blog/page/N/——追加内容没有 URL 是个真问题。）
• Stitch via MCP：用于后续把设计发想、设计稿和代码实现衔接起来。

2026-08-06 补记：媒体库、在线编辑、付费墙

这一批是带着具体问题去看的——图床怎么存、在线编辑怎么做、付费墙怎么收钱。观察都来自公开页面本身，写在这里是为了让后面的取舍有出处。

• Abo's Blog · 精彩时刻：一个游戏集锦视频库，卡片式陈列，页面上有实时的容量表（0 MB / 10.00 GB），存储用的是 Cloudflare R2 的免费额度，同时支持"外链视频"这种不占自己存储的兜法。值得借鉴的是这个组合：自己存小文件、大文件走外链，容量条直接摆在页面上——额度是有限的这件事不藏着。它的管理入口也在同一个公开页面上，用一个"管理口令"密码框提交。这是最省事的做法，代价是全站共用一个口令：没有"是谁改的"，也没法只撤销一个人。本站不走这条路，原因见下。
• lvyovo wiki：正文页是客户端渲染的单页应用（lvy-neko），首屏先出"加载中"。真正让我停下来的是它的写作页 /write/<slug>：封面、图片管理、压缩工具、导入 Markdown 都做进了同一个屏幕，在线编辑的完整度是这批里最高的，信息密度也值得抄。
• 小互 · AI 解读站：付费墙做得很完整——免费栏目全文开放，深度和研究解读只放前 1/4，年卡 / 月卡 / 单篇券三档，外加激活码送人和团队席位。它用的是常规账号体系（Google 登录或邮箱魔法链接 + 支付宝/微信/银行卡），不是 HTTP 402 那条路。记一笔是因为本站的 x402 实验常被问起"别人是不是也在用"：至少这个站不是，它解决的是同一个问题（单篇付费）而选了完全不同的一条腿。

2026-08-20 补记：图片放大交互

这一条是看图片放大怎么做时记的。本站的图片查看器从 FLIP 飞行动画改成了全屏暗色 dialog：点击文章图片打开，左右键 / 按钮切换，底部显示 alt 文案，顶部计数 1 / N，空白区域点击关闭。没有引入外部库——全靠原生 <dialog> + 少量 JS——但调研时看了几个站的做法，记一笔来源。

• 元兒～的新部落格：文章图片放大用的是 Viewer.js（viewerjs@1.11.6），点击后弹出全屏查看器，支持滚轮缩放、旋转、翻转和多图切换。它是一个独立的 JS 库，本站选择不引入第三方依赖，但全屏暗色背景 + 左右导航 + 顶部计数这个交互骨架值得对齐。

2026-09-21 补记：页脚设计参考

重新看页脚时看的三个例子，来自 footer.design 的策展。它们都是营销/SaaS 站的页脚，风格与本站的 workbench 基线（线优先、mono 元信息层、border-top 作为唯一分隔）相左，所以看的是信息架构，不是皮肤。记一笔是为了让后面页脚取舍有出处。

• Footer | Heron AI：暗色页脚。顶部一条 CTA 带（约 demo），下面多列链接分组（Product / Company / Resources / Legal），logo 在左上，社交图标一排，最底部横跨全宽的超大淡色品牌字样，带 newsletter 输入框。可借的是分层（可操作链接重一档、备案信息轻一档）；不能拉的是暗色 CTA 带和 newsletter——那意味着后端/订阅基础设施，不在本站范围。
• Footer | GoCanopy：更紧凑。左侧 logo + 一句 tagline，右侧两三列紧链接，一条细分隔线，底部版权左、社交/法务右。这里唯一真正套得上本站的，是「分组列」这个思路：当 Blog/Wire/Projects/Resources/Tags/Search/Support/RSS + 社交全挤在一行时，分组比中点隔开的扁平一行可读。
• Footer | Pengon：最极致。顶部大号品牌声明 + CTA，底部巨型字样满幅流出，占很多竖向空间。它整体与基线相左，只能借其克制：如果要用品牌字样，也只能是 mono 低对比度的一行，不是图形化的满幅流出。

结论：三者共同的那套多列链接分类 + newsletter + 社交图标 + 超大字样，是公司站设备；本站是个人博客，能搬过来的只有「分组胜过平铺」这一条。

待继续调研

• Jack Cooper
• eryajf wiki
• 阮一峰的网络日志

后续可以为每个站点补一段简短评估：哪些结构值得借鉴，哪些设计不适合自己的写作方式。