TANSHIP 模板为你提供了一个完整的 SaaS 基础框架。但你的产品有自己的品牌标识、定价策略和工作流程。以下是如何将模板变成你自己的产品。
主题与品牌定制
模板内置了 34 套主题预设和可视化主题定制器。你可以通过定制面板调整颜色、圆角半径以及亮色或暗色模式的默认设置。
如需更深层的修改，请编辑 src/styles.css 中的 CSS 自定义属性。设计系统遵循 shadcn/ui 规范——每个组件的外观都源自少数几个语义化令牌，如 primary（主色）、secondary（辅色）、accent（强调色）和 muted（柔和色）。
更改品牌色只需更新一个变量：
:root {
--primary: hsl(262 83% 58%);
}替换定价方案
定价页面是一个可替换的示例页面。打开 src/i18n/locales/en/landing.ts，找到 pricing.plans 部分。每个方案——Free（免费版）、Pro（专业版）、Lifetime（终身版）——都包含名称、描述和功能列表。
编辑功能数组以反映你实际的 SaaS 套餐。价格点和计费周期在 src/features/landing/lib/public-pricing.ts 中配置。
支付流程本身已可直接投入生产。通过 .env 中的环境变量配置你的支付服务商。运行 pnpm cloudflare:sync-env 将非敏感值同步到 Cloudflare；API 密钥作为密钥自动上传，绝不会写入 wrangler.jsonc。
替换用户评价
落地页上的用户评价区域使用了 12 条占位内容。姓名和头像图片存放在 src/features/landing/components/testimonials-section.tsx 中，而角色信息和评价文本则来自翻译文件中的 testimonials.items。
将每条评价替换为你自己的客户反馈。如果需要更多或更少的条目，请调整组件中的 testimonialMeta 数组。
添加自定义页面
TanStack Router 使用基于文件的路由系统。在 src/routes/ 中创建新文件，即可自动生成路由。以功能页面为例：
- 创建
src/routes/my-feature.tsx，使用createFileRoute('/my-feature') - 添加页面内容组件
- 通过
head导出来添加 SEO 元数据 - 在
src/routes/__root.tsx中注册导航链接 - 运行
pnpm generate-routes更新路由树
配置邮件
模板使用 Resend 发送事务邮件。通过项目的环境同步工具添加你的 Resend API 密钥——密钥绝不会写入 wrangler.jsonc 或任何提交到仓库的文件。新闻通讯确认、联系表单回执和认证通知的邮件模板位于 src/server/email/ 中。
每个模板均支持英文和中文——语言环境会根据用户的请求上下文自动获取。
下一步
当你的品牌、定价和内容就绪后，使用项目的部署流程将其部署到 Cloudflare Workers（pnpm cloudflare:sync-env → pnpm deploy:check → pnpm deploy:production）。完整的部署指南涵盖了 D1 配置、R2 存储和正式上线等步骤。