用 Astro + React 岛屿搭建个人知识博客与工具站

知乎式阅读体验 + Markdown 写作 + 工具入口，一份适合长期维护的个人站点骨架。

1. 阅读体验的核心原则

知乎风格最值得借鉴的是「稳定、克制、可持续」的阅读排版：足够留白，明确标题层级，正文行高舒适，侧栏辅助而不抢焦点。

阅读页优先保证长文可读性，再叠加目录、分栏、工具入口。这样既保留内容深度，也便于后续把工具体系接入进来。

好的阅读体验不是让用户「看到更多」，而是让用户「读得更顺」。

2. 目录与分栏的协作

左侧分栏负责「发现内容」，右侧目录负责「定位内容」。一个做内容分栏导航，一个做文章级导航，职责明确，避免与顶部站点导航重复。

2.1 图文混排的优雅格式

正文支持 Markdown 生成的段落、标题、引用、代码块和图片说明。统一字号、间距与边框样式后，即使内容结构复杂，视觉节奏仍然稳定。

const renderer = {
  code: true,
  image: true,
  heading: true,
}

3. 写作到发布的闭环

编辑页采用「实时 Markdown + 目录树」设计，作者可以边写边查看结构。定稿后导出 Markdown 放入仓库，git push 后由 GitHub Pages 发布。

3.1 工具区如何共存

工具页（如 JSON Viewer）作为独立路由挂载，与博客共享同一套顶栏与视觉 token，形成「博客 + 工具」一体化站点。