使用 Weblate CDN 翻譯 HTML 和 JavaScript¶

從 Weblate 4.2 開始能夠使用 JavaScript 在地化 CDN 外掛將在地化匯出到 CDN。

備註

此功能在託管的Weblate上組態。它需要在安裝時進行額外的組態，見 LOCALIZE_CDN_URL 和 LOCALIZE_CDN_PATH。

在安裝到您的元件中時，它將送交的翻譯推送到 CND（請參見簡易送交），而這些可以在您的 web 頁面上使用來將其在地化。

Creating component¶

首先您需要新建單語言元件，它將保持您的字串，其一般指示請參見新增翻譯項目和組件。

In case you have existing repository to start with (for example the one containing HTML files), create an empty JSON file in the repository for the source language (see 來源語言), for example locales/en.json. The content should be {} to indicate an empty object. Once you have that, the repository can be imported into Weblate and you can start with an add-on configuration.

提示

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

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

Configuring Weblate CDN add-on¶

The JavaScript 在地化 CDN add-on provides few configuration options.

最低翻譯數: 在這個閾值之上的翻譯將包含在 CDN 中。
CSS 選擇器: 組態來之 HTML 文件的哪些字串是可翻譯的，請參見 String extraction for Weblate CDN 和 HTML localization using Weblate CDN。
語言 Cookie 名稱: 包含使用者所選擇的語言的 cookie 的名稱。在JavaScript 代碼段中用於 HTML localization using Weblate CDN。
從 HTML 檔案擷取字串: 倉儲中文件的列表，或 Weblate 尋找可翻譯字串並提供它們用於翻譯的 URLs，請參見 String extraction for Weblate CDN。

String extraction for Weblate CDN¶

翻譯字串必須在 Weblate 中出現。可以手動管理，使用 API 來建立，或使用 Extract strings from HTML files 列出文件或 URL，Weblate 會自動提取它們。文件必須出現在殘酷中，或者包含遠端 URL，由 Weblate下載並規則地分析。

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>

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

備註

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

HTML localization using Weblate CDN¶

為了將 HTML 文件在地化，需要載入 weblate.js 指令稿：

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

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

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

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

JavaScript localization¶

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

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

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