如何定制你的 SaaS 官网

误用模板最快的方式，是一上来就重写所有组件。RicoFast 的结构不是这样设计的。前 90% 的定制工作，通常只需要改三个地方：站点配置、设计 tokens 和内容目录。

1. 站点配置：src/config/site.js

这里是品牌信息的单一来源。页面标题、SEO 元信息、页脚链接、社交链接和联系邮箱都应该从这里统一维护。

export const siteConfig = {
  title: "你的 SaaS",
  author: "你的团队",
  url: "https://your-domain.com",
  mail: "hello@your-domain.com",
  meta: {
    title: "你的 SaaS - 一句话价值主张",
    description: "清楚说明你的产品解决什么问题。",
    keywords: "你的, 目标, 关键词",
    image: "/og.jpg",
  },
  social: {
    twitter: "https://x.com/your-handle",
    github: "https://github.com/your-org/your-repo",
  },
};

有正式域名后，在 .env 里设置 PUBLIC_SITE_URL。sitemap、RSS 和 canonical URL 都会读取这个值。

2. 设计 tokens：src/styles/global.css

RicoFast 的视觉主要由少量 tokens 驱动。想换品牌，不要到处找 class，先改这里：

@theme {
  --color-primary: #2d6dc3;
  --color-primary-strong: #0066ff;
  --color-accent: #fad13b;
  --color-bg-primary: #fdfaf5;
  --font-brand: "Source Han Sans SC", "Noto Sans SC", "思源黑体", sans-serif;
  --font-sans: "Source Han Sans SC", "Noto Sans SC", "思源黑体", sans-serif;
}

完整 token 表在 docs/DESIGN.md。除非你确实在扩展设计系统，否则不要在组件里临时写一堆新颜色。

3. 内容：src/content/

Blog 和 Changelog 都是 MDX 文件：

• src/content/post/
• src/content/changelog/

文章 frontmatter 示例：

---
title: "你的文章标题"
description: "用于卡片和 SEO 的一句话摘要"
publishDate: 2026-05-18
read: 7
tags: ["Guide"]
img: "/posts/your-image.jpg"
img_alt: "图片的无障碍描述"
featured: false
---

featured: true 会把文章置顶在 /blog。正文可以是普通 Markdown，也可以引入 Astro 组件。

页面内容在哪里改？

首页 Hero、功能卡、价格区块和 FAQ 等内容，主要在对应页面文件顶部的数据数组里，比如 src/pages/index.astro。

这不是偷懒，而是有意保持直接。早期产品的营销文案经常变，两三行文案不一定值得接 CMS。等你真的需要多人协作或内容权限，再把它们迁出去也不迟。

五分钟检查清单

克隆模板后，建议按这个顺序改：

1. 修改 src/config/site.js：站点名、邮箱、社交链接、SEO 元信息。
2. 修改 src/styles/global.css：主色、强调色、字体 tokens。
3. 修改 src/pages/index.astro：Hero、功能、价格和 FAQ 文案。
4. 替换 public/og.jpg，尺寸建议 1200x630。
5. 替换 logo，或调整 src/components/ui/Logo.astro。

做到这里，就已经可以部署。剩下的细节可以随着产品推进慢慢改。