Traducir HTML y JavaScript mediante la CDN de Weblate¶

Starting with Weblate 4.2 it is possible to export localization to a CDN using CDN de regionalización de JavaScript add-on.

Nota

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 Consignas diferidas) to the CDN and these can be used in your web pages to localize them.

Creación del componente¶

First, you need to create a monolingual component which will hold your strings, see Añadir proyectos y componentes de traducción for generic instructions on that.

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 Idioma del código fuente), 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.

Consejo

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

Para aquellos que no desean utilizar un repositorio existente (o no tienen uno), elijan Comenzar desde cero al crear el componente y elijan Archivo JSON como formato de archivo (está bien elegir cualquier formato monolingüe en este punto).

Configuring Weblate CDN add-on¶

The CDN de regionalización de JavaScript add-on provides few configuration options.

Umbral de traducción: Translations translated above this threshold will be included in the CDN.
Selector de CSS: Configures which strings from the HTML documents are translatable, see Extracción de cadenas para la CDN de Weblate and Traducción de HTML mediante la CDN de Weblate.
Nombre de la «cookie» de idioma: Name of cookie which contains user selected language. Used in the JavaScript snippet for Traducción de HTML mediante la CDN de Weblate.
Extraer cadenas desde archivos HTML: List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see Extracción de cadenas para la CDN de Weblate.

Extracción de cadenas para la CDN de Weblate¶

Las cadenas de traducción deben estar presentes en Weblate . Puede administrarlas manualmente, usar la API para crearlas o enumerar archivos o URL mediante Extraer cadenas de archivos HTML y Weblate las extraerá automáticamente. Los archivos deben estar presentes en el repositorio o contener URL remotas que Weblate descargará y analizará periódicamente .

La configuración predeterminada para selector CSS extrae elementos con la clase CSS l10n, por ejemplo, extraería dos cadenas de los siguientes fragmentos:

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

Nota

Right now, only text of the elements is extracted. This add-on doesn’t support localization of element attributes or elements with children.

Traducción de HTML mediante la CDN de Weblate¶

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

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

Al cargar, encontrará automáticamente todos los elementos traducibles que coincidan (basándose en la configuración de selector CSS) y sustituirá su texto por una traducción.

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

El Nombre de la cookie de idioma puede ser útil para la integración con otras aplicaciones (por ejemplo, elija django_language al usar Django ).

Regionalización de 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));

En este caso, hace falta implementar la lógica de regionalización.