# 2026 Q1 更新日志：从 0 到 1，把官网重构为 LLM 友好的内容平台 > 来源: https://yuanflux.com/blog/2026-changelog-q1 记录 YuanFlux 官网重构的关键决策与技术细节：为什么选 Astro、为什么不用 Tailwind、如何实现 40%+ 正文密度、LLM 三层内容供给架构。 发布日期: 2026-03-25 ## 结论先行 官网重构的核心不是「换框架」，而是**为 LLM 可检索性而重构**。我们把正文密度从 7% 提升到 40%+，建立了三层内容供给体系，所有技术决策都服务于这个目标。 --- ## 背景：旧站的三个核心矛盾 | 矛盾 | 旧站现状 | 影响 | |------|----------|------| | 无内容系统 | 加篇博客要改 HTML，加产品要复制粘贴 | 内容更新极慢，SEO 无法持续 | | 两套构建系统 | 主站手写 HTML + 博客 Hugo | sitemap/llms.txt/结构化数据无法统一生成 | | LLM 读到噪声多 | 34KB HTML 仅 2.4KB 正文，密度 7% | 长文易被截断，关键信息丢失 | --- ## 关键技术决策 ### 1. 统一到 Astro 5，砍掉 Hugo **理由**：Astro 是唯一能同时满足「静态输出（LLM 友好）」+「组件化（做产品页）」+「内容类型安全」的选型。 - 默认零 JS，HTML 体积极小 → 正文密度天然高 - Content Collections 提供 Zod schema 类型约束，字段写错构建失败 - 同一构建产出 HTML + Markdown + RSS + sitemap + llms.txt - MDX 支持，组件可嵌入内容，内容可嵌入组件 ### 2. 不用 Tailwind，用原生 CSS + CSS 变量 **反直觉但必要**：Tailwind 把样式写成 HTML 里的长 class 串，会显著推高 HTML 字节数、压低正文密度。 ``` 旧站：
新站：
``` - 原生 CSS + 语义化 class（`.product-card`、`.hero`）压缩 HTML 体积 - LLM 从 class 名就能理解页面结构 - 双层 Design Token（色板层 + 语义层），换主题只改 1 处 ### 3. 双层 Token 架构 + `.on-dark` 反转类 ```css /* 第 1 层：原始色板 —— 换配色时整体替换 */ :root { --graphite-900: #14161A; --sand-100: #F7F5F1; --ember-500: #E0501C; } /* 第 2 层：语义变量 —— 组件只准用这一层 */ :root { --deep: var(--graphite-900); --paper: var(--sand-100); --accent: var(--ember-500); } /* 深浅区块共享组件 */ .on-dark { --ink: var(--ink-on-dark); --border: var(--border-on-dark); ... } ``` - 组件零硬编码色值，4 套主题内置可一键切换 - 深色区块加 `.on-dark`，内部变量自动反转，避免写「深色版」组件 ### 4. LLM 三层内容供给体系 | 层 | 产物 | 生成方式 | 作用 | |----|------|----------|------| | 目录层 | `llms.txt` | 构建脚本从 Collections 自动生成 | 我是谁、有哪些页、每页讲什么 | | 全文层 | `llms-full.txt` | 全站正文拼接，控制 200KB 内 | 一次性读完核心内容 | | 逐页层 | `/path.md` + Cloudflare Markdown for Agents | Astro 路由输出 + 边缘转换 | 单页纯文本，省约 80% token | **关键规则**： - llms.txt 每个链接必须指向独立 URL（锚点对 LLM 无意义） - 生成脚本跳过空集合（cases 为空时不产出空的「## 客户案例」区块） - Cloudflare 后台必开：Markdown for Agents ✅ / Block AI Scrapers ❌ / AI Labyrinth ❌ / Email Obfuscation ❌ --- ## 设计系统：A 石墨工程 | 角色 | 色值 | 用途 | |------|------|------| | 深色主 `--deep` | `#14161A` | Hero 底、方法论区、CTA 带、页脚、正文主色 | | 页面底 `--paper` | `#F7F5F1` | 全站背景（暖砂白） | | 强调 `--accent` | `#E0501C` | CTA 底、装饰线、关键数字（余烬橙） | **为什么不是深蓝金/青紫渐变**：品牌叫「Agent 建筑师」，建筑事务所的视觉语言是极简、大留白、强排版。橙仅作点睛（施工感：脚手架、工程标记），传达「工程严谨 + 可落地」而非「未来感 + 炫技」。 **对比度实测（全部 AAA/AA 达标）**： - 正文 16.63:1、深底 18.11:1 → AAA - 强调按钮字深色 4.60:1 → AA（白字在所有主题上均不达标） --- ## 正文密度提升实测 | 指标 | 旧站 | 新站 | 提升 | |------|------|------|------| | HTML 体积 | 34,388 字节 | ~8,000 字节 | -77% | | 正文字符 | 2,394 | ~3,200 | +34% | | **正文密度** | **7.0%** | **>40%** | **5.7x** | --- ## 待办：Phase 2+ 进行中 - [x] 5 个产品页完整内容 - [x] 3 个解决方案完整内容 - [x] 2 篇诊断笔记（替代案例的信任状） - [x] 3 篇博客（方法论/洞察/更新日志） - [ ] 中文字体子集化（PingFang SC → WOFF2，unicode-range 分片） - [ ] OG 图自动生成（@vercel/og 或手工制作） - [ ] Cloudflare Pages 部署 + 域名切换 - [ ] 生产环境 LLM 访问体检（17 个 UA 全 200） --- ## 给同行的建议 如果你也在做 B2B 官网，且在乎 LLM 可检索性： 1. **别用 Tailwind/UnoCSS** —— class 串会杀死正文密度 2. **别用锚点导航** —— LLM 读不懂 `#section` 3. **别把 CSS 写在 style 标签里** —— 会被当正文索引 4. **必须生成 llms.txt + 逐页 .md** —— 这是 LLM 读取的标准接口 5. **Cloudflare 后台四个开关必须手动核** —— 默认全反了 --- *下期预告：字体子集化实战、OG 图生成方案、生产环境体检报告。* --- *本页 HTML 版: https://yuanflux.com/blog/2026-changelog-q1*