Topics

有一天，总裁给我下达了命令：“让我们把网站做成多语言的。显然，谷歌云翻译API可以在构建过程中自动翻译！”

我们的网站是一个使用 Astro 构建的静态网站 (SSG)。我在研究 Google Cloud Translation API 时，决定尝试将其集成到我们的网站上。

准备工作：启用 API 密钥并创建服务帐户

启用云翻译 API

Google Cloud Console“API 和服务” > “云翻译 API”使能够

创建服务帐户和密钥

要使用 API，请创建服务帐户并下载 JSON 密钥。

此 JSON 密钥包含您的私钥，绝对不能公开。

授予服务帐户访问权限。

转到 IAM，将服务帐户的电子邮件地址添加为主体，并将角色添加为“云翻译 API 用户”。

如何生成多语言页面

我尝试的第一种方法是“复制 Astro 文件，立即调用翻译 API，并自动生成多语言 Astro 文件”。

虽然页面已经生成，但我们遇到了几个问题，例如代码围栏损坏、与导入的组件不兼容以及在属性中编写标签时出现问题，因此我们改变了方法。

最终，我选择了一个简单的构建后处理流程，该流程对构建后生成的静态 HTML 执行翻译。

语言设置与 Astro 的 i18n 配置文件相关联。

为了管理网站的多语言结构，我使用了原始的 Astro i18n 配置文件（LOCALES_SETTING）被用作翻译脚本的“配置文件”。

要添加语言，只需在此处添加即可。

export const LOCALES_SETTING: LocaleSetting = {
  ja: {
    label: '日本語',
    lang: 'ja',
    oglocale: 'ja_JP',
    path: 'ja',
  },
  en: {
    label: 'English',
    lang: 'en',
    oglocale: 'en_US',
    path: 'en',
  },
  de: {
    label: 'Deutsch',
    lang: 'de',
    oglocale: 'de_DE',
    path: 'de',
  },
  es: {
    label: 'Español',
    lang: 'es',
    oglocale: 'es_ES',
    path: 'es',
  },
  cn: {
    label: '简体中文',
    lang: 'zh-CN',
    oglocale: 'zh_CN',
    path: 'zh-cn',
  },
  tw: {
    label: '繁體中文',
    lang: 'zh-TW',
    oglocale: 'zh_TW',
    path: 'zh-tw',
  },
};

语言切换实现

语言选择下拉菜单也是根据 i18n 配置文件生成的。标签将是所选项目的名称，因此我们不希望翻译它。所以，我们添加了一个流程，用标签值覆盖它。（translate="no" 与云翻译 API 不兼容。）

顺便说一下，有人建议我“在下拉菜单里添加国旗”，我也尝试这么做了，但似乎用国旗来切换语言是一种反模式。例如，如果一个讲德语的用户同时也是奥地利用户，他们可能会对德国国旗感到困惑，所以国家和语言并不一定匹配。你这么一说，确实如此。在某些情况下，这可能是一个敏感问题。

缓存以减少 API 使用量。

至此，多语言文本生成机制已基本完成。然而，问题在于成本。

通过反复试验和不断构建，API 使用费很快就超过了 10,000 日元。

因此，在构建时，API 处理的日语和翻译的组合会被缓存。translate-cache.json数据将保存到一个文件中，下次构建将使用此 JSON 文件。规范已更改，现在仅通过 API 调用缺失的数据，并将结果追加到 JSON 文件中。

它将以这种方式保存。

{
  "en:UIデザイン": "UI Design",
  "en:私たちについて": "About Us",
  "en:サービス": "Service",
  ...
}

这大大降低了成本！根据更新频率，运行成本每月只需几百日元。

操作说明

当使用内容管理系统 (CMS) 添加文章并通过部署钩子进行构建时，服务器只能访问 Git 上的旧缓存文件。因此，我们决定严格执行一条规则：每次添加内容时都先在本地构建，然后将更新后的缓存文件推送到 Git。

控制错误翻译

正如机器翻译的常态，偶尔会出现一些奇怪的翻译。
专有名词的拼写存在明显的差异，例如公司名称“Liberogic”有时被写成“Liberlogic”，有时被写成“Liberogic”，公司实体（有限公司、有限公司等）的拼写也不一致。

云翻译 API 具有词汇表功能，但它仅作为机器翻译的辅助工具，无法提供完整、详细的控制。除了上传 CSV 文件外，每次还需要运行命令来重新创建资源，这对于不熟悉 Web 的运维人员来说可能比较困难。

通过电子表格集成实现可靠控制

因此，我们将语言和拼写错误汇总到一个电子表格中，在构建过程中以 CSV 格式检索该电子表格，并执行文本替换过程，以便可以覆盖和更正标记。

这意味着管理员只需更新电子表格，即可在一定程度上控制翻译，而无需修改任何代码。

概括

经过多次尝试，我最终利用谷歌云翻译API创建了一个比预期更实用的自动翻译系统。我认为它足以满足简单、经济的多语言翻译需求！

（总统表示他想在RTL电视台增加阿拉伯语支持，但这将是一个大工程。）