自定义

LaunchSaaS 设计为高度可定制。本指南涵盖网站配置、主题和品牌。

网站配置

LaunchSaaS 使用模块化配置系统。所有配置文件都位于 src/configuration/：

文件	描述
`metadata.ts`	网站名称、标题、描述、logo、SEO
`navbar.ts`	导航栏项目和操作
`sidebar.ts`	仪表板/管理侧边栏（基于角色的访问）
`user-button.tsx`	用户下拉菜单（基于角色的项目）
`fotoer.ts`	页脚链接和徽章
`social-links.ts`	社交媒体链接
`product.ts`	定价和产品配置

元数据

编辑 src/configuration/metadata.ts 以自定义网站的基本信息：

import { Metadata } from "@/schemas/site-configuration";

export const metadata: Metadata = {
  name: "你的 SaaS 名称",
  title: "你的 SaaS – SEO 标语",
  tagline: "你的吸引人的标语",
  description: "用于 SEO 的 SaaS 描述",
  logo: "/logo.png",
  ogImage: "/og.png",
  keywords: ["关键词1", "关键词2"],
};

导航栏

编辑 src/configuration/navbar.ts 以自定义头部导航：

import { NavBar } from "@/schemas/site-configuration";
import { SiVercel } from "@icons-pack/react-simple-icons";

export const navbar: NavBar = {
  // 导航项（支持嵌套菜单）
  items: [
    { title: "功能", href: "/#features" },
    { title: "定价", href: "/#pricing" },
    { title: "博客", href: "/blog" },
    // 带图标和描述的嵌套菜单
    {
      title: "产品",
      children: [
        {
          icon: SiVercel,
          title: "产品一",
          href: "/products/one",
          description: "产品一的描述",
        },
      ],
    },
  ],
  // 操作按钮（未登录时显示）
  actions: [
    { item: { title: "登录", href: "/auth/sign-in" }, variant: "outline" },
    { item: { title: "开始使用", href: "/#pricing" }, variant: "default" },
  ],
};

侧边栏（仪表板/管理）

编辑 src/configuration/sidebar.ts 以自定义受保护路由的侧边栏：

import { SideBar } from "@/schemas/site-configuration";
import { CreditCard, Settings, UserCog } from "lucide-react";

export const sidebar: SideBar = {
  groups: [
    {
      title: "管理",
      items: [
        {
          icon: UserCog,
          title: "用户",
          href: "/admin/users",
          roles: ["admin"], // 仅对管理员可见
        },
      ],
    },
    {
      title: "设置",
      items: [
        {
          icon: CreditCard,
          title: "计费",
          href: "/billing",
          roles: ["user"], // 仅对用户可见
        },
        {
          icon: Settings,
          title: "设置",
          href: "/settings",
          roles: ["user"],
        },
      ],
    },
  ],
};

侧边栏支持基于角色的可见性 - 项目会根据用户的角色（user 或 admin）自动过滤。

用户按钮菜单

编辑 src/configuration/user-button.tsx 以自定义用户下拉菜单：

import { UserButton } from "@/schemas/site-configuration";
import { CreditCard, LayoutDashboard, Settings } from "lucide-react";

export const userButton: UserButton = {
  menus: [
    {
      title: "计费",
      href: "/billing",
      icon: CreditCard,
      roles: ["user"],
    },
    {
      title: "仪表板",
      href: "/admin/users",
      icon: LayoutDashboard,
      roles: ["admin"],
    },
  ],
};

页脚

编辑 src/configuration/fotoer.ts 以自定义页脚链接：

import { Footer } from "@/schemas/site-configuration";

export const footer: Footer = {
  groups: [
    {
      title: "产品",
      menus: [
        { title: "功能", href: "/#features" },
        { title: "定价", href: "/#pricing" },
      ],
    },
    {
      title: "法律",
      menus: [
        { title: "隐私", href: "/privacy" },
        { title: "条款", href: "/terms" },
      ],
    },
  ],
  badges: [
    // 可选：添加 ProductHunt 等徽章
  ],
};

社交链接

编辑 src/configuration/social-links.ts 以添加你的社交媒体资料：

import { SocialLink } from "@/schemas/site-configuration";
import { SiGithub, SiX, SiDiscord } from "@icons-pack/react-simple-icons";

export const socialLinks: SocialLink[] = [
  { icon: SiGithub, title: "GitHub", href: "https://github.com/your-org" },
  { icon: SiX, title: "Twitter", href: "https://x.com/your-handle" },
  { icon: SiDiscord, title: "Discord", href: "https://discord.gg/your-invite" },
];

主题

LaunchSaaS 使用 Tailwind CSS 和 shadcn/ui 主题。

主题生成器

你可以使用在线工具生成自定义主题：

tweakcn - shadcn/ui 的可视化主题编辑器
shadcn themes - 官方 shadcn/ui 主题生成器

生成主题后，将 CSS 变量复制到 src/app/globals.css。

颜色

在 src/app/globals.css 中使用 CSS 变量自定义颜色：

@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }

  .dark {
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    /* ... */
  }
}

添加组件

添加新的 shadcn/ui 组件：

npx shadcn@latest add button
npx shadcn@latest add card

组件会添加到 src/components/ui/。

着陆页

在 src/components/landing/ 中自定义着陆页部分：

组件	描述
`hero.tsx`	英雄区
`features.tsx`	功能网格
`pricing.tsx`	定价计划
`faq.tsx`	常见问题
`testimonials.tsx`	客户推荐
`cta.tsx`	行动号召

产品配置

在 src/configuration/product.ts 中配置定价和产品：

使用 Stripe Price ID 定义订阅计划
定义一次性支付产品
配置支付完成钩子
设置要在定价页面上显示的产品

电子邮件模板

在 src/components/email/ 中自定义电子邮件模板：

email-verification.tsx - 验证邮件
forget-password.tsx - 密码重置邮件
magic-link.tsx - 魔术链接登录邮件
welcome.tsx - 欢迎邮件

博客和文档

博客文章

在 content/blog/ 中添加博客文章为 MDX 文件：

---
title: 你的文章标题
description: 文章描述
date: 2025-01-15
author:
  name: 作者名称
  avatar: /avatar.png
  url: https://example.com
category:
  id: category-id
  title: 分类标题
published: true
---

你的内容在这里...

文档

在 content/docs/ 中添加文档页面为 MDX 文件。更新 content/docs/meta.json 以配置侧边栏顺序。

自定义

自定义