Traduzindo HTML e JavaScript usando CDN do Weblate

Starting with Weblate 4.2 it is possible to export localization to a CDN using CDN de localização JavaScript addon.

Nota

Este recurso está configurado no Hosted Weblate. Ela requer configuração adicional em sua instalação, veja LOCALIZE_CDN_URL e LOCALIZE_CDN_PATH.

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

Criando componente

First, you need to create a monolingual component which will hold your strings, see Adicionando projetos e componentes de tradução 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 fonte), 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 addon configuration.

Dica

Caso você tenha traduções existentes, você pode colocá-las nos arquivos JSON de idioma e esses serão usados no 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).

Configurando extensão de CDN do Weblate

The CDN de localização JavaScript addon provides few configuration options.

Limiar de tradução

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

Seletor CSS

Configures which strings from the HTML documents are translatable, see Extração de texto para o CDN do Weblate and Localização de HTML usando CDN do Weblate.

Nome do cookie de idioma

Name of cookie which contains user selected language. Used in the JavaScript snippet for Localização de HTML usando CDN do Weblate.

Extrair textos de arquivos HTML

List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see Extração de texto para o CDN do Weblate.

Extração de texto para o CDN do Weblate

Os textos de tradução devem estar presentes no Weblate. Você pode gerenciá-los manualmente, usar API para criá-los ou listar arquivos ou URLs usando Extrair textos de arquivos HTML e o Weblate irá extraí-los automaticamente. Os arquivos devem apresentar no repositório ou conter URLs remotas que serão baixadas e analisadas regularmente pelo Weblate.

A configuração padrão para Seletor CSS extrai elementos com classe CSS l10n. Por exemplo, extrairia dois textos dos seguintes trechos:

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

Caso não deseje modificar o código existente, você também pode usar * como um seletor para processar todos os elementos.

Nota

No momento, apenas o texto dos elementos é extraído. Este complemento não suporta a localização de atributos de elementos ou elementos com filhos.

Localização de HTML usando CDN do Weblate

Para localizar um documento HTML, você precisa carregar o script weblate.js:

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

Ao carregar, isso encontrará automaticamente todos os elementos traduzíveis correspondentes (com base na configuração Seletor CSS ) e substituirá seu texto por uma tradução.

O idioma do usuário é detectado a partir do cookie configurado e, como reserva, recorre aos idiomas preferidos do usuário configurados no navegador.

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

Localização de JavaScript

As traduções individuais são expostas como arquivos JSON bilíngues sob o CDN. Para buscar um, você pode usar o seguinte código:

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

A lógica de localização real precisa ser implementada neste caso.