用 Google 翻译 API 实现 Astro SSG 网站多语言化

某天，社长下达了指令：“我们的网站要做多语言化吧。听说有个叫 Google Cloud Translation API 的工具，能在构建时自动翻译！”

本公司网站采用 Astro 构建，是静态网站（SSG）。我们一边研究 Google Cloud Translation API，一边尝试实现。

事前准备：启用 API 密钥并创建服务账号

启用 Cloud Translation API

在 Google Cloud Console 中，启用 “API 和服务”中的“Cloud Translation API”。

创建服务账号与密钥

为了使用 API，需要创建服务账号并下载 JSON 密钥。

此 JSON 键包含私钥，请务必注意不要公开。

为服务账号授予访问权限

前往 IAM，在主账号中添加服务账号的电子邮件地址，角色选择“Cloud Translation API 用户”。

如何生成多语言页面

最初尝试的方法是：复制 Astro 文件，直接调用翻译 API，自动生成多语言的 Astro 文件。

虽然页面能够生成，但代码围栏部分会损坏，引入的组件无法处理，属性内包含标签时也会出错，多个问题导致效果不佳，因此改变了方针。

最终采用了简单的 postbuild 处理方式：对构建后生成的静态 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 配置文件生成。由于 label 会作为选项名称显示，我不希望它被翻译，因此添加了用 label 值覆盖的处理。（原来 translate="no" 对 Cloud Translation 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」或「Libelogic」，公司法律形式的写法（Inc.、Ltd. 等）也没有统一，专有名词的表记不一致问题十分明显。

Cloud Translation API 虽然有术语表功能，但它只是辅助机器翻译，无法完全精细地控制译文。而且除了上传 CSV 之外，每次还需要执行命令重新创建资源，对于不熟悉网页技术的运营人员来说难度较大。

通过电子表格联动实现可靠的控制

于是，我们把语言和正确的译法整理到电子表格中，在构建时以 CSV 格式获取该表格，并通过文本替换处理，将译文覆盖修正为正确的表记。

这样一来，运营人员只需更新电子表格，无需改动代码，就能在一定程度上控制翻译结果。

总结

Google Cloud Translation API 的自动翻译经过反复尝试，最终做成了比预期更实用的机制。我认为它在控制成本的同时，作为简易的多语言化方案已经足够好了！

（社长说还想支持从右到左书写的阿拉伯语，但这恐怕是个大工程啊）