Translating HTML and JavaScript using Weblate CDN

Starting with Weblate 4.2 it is possible to export localization to a CDN using JavaScript 現地語化 CDN addon.

注釈

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH.

Upon installation into your component it will push committed translations (see Lazy commits) to the CDN and these can be used in your web pages to localize them.

コンポーネントの作成

First, you need to create a monolingual component which will hold your strings, see Adding translation projects and components for generic instructions on that.

(例: HTML ファイルを含むファイル)で始まる既存のリポジトリがある場合、リポジトリ内に原文の言語(参照: 原文の言語 )用の空の JSON ファイルを作成します。内容は空のオブジェクトを示す {} であるべきです。それができたら、リポジトリを Weblate にインポートして、アドオン設定から開始できます。

ヒント

In case you have existing translations, you can place them into the language JSON files and those will be used in Weblate.

For those who do not want to use existing repository (or do not have one), choose Start from scratch when creating component and choose JSON file as a file format (it is okay to choose any monolingual format at this point).

Weblate CDN アドオンの設定

The JavaScript 現地語化 CDN addon provides few configuration options.

翻訳目標のしきい値

Translations translated above this threshold will be included in the CDN.

CSS セレクタ

Configures which strings from the HTML documents are translatable, see Weblate CDN の文字列抽出 and Weblate CDN を使用した HTML の現地化.

言語 Cookie 名

Name of cookie which contains user selected language. Used in the JavaScript snippet for Weblate CDN を使用した HTML の現地化.

HTMLファイルから文字列を抽出

List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see 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.

The default configuration for CSS selector extracts elements with CSS class l10n, for example it would extract two strings from following snippets:

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

In case you don't want to modify existing code, you can also use * as a selector to process all elements.

注釈

Right now, only text of the elements is extracted. This addon doesn't support localization of element attributes or elements with childs.

Weblate CDN を使用した HTML の現地化

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

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

Upon loading, this will automatically find all matching translatable elements (based on CSS selector configuration) and replace their text with a translation.

The user language is detected from the configured cookie and falls back to user preferred languages configured in the browser.

The Language cookie name can be useful for integration with other applications (for example choose django_language when using Django).

JavaScript の現地語化

The individual translations are exposed as bilingual JSON files under the CDN. To fetch one you can use following code:

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

The actual localization logic needs to be implemented in this case.