品牌与国际化
替换示例标识、内容、资源、主题和本地化消息。
交付的应用会有意使用中性的 Example SaaS 标识,以及示例法律和营销内容。上线生产环境前请替换这一展示层,同时保持底层身份认证、账单、积分和服务商边界不变。
替换长期品牌标识
从 src/lib/config/brand.ts 开始。它负责应用各处使用的非翻译品牌信息:
- 规范域名和 URL
- 支持、法务和隐私邮箱
- 法定公司名称和司法辖区
- 社交链接
- 面向基础设施的项目 slug 和身份认证缓存键
渲染出的 brand.name 通常来自英文营销消息中的 seo.common.siteName。请在每个启用的语言中更新该值:
src/i18n/locales/en/marketing.json
src/i18n/locales/zh/marketing.json
src/i18n/locales/es/marketing.json同时替换营销 SEO section 中的标题、描述、作者、Open Graph 文案和 Twitter 文案。编辑完成后,在三个 locale 文件中搜索 Example SaaS。
部署专属名称覆盖
两个可选的公开变量可以在不修改源码的情况下改变渲染出的文字 Logo:
NEXT_PUBLIC_BRAND_NAME=Your Product
NEXT_PUBLIC_BRAND_WORDMARK_ACCENT=Product这种方式适合临时预览环境。它不会更新规范域名、联系邮箱、法定实体、本地化正文或产品内容。正式品牌变更仍需修改源码。
替换资源和主题变量
| 项目 | 来源 |
|---|---|
| Header、控制台和错误页文字 Logo | src/shared/ui/brand-name.tsx 和 src/lib/config/brand.ts |
| 功能 section 插图 Logo | public/logo.svg |
| 元数据图标 | public/icon.svg |
| Next.js favicon 文件 | src/app/favicon.ico |
| 生成的社交分享卡片 | src/app/opengraph-image.tsx |
| 亮色和暗色主题变量 | src/app/globals.css |
| Tailwind 主题变量映射 | tailwind.config.ts |
营销页 Header 渲染的是 BrandName 文本组件,而不是 public/logo.svg。元数据会明确引用 /icon.svg,交付源码中还包含 src/app/favicon.ico。请替换并验证两个图标位置,避免浏览器和爬虫看到不一致的图标。
请同时修改 :root 和 .dark 中的 CSS 变量。bg-primary 和 text-accent 等 Tailwind utility 都会映射回这些变量,因此大多数组件无需改动 class name 就能更新。
Open Graph 图片根据集中式品牌配置生成。修改名称、标语、颜色和域名后,请检查生成结果。
重写产品内容
购买者主要负责以下内容:
| 内容 | 来源 |
|---|---|
| 落地页、功能、定价文案、FAQ 和 SEO | src/i18n/locales/*/marketing.json |
| 条款和隐私示例 | src/i18n/locales/*/legal.json |
| 落地页 section 组合 | src/features/marketing/ui/home-content.tsx |
| Header 和 Footer 结构 | src/features/marketing/ui/header.tsx 和 footer.tsx |
| 套餐和积分包 | src/lib/config/products.ts |
| 博客文章 | content/blog/<slug>/<locale>.mdx |
随附的法律文本只是示例,明确不构成法律建议。请根据你的业务、服务商、司法辖区、退款政策和数据处理方式,用经过审查的政策替换它们。
本地化的组织方式
VibeAny 使用 next-intl 和带语言前缀的路由。当前启用的语言为 en、zh 和 es,其中 en 是默认语言和翻译源。
路由配置位于 src/lib/i18n/routing.ts。语言消息位于 src/i18n/locales/<locale>,目前提供八个顶层 namespace:
commonauthdashboardmarketingmediapaymentslegalstorage
每种语言的 index.ts 会导入这些 JSON 文件,组成传给 NextIntlClientProvider 的对象。
安全地编辑翻译
- 先在英文 JSON 文件中添加或重命名 key。
- 在中文和西班牙文中添加完全相同的 key 结构。
- 翻译 value,不要翻译 key。
- 保留插值占位符,以及 UI 数据结构所需的结构化数组或对象。
- 提交前运行验证和覆盖率检查。
npm run i18n:validate
npm run i18n:coveragei18n:validate 会将每种语言的文件和 key path 与英文对比。i18n:coverage 会报告空值,但不会判断翻译质量。
客户端组件使用 useTranslations('<namespace>') 读取消息。服务端组件使用 next-intl 服务端 helper。请使用 src/lib/navigation.ts 中支持 locale 的导航 export,不要手动拼接语言前缀。
添加或删除语言
语言支持横跨路由、加载、验证和 SEO。不要只复制一个文件夹再修改一处列表。
添加语言时,至少要更新:
src/lib/i18n/routing.tssrc/i18n/locales/<new-locale>及其index.tssrc/i18n/utils.ts中显式列出的 loader case- i18n 验证、覆盖率和 namespace 脚本中的 locale 列表
src/lib/seo.ts中的 locale 处理和 language alternatesrc/app/sitemap.ts- 每种语言的
marketing.json中的多语言替代页元数据 - 如果新语言需要本地化身份认证邮件,还要更新相应的语言类型和模板
完成后运行 npm run i18n:validate、npm run typecheck:all 和 npm run build,然后逐一检查新语言的首页、身份认证、法律、定价、控制台和元数据路由。
身份认证邮件语言
身份认证邮件模板目前位于 src/lib/auth.ts。虽然其中包含英文、中文和西班牙文消息集,但验证和重置回调目前会明确选择英文。如果产品需要按用户首选语言发信,请定制这段选择逻辑。
品牌变更验收
上线前:
- 在当前 UI、元数据、邮件、博客和法律内容中搜索示例标识
- 验证 Logo 和图标在亮色、暗色对比度下的表现
- 检查本地化元数据和生成的 Open Graph 图片
- 确认每种语言都有等价的 key 和符合预期的文案
- 运行
npm run i18n:validate、相关测试和npm run build
npm run rebrand:validate 只能作为残留引用的补充检查,不能证明所有 Example SaaS 内容都已替换。当前脚本的历史模板基线没有覆盖购买者负责的所有占位内容。