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電視台增加阿拉伯語支持，但這將是一個大工程。）