wait4x/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
073e1243449ecee863e009e61947e2cc603893d5
blog/docs/research/01-现状诊断与极简开发者风标杆.md
T
wait4xandGLM-5.3 0fbb023375 docs: 落库博客重设计调研报告 v1.8 与视觉样板 v2 
调研收官产物入库：主报告（架构 C''=Astro SSG+gitea 双写作流、
Artalk 评论、分片 webfont、双语预译管线、多端适配规格、
Phase 0-5 实施规划）+ 五份侦察原稿 + 可交互单文件样板
（三路线×明暗×五页型，命令面板/终端/热力图/masonry）。

Co-authored-by: GLM-5.3
2026-10-24 21:48:11 +08:00

14 KiB
Raw Blame History

博客重设计调研：现状诊断 + 极简开发者风标杆研究

侦察员 @agent-5959fa ｜ 2026-10-24 证据来源：本地博客截图（/tmp/c4ai-fetch/shot-1792813179593-9l86id.png）+ 本地 HTML/CSS 实抓；5 个标杆站经 crawl4ai（markdown 模式）+ 原始 HTML + CSS 文件三重实抓。所有结论均基于真实抓取内容，无凭印象推测。

任务 A：现状视觉诊断（wait4x.online，本地 127.0.0.1:18090）

A1. 技术底座（HTML head 实测）

  • Halo 2.24 + howiehz-higan 主题 v1.64.1（资源路径 /themes/howiehz-higan/assets/1.64.1*.css）
  • <html data-color-scheme="auto" theme="auto-blue">，theme-color: #fafafa
  • DaisyUI 风格变量体系，CSS 实测取值：
    • --color-primary: #6cf（#66ccff 天蓝）、--color-secondary: #6cf / #b6f1ff
    • --color-accent: #c5b6ff（淡紫）
    • 亮色底 --color-base-100: #fafafa / base-200: #f5f5f5 / base-300: #e4e4e4
    • 暗色底 --color-base-100: #212326 / base-200: #1c1c1c / base-300: #181818
  • 字体：未声明品牌字体，走系统无衬线兜底（CSS 中无 LXGW/Noto/Inter 等显式 @font-face）

A2. 截图视觉描述（首页）

布局结构

  • 单列内容区，但偏左不居中：内容列约占视口宽 60%，起于约 19% 处，右侧大面积空白无内容承接
  • 顶部：方形深色头像（黑底金环，日蚀图案）→ 右侧粗体站名 wait4x + 太阳图标（主题切换）
  • 导航行：10 个平级入口横排——首页｜文章｜分类｜标签｜瞬间｜相册｜链接｜关于｜搜索｜登录，细竖线分隔，链接呈蓝紫色
  • 下方 tagline「拥抱开源，热爱开源」+「与我联系」+ 邮件/GitHub 图标
  • 「近期发布」浅蓝色大字标题
  • 文章列表项：左侧灰色小字日期（四月 28 2026），右侧自上而下堆叠——加粗黑标题「CS各类配置」→ 元数据行（📁 Linux 分类、🏷 #Linux 绿色标签、👁 42 浏览量）→ 等宽字体观感的摘要（含两条裸 URL）→ 蓝色「阅读全文」链接

字体气质：中文系统黑体 + 摘要呈等宽字体观感（CJK 回退 + latin mono 混排），节奏生硬；日期用灰色小号字，层级弱。

卡片式样：无卡片、无分隔线、无悬浮效果——列表项是"裸堆叠"，项与项之间仅靠空白区分。

导航组织：纯文字 + 竖线分隔的平铺长条，无分组、无图标、无当前页高亮（截图中无法分辨所在页）。

A3. 可能让人「不喜欢」的点（8 条具体猜测）

  1. 导航过载且老派：10 个平级入口 + 竖线分隔是 2010 年代论坛/网志范式；「登录」暴露在公共导航里，破坏"作品"感，瞬间/相册/链接这类 Halo 功能页全量外露，显得杂。
  2. 主题出厂配色未定制：#66ccff 天蓝 + #c5b6ff 淡紫是 higan 的默认蓝（theme 名就叫 auto-blue），多主题色并存（标题浅蓝、导航蓝紫、标签绿、链接蓝）无主次，像没换过设置的默认模板。
  3. 色彩系统不统一：一屏内出现 ≥4 种强调色（浅蓝标题/蓝紫导航/绿色标签/蓝色链接），没有"一个签名色 + 灰阶"的纪律。
  4. 字体气质与内容错位：内容是中文文学书评长文，但界面是技术工具味的系统黑体 + 等宽摘要；文学感为零，书评与 Linux 笔记在视觉上无任何区分。
  5. 信息层级弱、扫读负担大：日期、分类、标签、浏览量、摘要、"阅读全文"六类信息平铺堆叠，全靠加粗标题一个锚点；浏览量「42」外露在列表页是"后台思维"。
  6. 布局重心失衡：内容列偏左、右侧大片空白，既不是居中窄栏也不是双栏，空白没有被设计利用（标杆站全部是真正居中的 640–720px 窄栏）。
  7. 头像与品牌感弱：黑底方块头像与 #fafafa 页面硬冲突，站名+头像组合无排版设计，首屏没有一句有性格的自我介绍。
  8. 列表缺乏节奏与识别度：所有文章长得一样（无每文主题色/无摘要一句话提炼/无年分组），文学长文和技术笔记混排时更显得单调。

任务 B：极简/开发者风标杆博客分析

抓取方式：crawl4ai /md（静态渲染 markdown）+ curl 原始 HTML + 主 CSS 文件。leerob.io 已 301 → leerob.com，分析基于跳转后内容。5/5 站抓取成功。

1. antfu.me（Anthony Fu — Vite/Vitest/UnoCSS 作者，Vercel/Nuxt）

  • 布局结构：单列窄栏居中。首页 = 个人档案页（自我介绍 → 项目名墙（行内链接密集排列）→ Sponsor 区）；/posts = 按年份分组（2026/2025/2024 大字分节）的纯文字列表，每条 = 标题 + 日期 + 阅读时长（· 15min）+ 语言徽章（日本語）；顶部 icon-only 导航（GitHub/Bluesky/Twitter/Podcasts/Talks/Demos/Photos/Blog/RSS/Sponsors 实测 title 属性）+ "Toggle Color Scheme" + "Scroll to top" 悬浮按钮
  • 配色与明暗：中性灰白底，几乎无彩色；.dark class 级暗色切换（CSS 实测 .dark{、.dark\:bg-blue-500 等 UnoCSS attributify 写法）
  • 字体排印：Inter（正文）+ DM Mono（实测 stack DM Mono,Input Mono,Fira Code,monospace）做 mono 点缀；层级靠字号与留白，另有手写体 Bad Script 做个性签名
  • 动效与交互：标志性的 slide-enter 错峰入场动画（实测 h1 带 slide-enter-50 类，元素依次滑入）；hover 反馈细腻；滚动回顶按钮
  • 独有亮点：双语文章语言徽章、阅读时长、Sponsor 自动转发机制、100.antfu.me 生成艺术实验区
  • 值得借鉴的 3 个做法：
    1. 按年份分组的纯文字文章流——零卡片零封面图，扫读效率极高，天然适合"长文写作者"的年刊感
    2. slide-enter 错峰滑入——纯 CSS 可实现，成本低、质感高，首屏立即建立"被设计过"的印象
    3. icon-only 顶部导航 + 悬浮主题切换/回顶——把 10 个导航入口压缩为一行图标，彻底解决导航过载

2. leerob.io（Lee Robinson — 前 Vercel VP / Next.js，现 SpaceX）→ leerob.com

  • 布局结构：极简单列；h1.site-title（链到 X 主页）+ Bio 段 + 三个分节 Notes / Blogs / Projects（实测 h2 id="notes-heading" 等）；文章行 = 标题 + 右缀「月份 年份」，纯文字无边框
  • 配色与明暗：Tailwind v4 体系（CSS 实测 oklab/color-mix、--color-blue-400、dark * 选择器）；底色中性白，暗色下用 blue-400/emerald-500 做细节色
  • 字体排印：正文系统栈（ui-sans-serif,system-ui,... 实测）；文章正文用本地衬线 Iowan Old Style（实测 font-family:Iowan Old Style Local）+ SF Mono 系等宽（SF Mono,Monaco,Inconsolata,Fira Code）+ Caveat 手写体（实测 --font-caveat:"Caveat"）做标题点缀
  • 动效与交互：近乎零动效——层级全靠留白与字重，是"负动效"路线的极简
  • 独有亮点：手写体分节标题注入"个人笔记"气质；Notes（短想法）与 Blogs（长文）分轨
  • 值得借鉴的 3 个做法：
    1. "标题 + 日期"两栏对齐的文章行——无边框无卡片，一行一篇，密度与呼吸感平衡的教科书
    2. 界面无衬线 + 正文衬线的双字体制——阅读场景切换到衬线，直接服务长文沉浸（中文可映射为思源宋体/霞鹜文楷）
    3. Notes 与 Blogs 分轨——短想法/碎片与技术长文分开呈现，正好匹配"文学书评 + Linux 技术"双内容线

3. brianlovin.com（Brian Lovin — Notion 产品设计师）

  • 布局结构：<main class="relative isolate mx-auto flex min-h-svh w-full"> 居中全高布局（实测）；顶部 60×60 头像（实测 width="60" height="60"）+ h1 text-2xl font-semibold 一句身份陈述 + Writing/Projects 分节；项目行 = 名称 + 一句话灰字描述
  • 配色与明暗：白底 + 四级灰阶语义色（实测 text-quaternary dark:text-tertiary——primary/secondary/tertiary/quaternary 层级）；.dark class 级暗色 + dark:bg-amber-900/30 等语义色
  • 字体排印：Inter（UI）+ Source Serif 4（长文正文衬线，实测 "Source Serif 4","Source Serif 4 Fallback"）+ JetBrains Mono Nerd Font（代码）
  • 动效与交互：克制——group-hover:text-primary transition-colors（实测）：灰字 hover 变深即可
  • 独有亮点：四级灰阶建立"标题深→正文中→元数据浅→装饰最浅"的干净层级；/hn、/til、/stack 小工具矩阵扩大人格半径
  • 值得借鉴的 3 个做法：
    1. 语义化多级灰阶系统——不动用彩色就解决全部层级问题，是治愈"多色并存"的特效药
    2. 正文衬线字体（Source Serif 4 类）——为中文书评长文选一款宋体/文楷级衬线是最重要的一次投入
    3. 60px 头像 + 一句身份陈述的名片式开场——替代 banner 和 tagline 口号，第一屏即人格

4. paco.me（Paco Coursey — Linear 网站负责人，前 Vercel 设计系统）

  • 布局结构：裸 <main> 单列（实测无任何布局 class），分区 Building/Projects/Writing/Now/Connect；Writing 每条 = 标题 + 一行灰字摘要（如 "React Hook Getter Pattern — Simple, efficient React state hook in 50 lines."）
  • 配色与明暗：纯 CSS 变量（实测 --bg:#fff 亮 / --bg:var(--gray1) 暗，--fg/--mono6/--border）；prefers-color-scheme 自动暗色 + color-scheme:dark 声明——跟随系统、无手动开关、无闪烁
  • 字体排印：Inter（无衬线）+ Newsreader（衬线+斜体点缀）+ Söhne（实测同站混用）+ system mono；斜体强调词（Crafting interfaces）是签名手法
  • 动效与交互：近乎静态（data-animation-controller 属性暗示局部微动画）；层级全靠字重/斜体/灰阶
  • 独有亮点：全站自动明暗零开关；文案极短——每项一句话，写作区即"标题+副标题"诗性排版
  • 值得借鉴的 3 个做法：
    1. prefers-color-scheme 自动暗色——维护成本最低的暗色方案，对 Halo 主题选型是硬指标
    2. "标题 + 单行灰字摘要"Writing 范式——一篇文章在列表页只需两行，克制到极致
    3. 衬线斜体强调词——中文语境可用楷体/仿宋承担这个角色，给书评文字注入"手批"气质

5. overreacted.io（Dan Abramov — React 核心团队前成员）

  • 布局结构：<body class="mx-auto max-w-2xl px-5 py-12"> = 672px 窄栏正居中（实测）；header = 站名（text-2xl font-black 文字渐变）+ 右侧链接；列表 = 置顶新文（text-[40px] font-black 大标题）+ 按年份的标题流（text-[28px] font-black leading-none，实测）
  • 配色与明暗：CSS 变量双套实测——亮色 --bg:white / --text:#222；暗色 --bg:rgb(40,44,53) 深蓝灰 / --text:rgba(255,255,255,0.88)。签名特性：每篇文章标题一个独立随机色（lab() 色彩空间计算，如 --lightLink:lab(62.991 59.315 -1.483)，明暗各一套，实测多篇文章色值各不相同）
  • 字体排印：Montserrat（font-black 标题，实测 Montserrat Fallback）+ 系统无衬线正文 + ui-monospace 代码；层级靠字重（700/900）而非颜色
  • 动效与交互：header 文字 linear-gradient 悬停变色；入场淡入带延迟（实测 transition:transform 0.2s ease-in-out, opacity 0.2s 0.4s linear）
  • 独有亮点：每文一色的标题色彩系统（极简框架里的游戏感）；深蓝灰暗底而非纯黑
  • 值得借鉴的 3 个做法：
    1. 每篇文章独立情绪色——对中文文学书评是绝配：每篇书评一个"情绪色"，列表即画廊，Halo 可在文章元数据加一个 color 字段实现
    2. 大字重纯标题流列表——28px/900 字重的标题本身即视觉，无卡片无摘要也有极高辨识度
    3. 暗色用深蓝灰 #282c35 而非纯黑——护眼且高级，可直接抄的色值

汇总：「极简开发者风」的共同设计语言

维度 共识
布局 单列窄栏（640–720px）真正居中；首页 = 名片式自我介绍 + 分节列表；文章流 = 纯文字按年分组；导航 icon 化或 ≤4 项
配色 底色只有白/近白 + 深灰蓝两档；正文 1 个主文字色 + 2–4 级灰阶；彩色仅做点缀（链接 hover、每文一色）——绝无多色平铺
字体 UI 无衬线（Inter/系统栈）+ 正文可选衬线（Source Serif 4 / Newsreader / Iowan Old Style）+ 代码等宽（DM Mono / SF Mono / JetBrains Mono）；层级靠字重（400/600/900）而非颜色
明暗 5/5 全支持暗色：两条路线——.dark class 手动切换+记忆（antfu/brian/overreacted），或 prefers-color-scheme 自动跟随（paco/leerob 细节色）
动效 三件套：入场错峰滑入/淡入、hover 颜色过渡、回顶按钮；总量克制，无大面积动画
人格 第一句自我介绍、Now 页、项目墙、每篇一句话摘要——表达"写作的个人"，而非"内容媒体"

适合什么内容与人格

适合以写作者个体为中心、长文阅读优先、更新频率低但单篇质高的博客。设计语言的本质是：把装饰预算从"框"（卡片/边框/底色块）转移到"字"（字重/字号/留白/每文情绪色），让内容排版本身成为视觉主体。

对本书店（中文文学书评 + Linux 技术文）的直接映射

  1. 衬线正文是文学书评的第一优先级（Source Serif 4 的中文对位：思源宋体 / 霞鹜文楷），技术文走无衬线+等宽代码块——双字体制一个系统通吃双内容线（brianlovin/paco/leerob 已验证）
  2. 每文情绪色（overreacted）给书评列表"画廊感"，技术文保持中性色，两种内容天然区分
  3. 四级灰阶 + 字重层级（brianlovin）替换现有"浅蓝标题/蓝紫导航/绿标签"的多色平铺
  4. 导航从 10 项砍到 ≤4 项（文章/关于/搜索 + icon 化社交链接），登录/瞬间/相册收进角落或移除
  5. 672px 居中窄栏 + 自动暗色（paco 方案成本最低）作为新主题选型的硬性基线

抓取可靠性说明

  • 5/5 标杆站全部抓取成功（crawl4ai markdown + 原始 HTML + CSS 文件三源交叉）
  • leerob.io 实测 301 → leerob.com（CSS 从正确域名重抓，数据有效）
  • 本地博客：截图诊断 + CSS 变量实测双重验证；higan 主题部分 CSS 分片极小（160B–2.4KB），字体声明未见品牌字体，判断为系统字体兜底
Reference in new issue View Git Blame Copy Permalink