4.多语言支持

多语言支持指南

配置说明

项目文件里默认启用的模板是 i18n 的,如果你不需要多语言,

  1. 删除 config/site.js 文件 和 pages 文件夹
  2. 使用单语言模板
  • 重命名 config/site-single-lang.js 为 config/site.js
  • 重命名 pages-single-lang 文件夹为 pages

注意重命名后需要检查文件引用,IDE 可能会因为你的重命名更新对应的文件引用,需要检查文件如下

  • next.config.mjs
  • theme.config.jsx
  • next-sitemap.config.js
  • pages/_document.tsx

确保引用的都是 site.js 文件

1. 功能开关

config/site.js 中通过 features.i18n 控制多语言功能:

const SITE_CONFIG = {
  // ...其他配置
  features: {
    i18n: false, // 设置为 false 禁用多语言,true 启用多语言
  },
};

2. 语言配置

config/site.js 中配置支持的语言:

const SUPPORTED_LOCALES = {
  en: {
    name: "English",        // 语言切换器中显示的名称
    localeName: "English",  // 本地化显示名称
    ogLocale: "en_US",     // Open Graph 协议使用的语言代码
    htmlLang: "en",        // HTML lang 属性使用的语言代码
    titleSuffix: "- Game Launch Boost", // 页面标题后缀
    isDefault: true,       // 设置为默认语言
  },
  zh: {
    name: "中文",
    localeName: "简体中文",
    ogLocale: "zh_CN",
    htmlLang: "zh",
    titleSuffix: "- Game Launch Boost",
  },
};

3. 重要说明

  1. 禁用多语言时

    • 设置 features.i18n = false
    • 网站将只使用默认语言(isDefault: true 的语言)
    • URL 不会包含语言前缀
    • 语言切换功能将被禁用
  2. 启用多语言时

    • 设置 features.i18n = true
    • 必须至少有一个语言设置 isDefault: true
    • URL 将包含语言前缀(如 /en//zh/
    • 语言切换功能将被启用
  3. 默认语言设置

    • 每个语言配置中的 isDefault 属性决定默认语言
    • 如果只有一个语言,它会自动成为默认语言
    • 如果有多个语言,必须且只能有一个设置 isDefault: true
  4. 配置文件关联: 修改配置后,需要检查以下文件的引用是否正确:

    • next.config.mjs
    • theme.config.jsx
    • next-sitemap.config.js
    • pages/_document.tsx

添加新语言

1. 配置新语言

config/site.js 中添加新语言配置:

const SUPPORTED_LOCALES = {
  // ... 现有语言配置
 
  // 添加日语支持
  ja: {
    name: "日本語",          // 显示名称
    localeName: "日本語",    // 本地化名称
    ogLocale: "ja_JP",      // Open Graph 语言代码
    htmlLang: "ja",         // HTML 语言代码
    titleSuffix: "- Game Launch Boost",
  },
 
  // 添加韩语支持
  ko: {
    name: "한국어",
    localeName: "한국어",
    ogLocale: "ko_KR",
    htmlLang: "ko",
    titleSuffix: "- Game Launch Boost",
  },
};

2. 创建语言目录

为新语言创建对应的内容目录:

mkdir -p pages/ja    # 创建日语目录
mkdir -p pages/ko    # 创建韩语目录

3. 复制基础文件

  1. 从默认语言复制必要文件:
# 复制首页
cp pages/zh/index.mdx pages/ja/
cp pages/zh/index.mdx pages/ko/
 
# 复制目录结构
cp -r pages/zh/games pages/ja/
cp -r pages/zh/guides pages/ja/
  1. 必须复制的文件:
  • index.mdx (首页)
  • 404.mdx (错误页)
  • _meta.json (导航配置)

4. 翻译内容

  1. 翻译 frontmatter
---
title: ゲームランチブースト    # 翻译标题
description: ゲームの紹介サイト  # 翻译描述
---
  1. 翻译导航配置 (_meta.json):
{
  "index": {
    "title": "ホーム"
  },
  "games": {
    "title": "ゲーム"
  }
}
  1. 翻译页面内容

目录结构

1. 启用多语言时的目录结构

pages/
├── en/                     # 英文内容
│   ├── index.mdx          
│   ├── games/             
│   └── guides/            
└── zh/                     # 中文内容
    ├── index.mdx
    ├── games/
    └── guides/

2. 禁用多语言时的目录结构

pages/
├── index.mdx              # 直接在根目录
├── games/                 # 无需语言子目录
└── guides/

内容管理

1. 禁用多语言时

  • 直接在 pages 目录下创建内容
  • 无需创建语言子目录
  • MDX 文件示例:
---
title: 页面标题
description: 页面描述
---
 
内容...

2. 启用多语言时

  • 在对应语言目录下创建内容
  • 保持相同的目录结构
  • 同步更新所有语言版本

3. 元数据同步规则

// en/games/game-1.mdx
---
title: Street Fighter      # 可以翻译
description: A classic    # 可以翻译
game: https://game.com    # 保持相同
cover: /images/sf.jpg     # 保持相同
---
 
// zh/games/game-1.mdx
---
title: 街霸              # 已翻译
description: 经典游戏    # 已翻译
game: https://game.com   # 与英文相同
cover: /images/sf.jpg    # 与英文相同
---

注意事项

  1. 切换多语言状态

    • 切换多语言状态需要同时调整目录结构
    • 禁用多语言时,需要选择一个语言版本作为主要内容
    • 确保所有页面路由正确更新
  2. URL 生成

    • 禁用多语言时,sitemap 和链接不会包含语言前缀
    • 启用多语言时,自动为所有页面生成带语言前缀的 URL
  3. 性能考虑

    • 如果只需要单一语言,建议禁用多语言功能
    • 可以减少不必要的路由处理和文件加载
  4. SEO 优化

    • 禁用多语言时,确保 <html lang=""> 属性正确设置
    • 启用多语言时,确保每个页面都有正确的 hreflang 标签