wait4xandGLM-5.3
0fbb023375
调研收官产物入库：主报告（架构 C''=Astro SSG+gitea 双写作流、 Artalk 评论、分片 webfont、双语预译管线、多端适配规格、 Phase 0-5 实施规划）+ 五份侦察原稿 + 可交互单文件样板 （三路线×明暗×五页型，命令面板/终端/热力图/masonry）。 Co-authored-by: GLM-5.3
144 lines
14 KiB
Markdown
144 lines
14 KiB
Markdown
# 博客重设计调研：现状诊断 + 极简开发者风标杆研究
|
||
|
||
> 侦察员 @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），字体声明未见品牌字体，判断为系统字体兜底
|