你好，Fluid for Astro

Fluid 是一款发布于 2019 年的 Hexo 主题，凭借干净的 Material Design 风格和丰富的功能，它陪伴了很多人的写作时光。

随着 Astro 的流行，越来越多的人希望把自己的博客迁移到更现代的技术栈上。这个项目就是一次尝试：保留 Fluid 的视觉与交互，同时用 Astro 的方式重新组织代码。

#为什么选择 Astro

Astro 的核心思路是「默认输出静态 HTML，只在需要交互的地方加载 JavaScript」。对于博客这类以内容为主的站点，这几乎是完美的匹配：

• 首屏没有框架运行时，加载更快；
• 内容集合提供类型安全的 front matter；
• 组件化让布局更容易维护；
• 可以自由选择是否接入 React、Vue、Svelte 等框架。

Fluid 原本由 EJS 模板、Stylus 样式和 jQuery 脚本组成。移植时，我把它们分别替换成了 Astro 组件、可配置的 CSS 变量和原生 TypeScript 模块。

#保留了哪些东西

移植并不是重做。以下这些 Fluid 的标志性设计都被完整保留：

1. 首屏大图与视差滚动：向下滚动时，头图与主面板以不同速度移动。
2. 悬浮式主面板：白色卡片向上覆盖头图，形成层次感。
3. 打字机副标题：首页标语逐字出现。
4. 深色模式：跟随系统、手动切换，并持久化到 localStorage。
5. 文章目录：右侧 sticky 目录，支持折叠与滚动高亮。
6. 分类侧栏：在文章页左侧展示当前分类下的其他文章。

Fluid 的美学建立在克制的配色、充足的留白和恰当的阴影之上。移植时我尽量不改变这些细节，只把「配置方式」换成了更符合 Astro 习惯的 TypeScript。

#一些数字

主题的样式仍然来自 Fluid 的 Stylus 源码，只是在变量层接了 CSS 自定义属性：

// src/styles/fluid/_variables/base.styl
$body-bg-color = var(--body-bg-color, #eee)
$text-color = var(--text-color, #3c4858)
$link-hover-color = var(--link-hover-color, #30a9de)

这意味着你可以在 src/config.ts 中一次性调整所有颜色，而不需要改样式文件。

#下一步

接下来的计划包括：

• 首页、文章、归档、分类、标签、关于、友链、404
• 本地搜索与代码复制
• 图片灯箱与图注
• RSS、Sitemap、Open Graph
• 更多评论插件的自动化测试
• 可选的无障碍增强

如果你在使用过程中遇到问题，欢迎在仓库中提出 Issue。

#写在最后

好的主题应该让读者专注于内容，而不是主题本身。

这是 Fluid 一直坚持的理念，也是这次移植的出发点。希望你会喜欢它。