使用 Weblate CDN 翻譯 HTML 和 JavaScript¶

從 Weblate 4.2 開始能夠使用 JavaScript 在地化 CDN 附加元件將 JavaScript 和 HTML 在地化匯出到 CDN。要在沒有 JavaScript 載入器情況下發佈翻譯檔案，使用翻譯檔案 CDN。

備註

此功能在 Hosted Weblate 上是設定好的。它需要在安裝時進行額外的設定，見 LOCALIZE_CDN_URL 和 LOCALIZE_CDN_PATH。另見在地化 CDN。

安裝到您的元件時，JavaScript 在地化附加元件會將已提交的翻譯（請參閱惰性提交）推送到 CDN，這些翻譯可以在您的網頁中用於在地化。

建立元件中¶

首先您需要新增單語言元件，它將保持您的字串，其一般說明請參閱新增翻譯專案和元件。

在您已有儲存庫來開始的情況下（例如一個包含 HTML 檔案的儲存庫），在儲存庫中為來源語言建立空的 JSON 檔案（請參閱來源語言），例如 locales/en.json。內容應該是 {}，來說明空的物件。一旦具有了它，儲存庫就可以匯入到 Weblate 中，而您可以透過設定附加元件來開始。

提示

在您已有翻譯的情況下，您可以將其放置在語言 JSON 檔案中，而那些將在 Weblate 中使用。

對於那些不想要使用（或不具有）現有儲存庫的人，當新增元件時選擇 Start from scratch，並選擇 JSON file 作為檔案格式（這是選擇任何單語言格式都可以）。

設定 Weblate CDN 附加元件¶

JavaScript 在地化 CDN 附加元件提供少量設定選項。

最低翻譯數: 在這個閾值之上的翻譯將包含在 CDN 中。
CSS 選擇器: 設定 HTML 文件中的哪些字串是可翻譯的，請參閱 Weblate CDN 的字串提取和使用 Weblate CDN 進行 HTML 在地化。
語言 Cookie 名稱: 包含使用者所選擇的語言的 cookie 的名稱。在JavaScript 代碼段中用於使用 Weblate CDN 進行 HTML 在地化。
從 HTML 檔案擷取字串: 儲存庫中檔案的清單，或 Weblate 尋找可翻譯字串並提供它們用於翻譯的 URLs，請參閱 Weblate CDN 的字串提取。

Weblate CDN 的字串提取¶

翻譯字串必須在 Weblate 中出現。您可以手動管理這些字串，使用 API 來建立它們，或者使用從 HTML 檔案中提取字串列出檔案或 URL，Weblate 將自動提取這些字串。這些檔案必須出現在儲存庫中，或者包含 Weblate 將定期下載和解析的遠端 URL。遠端 URL 受 ALLOWED_ASSET_DOMAINS 的限制，包括任何重定向目標。

CSS selector 的預設設定提取 CSS class l10n 的元素，例如從後面的一段中提取兩個字串：

<section class="content">
    <div class="row">
        <div class="wrap">
            <h1 class="section-title min-m l10n">Maintenance in progress</h1>
            <div class="page-desc">
                <p class="l10n">We're sorry, but this site is currently down for maintenance.</p>
            </div>
        </div>
    </div>
</section>

在不想修改現有代碼的情況下，還可以使用 * 作為選擇器處理所有元素。

備註

現在只有元素的文字被提取。這個附加元件不支援元素屬性或具有子類別的元素的在地化。

使用 Weblate CDN 進行 HTML 在地化¶

要在地化 HTML 檔案，需要載入 weblate.js 指令碼：

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

載入時，會自動發現所有相符的翻譯元素（基於 CSS selector），並用翻譯替換其文字。

從設定的 cookie 檢測到使用者語言，並退回到在瀏覽器中設定的使用者首選語言。

Language cookie name 可以用於與其它應用整合（例如當使用 Django 時選擇 django_language）。

JavaScript 在地化¶

單獨的翻譯在內容分發網路下揭露為雙語言 JSON 檔案。要取得一個，您可以使用以下代碼:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

在這種情況下需要採用實際的在地化邏輯。

釋出翻譯檔案¶

翻譯檔案 CDN 附加元件會將翻譯檔案直接發佈至 CDN。它不會產生 JavaScript 載入器，也不會將翻譯轉換為雙語 JSON。

單一檔案翻譯會以語言代碼及原始副檔名命名，例如 cs.json 或 de.po。多檔案翻譯則會依翻譯目錄的相對路徑，放在語言代碼下方提供。單語元件包含來源語言檔案，雙語元件則只發佈目標語言檔案。安全的伺服器設定請參閱在地化 CDN。