wait4xandGLM-5.3
a9da765cb1
qh1009/nbfox/yongyuan/阮一峰/antfu/innei 六站直连抓取分析： 共性 12 项（阅读时长/双语互链/纯文本模式/评论数前置/周刊化/ EXIF 元数据卡/归档全量/偏好面板等）+ 差异化护城河 6 项 + Sveltia vs 主流后台差距与补齐方案 + P0-P2 分级建议表。 验证: 文档 125 行入仓可读；来源快照 /tmp/uxstudy/（会话级） Spec: none (调研文档，方案待用户审阅后立项) Co-authored-by: GLM-5.3
14 KiB
14 KiB
博客体验研究与优化方案调研（六站）
任务产出。数据来源：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，构建期） |
三、差异化机会（我们独有，保持强化）
- 命令面板 Ctrl+K + vim 键位弦（g g / g s 双击 chord）——六站无一做到；持续补齐 chord E2E 矩阵即可，是护城河。
- 终端彩蛋页 + 页脚 commit hash——antfu 级极客也只做了 slide 动画；我们的终端隐喻是身份标识，新功能优先以"命令"形态暴露（如 reader、settings 走命令面板而非按钮）。
- 构建期零 JS 摄影 masonry（exifr+sharp）——innei 照片廊是 React 重运行时；我们的构建期管线是自托管价值观的最佳注脚，配上 EXIF 元数据卡（共性#7）即成完整叙事。
- 构建期 LLM 预翻译 + .en.md 入仓 + AI 标注——antfu 双语靠手写；我们的管线差异化在"过程可审计"（入仓），强化 AI 译徽标的诚实性。
- PWA 离线全量 + 安装 CTA 三态——六站均无 PWA；已有，勿再投入，保持零回归即可。
- 灰阶克制本身——阮一峰证明了"朴素不等于廉价"；我们与 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 仓"架构补齐清单（按性价比排序）
/draft/预览路由（上面方案）——写作体验最大缺口。- 构建期内容 lint：断链检查、图片存在性、frontmatter schema（typebox 已在栈内）、双语文件配对校验（zh 无 en 时警告）。
- 构建期质量报告页（仅 draft 可见）：字数/阅读时长/图片体积/未翻译词条清单，写作完成度仪表。
- Sveltia config.yml 优化：为 moments/gallery 集合配 i18n 双语字段映射、媒体文件夹预排序（按日期倒序，避免长列表翻找）。
- 发布检查单自动化：构建尾跑 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 绕缓存议题），构建期拉取可绕开运行时问题。