主题配置详解

Fluid for Astro 的所有配置都集中在 src/config.ts。它使用 TypeScript 编写，编辑器会提供完整的类型提示与注释。

#站点信息

export const siteConfig: SiteConfig = {
	title: "Fluid",
	subtitle: "一款优雅的 Material Design 风格 Astro 主题",
	description: "站点默认描述，用于 SEO 与 RSS。",
	author: "Fluid",
	url: "https://fluid-astro.example.com",
	lang: "zh-CN",
	favicon: "/img/fluid.png",
	appleTouchIcon: "/img/fluid.png",
	// ...
};

url 会同时用于 astro.config.mjs 的 site，因此只需要修改一处。部署到子路径时，请同时修改 astro.config.mjs 中的 base。

#导航菜单

export const navBarConfig: NavBarConfig = {
	blogTitle: "Fluid",
	links: [
		{ key: "home", link: "/", icon: "fa6-solid:house" },
		{ key: "archive", link: "/archives/", icon: "fa6-solid:box-archive" },
		{ key: "category", link: "/categories/", icon: "fa6-solid:folder" },
		{ key: "tag", link: "/tags/", icon: "fa6-solid:tags" },
		{ key: "about", link: "/about/", icon: "fa6-solid:user" },
	],
};

• key 会用于查找 src/i18n/languages/*.ts 中的翻译。
• name 可以强制指定显示文字，优先级高于 key。
• icon 接受任何 Iconify 图标名。
• 支持一级 submenu 下拉菜单。

#颜色与字体

颜色配置集中在 colorConfig：

export const colorConfig: ColorConfig = {
	bodyBgColor: "#eee",
	bodyBgColorDark: "#181c27",
	navbarBgColor: "#2f4154",
	navbarBgColorDark: "#1f3144",
	textColor: "#3c4858",
	textColorDark: "#c4c6c9",
	postLinkColor: "#0366d6",
	postLinkColorDark: "#1589e9",
	// ...
};

这些值会在构建时转换为 CSS 自定义属性，例如 --body-bg-color、--text-color。Fluid 的 Stylus 样式直接消费这些变量，所以修改配置即可整体换肤，不需要改样式源码。

字体配置：

export const fontConfig: FontConfig = {
	fontSize: "16px",
	fontFamily: "", // 留空使用系统字体栈
	letterSpacing: "0.02em",
	codeFontSize: "85%",
};

#首页

export const indexConfig: IndexConfig = {
	bannerImg: "/img/default.png",
	bannerImgHeight: 100,
	slogan: {
		enable: true,
		text: "An elegant Material-Design theme for Astro",
	},
	pageSize: 5,
	postMeta: { date: true, category: true, tag: true },
	postSticky: { enable: true, icon: "fa6-solid:thumbtack" },
};

slogan.text 支持字符串数组，每次刷新会随机选择一条。

#文章页

export const postConfig: PostConfig = {
	bannerImg: "/img/default.png",
	bannerImgHeight: 70,
	meta: {
		date: { enable: true, format: "LL" },
		wordcount: { enable: true },
		min2read: { enable: true, awl: 2, wpm: 60 },
	},
	toc: {
		enable: true,
		expandAll: true,
		placement: "right",
		collapseDepth: 0,
	},
	copyright: {
		enable: true,
		license: "BY",
	},
};

日期格式支持 moment 风格的常用 token：YYYY、MM、DD、HH:mm、LL、LLL、a 等。

#搜索

export const searchConfig: SearchConfig = {
	enable: true,
	path: "/search.json",
	field: "all", // post | page | all
	content: true,
};

搜索索引在构建时生成到 dist/search.json。content: true 会扫描正文，索引体积会更大，但搜索结果更准确。

#评论

首先选择评论系统：

export const postConfig: PostConfig = {
	// ...
	comments: {
		enable: true,
		type: "giscus",
	},
};

然后填写对应配置：

export const commentsConfig: CommentsConfig = {
	giscus: {
		repo: "your-name/your-repo",
		repoId: "R_kgDO...",
		category: "General",
		categoryId: "DIC_kwDO...",
		themeLight: "light",
		themeDark: "dark",
		// ...
	},
};

支持 Giscus、Utterances、Waline、Twikoo、Valine、Disqus、Gitalk、Cusdis、Remark42、Livere、畅言与 Discuss。

#代码高亮

export const codeConfig: CodeConfig = {
	copyBtn: true,
	language: { enable: true, default: "TEXT" },
	highlight: { enable: true, lineNumber: true },
	themes: { light: "github-light", dark: "github-dark" },
};

主题名来自 Shiki，可以替换成任意内置主题。

#修改后做什么

配置在构建时读取，修改后：

npm run dev     # 开发服务器会自动重启
npm run build   # 生产构建

如果只修改了 Markdown 内容，开发服务器会热更新；修改 src/config.ts 时 Astro 会重新加载配置。