HappyShip Logo

HappyShip

使用文档

国际化(i18n)

HappyShip支持完整的国际化功能，让您的AI网站轻松服务全球用户。本指南将教您如何添加多语言内容、扩展语言支持，以及掌握国际化的实用技巧。

1
页面多语言内容

为您的网站页面添加多语言支持，让内容能够以用户的母语呈现。

📁 多语言文件位置

templates/your-template/
├── messages/
│ ├── en.json ← 英文内容
│ └── zh.json ← 中文内容

🔧 添加新页面多语言内容的步骤

第1步：在英文文件中添加内容

在 messages/en.json 中添加新页面的英文内容：

// messages/en.json
{
// ... 现有内容
"newPage": {
"title": "New Page Title",
"subtitle": "New page subtitle",
"content": {
"section1": "Section 1 content",
"section2": "Section 2 content"
}
}
}
第2步：在中文文件中添加对应翻译

在 messages/zh.json 中添加对应的中文翻译：

// messages/zh.json
{
// ... 现有内容
"newPage": {
"title": "新页面标题",
"subtitle": "新页面副标题",
"content": {
"section1": "第一部分内容",
"section2": "第二部分内容"
}
}
}
第3步：在页面组件中使用翻译

在您的页面组件中导入并使用翻译：

// your-page.tsx
import { useTranslations } from 'next-intl';
const NewPage = () => {
const t = useTranslations('newPage');
return (
<div>
<h1>{t('title')}</h1>
<p>{t('subtitle')}</p>
<p>{t('content.section1')}</p>
</div>
);
};

💡 重要提示：确保 en.json 和 zh.json 中的键名完全一致，这样系统才能正确找到对应的翻译内容。

📸 效果展示

下图展示了多语言内容的完整配置和效果：

页面多语言内容配置示例

页面多语言内容的配置流程和实际效果展示

2
支持更多语言

扩展您的网站语言支持，触达更广泛的全球用户群体。

🌍 添加新语言的步骤

第1步：修改路由配置

在 src/i18n/routing.ts 中添加新的语言代码：

// src/i18n/routing.ts
export const routing = defineRouting({
// 原有配置
locales: ['en', 'zh', 'ja', 'ko'], // 添加日语和韩语
defaultLocale: 'en',
localePrefix: {
mode: 'as-needed'
}
});
第2步：创建新的语言文件

在 messages/ 文件夹中创建新的语言文件：

messages/
├── en.json ← 英语（已存在）
├── zh.json ← 中文（已存在）
├── ja.json ← 日语（新建）
└── ko.json ← 韩语（新建）
第3步：翻译内容

复制 en.json 的结构，然后翻译成目标语言：

// messages/ja.json (日语示例)
{
"header": {
"logo": "AI動画ジェネレーター",
"nav": {
"features": "機能",
"pricing": "料金"
}
}
}
第4步：更新语言切换器

在Header组件中添加新语言的切换选项。查找语言切换部分并添加新的选项：

// Header.tsx 语言切换部分
<DropdownMenuItem
onClick={() => window.location.href = `/ja${pathname}`}
>
日本語
</DropdownMenuItem>

🎯 推荐的语言优先级

中文 (zh) - 最大用户群体
英语 (en) - 国际通用
日语 (ja) - 高价值市场
韩语 (ko) - 活跃用户群
西班牙语 (es) - 覆盖面广
法语 (fr) - 欧洲市场

⚠️ 注意事项：

  • 确保所有语言文件的JSON结构完全一致
  • 新增语言时建议先完成核心页面的翻译
  • 考虑从右到左阅读的语言（如阿拉伯语）需要额外的CSS适配
  • 建议找native speaker校对翻译质量

📸 配置展示

下图展示了如何配置和管理多语言支持：

支持更多语言配置示例

多语言支持的配置方法和语言切换效果

3
实用技巧与最佳实践

掌握这些技巧，让您的多语言网站更加专业和用户友好。

💡 内容组织技巧

1. 使用嵌套结构组织内容
{
"aboutPage": {
"hero": {
"title": "About Us",
"subtitle": "Learn about our story"
},
"team": {
"title": "Meet Our Team"
}
}
}

这样可以保持翻译文件结构清晰，便于维护

2. 支持动态内容参数
// 在JSON中
"welcome": "Hello, {name}!"
// 在组件中使用
const message = t('welcome', { name: '张三' });
3. 处理复数形式
// 英文
"items": "{count} item" | "{count} items"
// 中文
"items": "{count} 个项目"

🛠️ 开发技巧

使用TypeScript：为翻译键名创建类型定义，避免拼写错误
翻译验证：定期检查所有语言文件的键名是否一致
占位符内容：开发时先用英文，后续统一翻译
路由测试：确保每种语言的路由都能正常访问

🎨 UI/UX 注意事项

文本长度差异：不同语言的文本长度可能差异很大，确保UI能适应
字体支持：确保选择的字体支持所有目标语言的字符
语言标识：在语言切换器中使用清晰的语言标识
阅读方向：考虑从右到左阅读的语言（如阿拉伯语、希伯来语）

⚠️ 常见错误与解决方案

错误：翻译键名不一致

问题：en.json 中有 "header.title"，但 zh.json 中写成了 "header.titel"

解决：使用工具或脚本定期检查所有语言文件的键名一致性

错误：硬编码文本

问题：在组件中直接写 "登录" 而不是使用 t('auth.login')

解决：所有显示给用户的文本都应该通过翻译系统处理

错误：忘记更新语言切换器

问题：添加了新语言文件，但忘记在Header中添加对应的切换选项

解决：建立checklist，确保添加新语言时更新所有相关文件

🌍 国际化配置完成！

恭喜！您已经掌握了HappyShip国际化的核心技能。现在您可以为您的AI网站添加多语言支持，服务全球用户。

📝 第1步

在messages文件夹中添加或修改翻译内容

🌐 第2步

通过routing.ts和Header组件添加新语言支持

✨ 第3步

遵循最佳实践，确保多语言体验专业流畅

🎉 您的AI网站现在可以服务全球用户了！

目录