使用 Weblate CDN 翻譯 HTML 和 JavaScript

Starting with Weblate 4.2 it is possible to export JavaScript and HTML localization to a CDN using JavaScript 在地化 CDN add-on. To publish translation files without the JavaScript loader, use Translation files CDN.

備註

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH. See also 在地化 CDN.

Upon installation into your component the JavaScript localization add-on will push committed translations (see 簡易提交) to the CDN and these can be used in your web pages to localize them.

建立組件中

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

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 中使用。

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

配置 Weblate CDN 附加元件

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

最低翻譯數

在這個閾值之上的翻譯將包含在 CDN 中。

CSS 選擇器

配置來之 HTML 文件的哪些字串是可翻譯的，請參閱 Weblate CDN 的字串提取 和 使用 Weblate CDN 進行 HTML 在地化。

語言 Cookie 名稱

包含使用者所選擇的語言的 cookie 的名稱。在JavaScript 代碼段中用於 使用 Weblate CDN 進行 HTML 在地化。

從 HTML 檔案擷取字串

儲存庫中文件的清單，或 Weblate 尋找可翻譯字串並提供它們用於翻譯的 URLs，請參閱 Weblate CDN 的字串提取。

Weblate CDN 的字串提取

The translation strings have to be present in Weblate. You can either manage these manually, use API to create them or list files or URLs using Extract strings from HTML files and Weblate will extract them automatically. The files have to present in the repository or contain remote URLs which will be download and parsed regularly by Weblate. Remote URLs are restricted by ALLOWED_ASSET_DOMAINS, including any redirect targets.

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 在地化

To localize an HTML document, you need to load the weblate.js script:

<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));

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

Publishing translation files

The Translation files CDN add-on publishes translation files directly to the CDN. It does not generate a JavaScript loader or convert translations into bilingual JSON.

Single-file translations are named using the language code and original file extension, for example cs.json or de.po. Multi-file translations are served below the language code using paths relative to the translation directory. Monolingual components include the source language file, while bilingual components publish only target-language files. See 在地化 CDN for secure server setup.