使用 Crowdin 翻译和本地化 VitePress

[ocoke]

VitePress 是一个由 Vite 和 Vue 驱动的静态站点生成器。当我开始构建多语言文档网站时，我意识到这并不是一件容易的事。CranSurvey 的主要项目是使用 Crowdin 翻译 i18n 文件。那么，在 VitePress 网站上使用它怎么样？如何使用呢？
[desc_end]
VitePress 是一个由 Vite 和 Vue 驱动的静态站点生成器。我在项目的几个文档站点中使用了它，例如 CranSurvey、Detalk.js。

最近，我一直在考虑翻译文档，因为 CranSurvey 是一个支持多种语言的项目。

当我开始构建多语言文档网站时，我意识到这并不是一件容易的事。CranSurvey 的主要项目是使用 Crowdin 翻译 i18n 文件。在 VitePress 网站上使用它怎么样？

连接项目

首先，我们需要创建一个 Crowdin 帐户。这是免费的（我有 GitHub 学生包）。

然后，我们需要在 Crowdin 中创建一个项目。

选择您喜欢的项目名称，将其设为公开或私有，然后选择源语言和目标语言。

创建项目后，我们需要单击选项 Integrations 卡以与我们的 GitHub 存储库集成。

然后我们单击 Add Repository 并选择 source and translation files mode. 选择您帐户中要链接的存储库和分支。

Crowdin 可能会说有一个问题需要修复，我们应该单击它并开始我们的分支配置。

分支配置

此配置根据您的项目而有所不同。如果您有像我这样的项目，主文件夹中具有默认语言，并且使用带下划线的区域设置字符串命名的单独文件夹中具有其他语言，则可以具有相同的配置。

我还忽略了一些项目文件，例如 package.json、yarn.lock 和 `.vitepress 文件夹。

现在，我们已经配置了分支。还可以看到文件中的配置 crowdin.yml：

files:
  - source: /**/**.md
    ignore:
      - /%locale_with_underscore%
      - /.vitepress/
      - yarn.lock
      - package.json
      - .gitignore
    translation: /%locale_with_underscore%/%original_path%/%original_file_name%

翻译文件

然后，我们可以回到仪表板。如果您已经配置了机器翻译 API 密钥，则可以进行预翻译。

单击 via MT，选择所需的提供商，选择所有目标语言和源，然后单击 pre-translation via MT。

预翻译后，您可以转到编辑器进行翻译，也可以返回 GitHub 存储库并合并拉取请求。

现在，我们有了翻译文件。

VitePress 配置

转到 .vitepress/config.mts（或其他格式）并配置站点配置。

export default defineConfig({
  // ...
  locales: {
    root: {
      label: 'English (US)',
      lang: 'en_US',
    },
    zh_CN: {
      label: '中文(简体)',
      lang: 'zh_CN',
      link: '/zh_CN/',
    },
    zh_TW: {
      label: '中文(繁體)',
      lang: 'zh_TW',
      link: '/zh_TW/',
    },
    // ... other languages
  },
  // ..
})

现在我们已经完成了，您可以访问您的网站并进行检查。