自定义工作通常从三个地方入手:站点配置、设计令牌和内容。
1. 更改站点配置
打开 src/config/site.js,更新站点标题、作者、URL、仓库地址、社交链接和 SEO 元数据。
2. 更改令牌
打开 src/styles/global.css 查看 Tailwind @theme 基础令牌和默认主题值。非默认颜色主题覆盖在 src/styles/themes.css 中。
最重要的值包括:
- 品牌颜色
- 背景颜色
- 文字颜色
- 字体
- 容器宽度
先改少量令牌,再到 /elements 看效果,最后再改组件代码。
3. 替换内容
博客文章放在 src/content/post/ 中。每篇都是 MDX 文件,frontmatter 包含标题、描述、日期、标签、图片和阅读时间。
首页是普通的 Astro 页面,位于 src/pages/index.astro。各区块就是数组和组件,直接替换示例文案就行,不需要先学 CMS。
4. 从组件库构建新页面
用 /elements 作为 UI 模式的参考。它能展示按钮、徽章、卡片、表单控件、排版、分隔线和动效在当前主题下的真实表现。