VibeAny Docs
配置

品牌与国际化

替换示例标识、内容、资源、主题和本地化消息。

交付的应用会有意使用中性的 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、控制台和错误页文字 Logosrc/shared/ui/brand-name.tsxsrc/lib/config/brand.ts
功能 section 插图 Logopublic/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-primarytext-accent 等 Tailwind utility 都会映射回这些变量,因此大多数组件无需改动 class name 就能更新。

Open Graph 图片根据集中式品牌配置生成。修改名称、标语、颜色和域名后,请检查生成结果。

重写产品内容

购买者主要负责以下内容:

内容来源
落地页、功能、定价文案、FAQ 和 SEOsrc/i18n/locales/*/marketing.json
条款和隐私示例src/i18n/locales/*/legal.json
落地页 section 组合src/features/marketing/ui/home-content.tsx
Header 和 Footer 结构src/features/marketing/ui/header.tsxfooter.tsx
套餐和积分包src/lib/config/products.ts
博客文章content/blog/<slug>/<locale>.mdx

随附的法律文本只是示例,明确不构成法律建议。请根据你的业务、服务商、司法辖区、退款政策和数据处理方式,用经过审查的政策替换它们。

本地化的组织方式

VibeAny 使用 next-intl 和带语言前缀的路由。当前启用的语言为 enzhes,其中 en 是默认语言和翻译源。

路由配置位于 src/lib/i18n/routing.ts。语言消息位于 src/i18n/locales/<locale>,目前提供八个顶层 namespace:

  • common
  • auth
  • dashboard
  • marketing
  • media
  • payments
  • legal
  • storage

每种语言的 index.ts 会导入这些 JSON 文件,组成传给 NextIntlClientProvider 的对象。

安全地编辑翻译

  1. 先在英文 JSON 文件中添加或重命名 key。
  2. 在中文和西班牙文中添加完全相同的 key 结构。
  3. 翻译 value,不要翻译 key。
  4. 保留插值占位符,以及 UI 数据结构所需的结构化数组或对象。
  5. 提交前运行验证和覆盖率检查。
npm run i18n:validate
npm run i18n:coverage

i18n:validate 会将每种语言的文件和 key path 与英文对比。i18n:coverage 会报告空值,但不会判断翻译质量。

客户端组件使用 useTranslations('<namespace>') 读取消息。服务端组件使用 next-intl 服务端 helper。请使用 src/lib/navigation.ts 中支持 locale 的导航 export,不要手动拼接语言前缀。

添加或删除语言

语言支持横跨路由、加载、验证和 SEO。不要只复制一个文件夹再修改一处列表。

添加语言时,至少要更新:

  1. src/lib/i18n/routing.ts
  2. src/i18n/locales/<new-locale> 及其 index.ts
  3. src/i18n/utils.ts 中显式列出的 loader case
  4. i18n 验证、覆盖率和 namespace 脚本中的 locale 列表
  5. src/lib/seo.ts 中的 locale 处理和 language alternate
  6. src/app/sitemap.ts
  7. 每种语言的 marketing.json 中的多语言替代页元数据
  8. 如果新语言需要本地化身份认证邮件,还要更新相应的语言类型和模板

完成后运行 npm run i18n:validatenpm run typecheck:allnpm run build,然后逐一检查新语言的首页、身份认证、法律、定价、控制台和元数据路由。

身份认证邮件语言

身份认证邮件模板目前位于 src/lib/auth.ts。虽然其中包含英文、中文和西班牙文消息集,但验证和重置回调目前会明确选择英文。如果产品需要按用户首选语言发信,请定制这段选择逻辑。

品牌变更验收

上线前:

  • 在当前 UI、元数据、邮件、博客和法律内容中搜索示例标识
  • 验证 Logo 和图标在亮色、暗色对比度下的表现
  • 检查本地化元数据和生成的 Open Graph 图片
  • 确认每种语言都有等价的 key 和符合预期的文案
  • 运行 npm run i18n:validate、相关测试和 npm run build

npm run rebrand:validate 只能作为残留引用的补充检查,不能证明所有 Example SaaS 内容都已替换。当前脚本的历史模板基线没有覆盖购买者负责的所有占位内容。

接下来可以阅读环境配置身份认证与邮件

本页目录