关于本站

关于这个站点、它用什么搭起来，以及为什么会写成现在这样。

XiaYe

我会看见，飞萤之火自无梦的长夜亮起，绽放在终竟的明天。

文章: 14
分类: 5
标签: 23

你好

这里是 Clover —— 一个用 Astro 构建的站点，记一些写代码时攒下来的东西。

搭它的初衷很朴素：我需要一个能同时安放「写点东西」和「分享点东西」的地方，而现成的主题要么太像博客、要么太像网盘，中间那块地方是空的。于是有了这个主题。

技术栈

Astro

静态站点框架，按文件生成路由，构建时输出纯 HTML。

Tailwind CSS 4

原子化样式，加上一套手写的 Material Design 3 设计令牌。

Svelte 5

只有需要交互状态的地方才加载岛组件，其余页面保持零客户端 JavaScript。

Pagefind

构建后为整站建立静态索引，搜索不需要任何后端服务。

Sätteri

Astro 7 自带的 Rust Markdown 解析器，负责正文与 callout 渲染。

它是怎么组织的

站点的行为几乎全部收敛在 src/config/ 下面的一组配置文件里，改主题色、加菜单项、换语言、开关注释这些事都不用碰组件代码：

src

config/       站点行为与功能开关
content/      文章、独立页面与动态
components/   Astro 与 Svelte 组件
layouts/      外壳、文章页与独立页面布局
pages/        路由入口
styles/       MD3 令牌、prose 与 callout 样式

配置本身是普通的 TypeScript 对象，编辑器能补全，写错时构建会报错：

export const navConfig: NavSection[] = [
  {
    key: "navigation",
    items: [
      { key: "home", href: "/", icon: "material-symbols:home-rounded" },
      { key: "posts", href: "/posts", pageKey: "posts" },
    ],
  },
];

它支持什么

i18n 多语言（简体中文和英文），文章按语言分目录，缺译文时自动回退并标注
downloads 文章底部可以挂下载链接，版本和提取码写在正文里
archive 目录、归档、分类、标签、友情链接、导航页
search 全文搜索，按 ⌘ / Ctrl + K 打开
OG 每篇文章自动生成社交预览图

在文章里写 MDX

文章和独立页面都可以写成 .mdx。内置的正文组件已经注册到渲染器里，直接写标签即可，不需要在每篇文章顶部 import。Aside 与 Sätteri 的 > [!note] callout 语法互不冲突，可以按需混用。

提示与徽标

行内强调可以用新、稳定这样的徽标，键盘快捷键则写成 Shift + Enter。

步骤与卡片

安装依赖
Terminal window
```
pnpm install
```
启动开发服务器
Terminal window
```
pnpm dev
```
写点东西
在 src/content/posts/ 下新建 Markdown 或 MDX 文件，保存后浏览器会立即刷新。

想改点什么

从 src/config/site.ts 开始 —— 那里是站点身份信息。改完 url 和 title，再挑一个主色，剩下的都能跑起来。

填写站点信息
修改 siteConfig 里的 url、title、description 和 author。
选择主色与圆角
主色在 src/config/theme.ts 中选择，圆角比例也可以在这里整体调整。
替换内容
清空示例文章，放入自己的 Markdown 或 MDX 文件；关于页在构建时依赖 src/content/pages/about.mdx，改完之前不要删掉它。