自定义 RicoUI 主题

自定义工作通常从三个地方入手:站点配置、设计令牌和内容。

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 模式的参考。它能展示按钮、徽章、卡片、表单控件、排版、分隔线和动效在当前主题下的真实表现。

Logo

设计驱动的 Astro 启动模板,自带博客、设计文档、组件库、Tailwind CSS v4 和可复用的 RicoUI 主题。

© 2026 RicoUI . 基于 MIT 协议开源。

v1.0.0 Astro 启动模板 Twitter Github RSS