在开始之前，我想先厘清一个概念：「静态渲染」不等于「无交互」。Astro 的核心理念是把交互的代价降到最低。
这就是 Astro Islands 架构的核心。整站默认是纯 HTML/CSS 渲染，零 JavaScript 代价。
Reading Experience
正文阅读体验
正文是博客的核心。Grove 把阅读体验放在第一位：17px 衬线字体、2.0 行高、2em 首行缩进，让长文阅读不再疲劳。
17px 正文字号 2.0 行高 2em 首行缩进 760px 阅读宽度 Features
为写作和阅读设计
01
衬线正文
17px Noto Serif SC，行高 2.0，首行缩进 2em，首字下沉。让中文长文阅读更舒适。
02
三栏排版
左侧目录、中间正文、右侧信息卡。移动端自适应折叠，始终专注阅读。
03
全文搜索
Pagefind 驱动的静态全文搜索，不弹窗、不打断阅读，搜索即用即走。
04
系列文集
同系列文章侧边栏导航，读完一篇自动指向下篇，系列阅读不迷路。
05
评论系统
Twikoo 驱动，评论区收在侧边栏入口，不影响正文阅读，干净利落。
06
友链检测
构建时自动检测友链健康状态，有问题的标灰提醒，不浪费读者时间。
Design System
设计规范
云图札记以「数字园丁」为视觉隐喻，绿色为基底、珊瑚橙为高光。生长状态体系贯穿全站，是皮肤而非骨架——内容语言不变，只是多了一层花园的语言。
色彩系统
Color Palette--bg-body 暖纸底色 --color-primary 森林绿强调 --color-bloom 珊瑚橙（绽放） --color-bud 翠绿（发芽） --color-seed 橄榄绿（种子） --text-primary 正文色 --border-color 边框色 排版系统
Typography 正文 Noto Serif SC · 17px · 行高 2.0
标题 Noto Serif SC · 左边框强调
等宽 JetBrains Mono · 代码/标签
阅读宽 760px — 最佳正文宽度
设计规则
Design Rulesseed 透明 · 待生长 bud 实心 · 进行中 bloom 光晕 · 已定稿 var() CSS 变量统一 Tech Stack
技术栈
Astro SSR 静态生成
Cloudflare Pages 边缘部署
Pagefind 全文搜索
Twikoo 评论系统
Google Fonts 字体服务
JSON-LD 结构化数据