#你好 👋

这是 Fluid for Astro，一款从 hexo-theme-fluid 移植而来的 Astro 博客主题。

它保留了 Fluid 广受喜爱的视觉语言：首屏大图、悬浮卡片、深色模式、文章目录、分类与标签、本地搜索，以及 Material Design 的细节与动效。同时，它使用 Astro 的内容集合、组件化布局和静态输出，构建速度更快，部署也更简单。

#特性一览

• 🎨 Material Design：完整的 Fluid 配色与组件样式，支持浅色 / 深色模式。
• ⚡ Astro 静态输出：默认零客户端框架，按需加载交互脚本。
• 📝 内容集合：文章与页面均使用 Markdown + 类型安全的 front matter。
• 🔍 本地搜索：构建时生成搜索索引，无需第三方服务。
• 🧭 文章目录：自动生成可折叠目录，并随滚动高亮当前章节。
• 💻 代码高亮：基于 Shiki，支持行号、语言标签、一键复制。
• 🖼️ 图片增强：自动图注、懒加载与 PhotoSwipe 灯箱。
• 🌐 国际化：内置 9 种语言，跟随 siteConfig.lang 切换。
• 💬 评论系统：Giscus、Utterances、Waline、Twikoo、Valine、Disqus 等。
• 📡 SEO：RSS、Sitemap、Open Graph、JSON-LD、Canonical。

#快速开始

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建静态站点
npm run build

构建产物位于 dist/，可以直接部署到任意静态托管平台。

#主题配置

所有配置都集中在 src/config.ts，修改后重新构建即可生效。例如修改站点标题与语言：

export const siteConfig: SiteConfig = {
	title: "我的博客",
	subtitle: "记录技术与生活",
	lang: "zh-CN",
	// ...
};

#开始写作

在 src/content/posts/ 下新建 .md 文件：

---
title: 我的第一篇文章
date: 2026-10-24T10:00:00+08:00
categories: [技术, Astro]
tags: [Astro, 博客]
---

在这里写正文。

#保持联系

• 主题仓库：fluid-dev/hexo-theme-fluid
• Astro 文档：docs.astro.build
• Fluid 文档：hexo.fluid-dev.com/docs

如果你喜欢这个主题，欢迎给原项目点一个 Star ⭐