blog/docs/research/06-博客体验研究与优化方案.md

# 博客体验研究与优化方案调研（六站）

> 任务产出。数据来源：2026-10-26 直连抓取六站 HTML（文本提取后人工分析）。抓取失败的站已如实标注。
> 站点快照存于 /tmp/uxstudy/*.html（临时，会话级）。目标站背景：Astro SSG 双语、灰阶极客风、命令面板/键盘弦/终端彩蛋/热力图/PWA/Artalk、自建 gitea+Sveltia 照片管线。

## 一、六站逐站笔记

### 1. qh1009.net（清凉药）✅ 已抓取（66KB，WordPress + WiThemes）
- **首页 IA**：纯内容流——俳句/诗全文直接铺在首页（非标题列表），编号制（#219…#2008），每条极短 + 标签。首页即作品。
- **排版**：文学向极简，正文居中窄栏，无目录/无进度条/无评论组件可见（0 评论数展示）。
- **特色交互**：几乎零交互，靠"编号+日期+分类词（俳/诗/译/博物）"的仪式感取胜。
- **导航/移动端**：顶部 Toggle Menu，Home/关于/作品/杂记/博物/俳/诗/译/Podcast，移动折叠。
- **内容组织**：标签云非常细（50+ 自然意象词），年归档分页。
- **管理**：WordPress（页脚 "Designed by WiThemes"），推断经典 WP 后台。
- **可借鉴**：瞬间（moments）可学"编号制"给每条瞬间一个序号，制造连续感；标签的"意象化命名"比功能化命名更有味道。

### 2. nbfox.com（麦田艺术）✅ 已抓取（187KB，WordPress 画廊站）
- **首页 IA**：题材/流派双维下拉菜单（风景画/肖像画… × 印象派/巴洛克…），首屏专题卡片（手机壁纸/梵高向日葵/浮岳三十六景）+ 大图瀑布。
- **排版**：图为主体，每图带结构化元数据卡：创作者/年代/图片原始尺寸（像素）/风格——元数据即说明文字。
- **特色**：①双维分类导航（题材×流派）②图片标注精确像素尺寸，管理下载预期 ③"超高清/热门收藏/精选"策展位。
- **导航/移动端**：粘性双搜索框 + 汉堡菜单，功能/会员/收藏夹分离。
- **内容组织**：博物馆聚合、公域版权资源库、网盘分发——内容型产品打法。
- **管理**：WordPress + WooCommerce（会员/网盘），重后台。
- **可借鉴**：**图库（gallery）加"双维筛选"**（地点×器材 或 主题×年份）；每张照片展示 EXIF 元数据卡（机型/焦段/光圈/地点）——我们已有 exifr 管线，只差展示层。

### 3. yongyuan.name ✅ 已抓取（56KB，静态技术博客）
- **首页 IA**：一句个人格言 + "All Posts" 按年份倒序全量清单（2015→2024，一页全列），每条：日期/标题/分类。
- **排版**：无摘要、无图，纯列表——十年技术文一目了然，靠"全量可见"建立信任。
- **特色交互**：无。反例价值：极简到牺牲发现性（无搜索/无热门/无相关文）。
- **内容组织**：分类词前置在每行（CV/推荐系统/C++/ANN），每年末一篇"年终总结"锚点文。
- **可借鉴**：**归档页全量清单模式**（我们有 archives/，确认是否一页可览十年）；"年终总结"惯例值得立为个人传统。

### 4. ruanyifeng.com/blog ✅ 已抓取（首页 20KB + 周刊分类页 176KB，自建 MT 系统）
- **首页 IA**：最新一篇全文摘要 + "继续阅读全文 »" + 右栏：最新文章 5 条 / 最新留言 / 关于 / 邮件订阅 / 授权声明 / 社交账号——**首页即门户**，信息密度极高但层级清晰。
- **文章列表**：周刊独立分类页，416 篇按年分组倒序，纯标题+日期列表。首页摘要带"分类： 周刊"标签 + 留言数（30）——**留言数前置是社交证明**。
- **内容组织（标杆点）**：①周刊作为**固定节奏产品**（周五发布，416 期，编号化）②完整档案页（分类/按月/2004 至今）③邮件订阅+RSS 双通道 ④留言 79533 条展示在侧栏（社区感）⑤版权/授权声明独立成块。
- **排版详情**：正文窄栏衬线、目录在长教程文中手写小节链接、代码块朴素无高亮（极客反潮流）。
- **可借鉴**：①**固定栏目化**——我们的"瞬间"可升格为编号制轻周刊（每周 3-5 条瞬间聚合 + 一句话评）；②侧栏"最新留言"（Artalk API 可拉）；③留言数展示在列表页。

### 5. antfu.me ✅ 已抓取（首页/列表页/文章页，Astro + UnoCSS，同栈）
- **首页 IA**：一段自我介绍正文 + "Recent work" 项目动态（直接拉 GitHub 数据）+ 一图流头部。无文章列表——博客藏在 /posts。
- **文章列表**：按年份分组，每条：日期 · 阅读时长（"Sep 16 · 15min"）· 语言徽标（中文/日本語）——**双语不是双站，是同一列表内并列两行互链**（"Hello Tokyo!" / 「おはよう、東京！」相邻）。
- **排版/交互（值得抄）**：①`slide-enter-content` 入场动画（我们已有同类）②magic-link：GitHub 链接自动渲染成卡片、图片自动预加载（grep 实锤 markdown-magic-link 类）③单篇文章页有 "Demo of …" 双语切换按钮 + **Plaintext 纯文本模式**（去样式阅读）④暗色以 class 切换，全站色调极克制（text-gray-700/200）。
- **导航**：极简 5 项（Blog/Projects/Talks/Sponsors），移动端同构。
- **管理**：纯 git 仓 + 自己写的构建，无 CMS——证明"无后台"路线在顶级生产者处成立。
- **可借鉴**：①**双语互链并列**（比我们 /en/ 双轨更轻，可作文章页"读中文版"强化）；②**阅读时长估算**列表页展示；③**纯文本/阅读模式**（灰阶站天然适配，一行 toggle + CSS）；④首页 "Recent work" 拉 gitea commit 流（我们已有"最近心跳"，可扩展为开源项目动态）。

### 6. innei.in ✅ 已抓取（141KB，Mix Space + Shiro 主题，React SSR）——中文现代个人站代表
- **首页 IA**：问候 + 一言（随机引言）+ 统计条（X 篇 · X 万字 · X 天）+ "近期笔墨"5 条（类型徽标：笔记/文章/技术）+ 页脚多宫格（关于/照片廊/联系/订阅/版式开关）。
- **特色（值得抄）**：①**站内搜索/主题/背景音乐/背景效果/余白开关全在设置面板**（"版式"区：浅色·随系统·深色 / 背景音乐 关·开 / 背景效果 关·开）——把实验性开关收纳成一个面板；②多内容类型（文稿/手记/时光/思考）+ 订阅通信（Newsletter 入口）；③留印记（留言板）、朋友们（友链）、一言。
- **导航**：顶部 4 项 + "更多"，移动端宫格化页脚导航。
- **管理**：Mix Space 自带 admin 后台（草稿/评论/监控），有 API——对比样本。
- **可借鉴**：①**设置面板收纳实验开关**（我们的终端彩蛋/辉光/动效可聚成一个"偏好"面板并 localStorage 持久化——比散落各处更克制）；②Newsletter 订阅入口；③友链页。

### 抓取情况汇总
六站全部抓取成功（qh1009/nbfox/yongyuan/ruanyifeng/antfu/innei），无备选站需补。注：本机代理(7897) TLS 握手故障，全部改直连抓取；innei.in 首屏计数显示 0（数据懒加载），已从 DOM 结构推断功能。

## 二、共性模式清单（优质站普遍做、我们没做/未确认）

| # | 是什么 | 价值 | 灰阶极客风适配建议 |
|---|---|---|---|
| 1 | **阅读时长估算**（antfu "15min"） | 列表页决策成本↓ | PostList 每条加 `~8 min` 等宽字体角标，构建期按字数/分钟计算，零运行时 |
| 2 | **双语条目互链并列**（antfu 同列表 zh/en 相邻互指） | 双语发现性↑，用户不会漏另一语版 | 文章页标题下加一行 `→ EN` 静态链接即可（已有 /en/ 路由，缺的是入口可见性） |
| 3 | **纯文本/阅读模式**（antfu Plaintext） | 极客好评、灰阶天然契合 | 单条 CSS class 剥离装饰（辉光/动效/侧栏），命令面板加 `reader` 命令 + 快捷键 |
| 4 | **留言数/评论数前置到列表**（阮一峰"留言（30）"） | 社交证明，激活 Artalk 存量数据 | Artalk API 构建期拉取各页评论数，写进 frontmatter 化的 JSON，列表页静态渲染 |
| 5 | **侧栏/首页"最新留言"**（阮一峰） | 站点"活着"的信号 | 首页"最近心跳"旁并列"最新评论"一条流（构建期快照，接受 24h 陈旧） |
| 6 | **固定节奏栏目化**（阮一峰周刊 416 期编号） | 读者形成期待，更新压力可控 | "瞬间"页顶加"本周瞬间 #N"聚合块，编号来自构建期统计 |
| 7 | **图片元数据卡**（nbfox 尺寸/创作者/年代） | 摄影轨的专业感 | gallery 详情展示 exifr 已提取的 EXIF（机型/焦段/光圈/ISO/时间/地点）等宽字体表 |
| 8 | **归档全量清单**（yongyuan 十年一页） | 纵深感与可扫读 | 确认 archives/ 是全量单页；不够则按年分组渲染 |
| 9 | **偏好/实验开关集中面板**（innei 版式区） | 克制与自由兼得，避免装饰散弹 | 命令面板加 `settings` 命令：辉光/动效/热力图/背景音乐各自 toggle，localStorage 持久化 |
| 10 | **Newsletter 订阅入口**（innei/antfu sponsor+订阅、阮邮件订阅） | 回访通道不被算法绑架 | P2→P1 观望：无邮件服务前先放 RSS 说明页强化；接入自托管 listmonk 是远期项 |
| 11 | **友链页**（innei 朋友们） | 个人站社区礼节，互推 | /about 或独立 /links，静态 YAML 驱动 |
| 12 | **首页项目动态**（antfu Recent work 拉 GitHub） | 开源轨的活性证明 | "最近心跳"已含 commit 脉冲，可加"开源动态"一列（gitea API，构建期） |

## 三、差异化机会（我们独有，保持强化）

1. **命令面板 Ctrl+K + vim 键位弦（g g / g s 双击 chord）**——六站无一做到；持续补齐 chord E2E 矩阵即可，是护城河。
2. **终端彩蛋页 + 页脚 commit hash**——antfu 级极客也只做了 slide 动画；我们的终端隐喻是身份标识，新功能优先以"命令"形态暴露（如 reader、settings 走命令面板而非按钮）。
3. **构建期零 JS 摄影 masonry（exifr+sharp）**——innei 照片廊是 React 重运行时；我们的构建期管线是自托管价值观的最佳注脚，配上 EXIF 元数据卡（共性#7）即成完整叙事。
4. **构建期 LLM 预翻译 + .en.md 入仓 + AI 标注**——antfu 双语靠手写；我们的管线差异化在"过程可审计"（入仓），强化 AI 译徽标的诚实性。
5. **PWA 离线全量 + 安装 CTA 三态**——六站均无 PWA；已有，勿再投入，保持零回归即可。
6. **灰阶克制本身**——阮一峰证明了"朴素不等于廉价"；我们与 antfu 的 gray-700/200 同谱系，方向正确。

## 四、管理后台便利性专题

### Sveltia vs 主流后台（WordPress/Typecho/Halo）差距面
| 能力 | WP/Halo/Typecho | Sveltia（git 仓） | 补齐方案 |
|---|---|---|---|
| 草稿预览 | 即时预览 | 编辑侧预览，但布局/组件 ≠ 成品 | **/draft/ 构建路由**：draft frontmatter 的文章构建进 `/draft/<slug>/`，nginx 层加 BasicAuth 或长随机路径；发布=移除 draft 标志 |
| 媒体库 | 中央媒体库、检索、批量 | 文件夹浏览、上传即入 git | 我们照片走 gitea web 上传已等价；补 **构建期图片 lint**（exifr 校验尺寸/格式/命名规范，违规即构建警告清单页） |
| 定时发布 | 原生 | 无 | **构建期 publishDate 判定**：CI 触发频率内生效（webhook+定时 cron 双触发 gitea actions / receiver），文章带未来日期默认不出现在正式列表 |
| 批量操作 | 后台多选 | git 原生（批量改文件+一次 commit） | 无需补；可在 scripts/ 加批量 frontmatter 工具（改日期/标签） |
| 版本历史 | 修订版 | git 全量历史 | 已胜出；页脚 commit hash 已把它可视化了 |

### "自托管+git 仓"架构补齐清单（按性价比排序）
1. `/draft/` 预览路由（上面方案）——写作体验最大缺口。
2. 构建期内容 lint：断链检查、图片存在性、frontmatter schema（typebox 已在栈内）、双语文件配对校验（zh 无 en 时警告）。
3. 构建期质量报告页（仅 draft 可见）：字数/阅读时长/图片体积/未翻译词条清单，写作完成度仪表。
4. Sveltia config.yml 优化：为 moments/gallery 集合配 i18n 双语字段映射、媒体文件夹预排序（按日期倒序，避免长列表翻找）。
5. 发布检查单自动化：构建尾跑 LH 冒烟（gz-server.py 已在仓）+ 死链扫描，fail 即 webhook 通知 gitea。

## 五、分级建议表

| 级 | 项 | 理由 |
|---|---|---|
| **P0** | 阅读时长角标（#1） | 一次构建期计算，全站收益 |
| **P0** | 文章页"→ EN/中文版"互链（#2） | 双语投入的回报被入口缺失吃掉 |
| **P0** | /draft/ 预览路由（四-1） | 写作流最大缺口，git 架构易实现 |
| **P0** | 构建期内容 lint（四-2） | 防线前移，typebox 已在栈内 |
| **P1** | 命令面板 reader 纯文本模式（#3） | 极客好评且实现轻，走命令面板零 UI 负担 |
| **P1** | 偏好面板收纳实验开关（#9） | 辉光/动效已有但散落，收纳更克制 |
| **P1** | gallery EXIF 元数据卡（#7） | exifr 数据已在手，纯展示层 |
| **P1** | 列表评论数 + 首页最新评论流（#4/#5） | 激活 Artalk 存量；接受构建期快照陈旧 |
| **P1** | 瞬间编号化"本周瞬间 #N"（#6） | 低成本仪式感 |
| **P1** | 归档全量清单复核（#8） | 只需确认，可能已达标 |
| **P1** | 友链页（#11） | 静态 YAML，一晚工作量 |
| **P2** | Newsletter/邮件订阅（#10） | 需自托管邮件栈（listmonk+发信域名），维护成本先于价值；先强化 RSS |
| **P2** | 背景音乐/一言/背景特效（innei 同款） | 与灰阶克制冲突：多感官装饰稀释"终端"隐喻的一致性 |
| **P2** | 首页大图专题卡、瀑布流重化（nbfox 同款视觉） | nbfox 是内容电商型画廊；我们零 JS masonry 已是更优解，加重视觉与"灰阶骨架×分轨正文"定稿相悖 |
| **P2** | 阅读进度条/浮动 TOC 大改 | 六站中仅少数有 TOC；我们长文少，现有目录足够，勿为趋势加常驻 UI |

## 风险与备注
- antfu.me 文章页部分组件（Plaintext 按钮）为客户端渲染，快照中由类名/结构推断，实现前建议人工核对 antfu 仓（antfu.me 开源）。
- innei.in 首屏计数 0 为懒加载，统计功能存在但数值未取到。
- 评论数/最新评论若走 Artalk 需注意 ESA 缓存（此前已有 /artalk/api 绕缓存议题），构建期拉取可绕开运行时问题。