Traduzir HTML e JavaScript utilizando Weblate CDN¶

Starting with Weblate 4.2 it is possible to export JavaScript and HTML localization to a CDN using CDN de localização JavaScript add-on. To publish translation files without the JavaScript loader, use Translation files CDN.

Nota

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 de localização.

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

Criar componente¶

Primeiro, precisa criar um componente monolingue que manterá as suas cadeias. Veja Adicionar projetos e componentes de tradução para instruções genéricas sobre isso.

Caso tenha um repositório existente para começar (por exemplo, aquele que contém ficheiros HTML), crie um ficheiro JSON vazio no repositório para o idioma de origem (consulte Idioma fonte), por exemplo locales/en.json. O conteúdo deve ser {} para indicar um objeto vazio. Depois de fazer isso, o repositório pode ser importado para o Weblate e pode começar com uma configuração adicional.

Dica

Caso tenha traduções existentes, pode colocá-las nos ficheiros JSON do idioma e esses serão usados no Weblate.

Para aqueles que não querem usar o repositório existente (ou não tem um), escolha Iniciar do zero ao criar o componente e escolher ficheiro JSON como formato de ficheiro (pode escolher qualquer formato monolíngue este ponto).

Configurando extensão de CDN do Weblate¶

A extensão CDN de localização JavaScript fornece algumas opções de configuração.

Limiar de tradução: As traduções traduzidas acima desse limite serão incluídas no CDN.
Seletor de CSS: Configura quais cadeias dos documentos HTML são traduzíveis, veja Extração de cadeias para CDN Weblate e Localização de HTML a usar CDN Weblate.
Nome do cookie do idioma: Nome do cookie que contém o idioma selecionado pelo utilizador. Usado no trecho de JavaScript para Localização de HTML a usar CDN Weblate.
Extrair cadeias de ficheiros de HTML: Lista de ficheiros no repositório ou URLs onde Weblate irá procurar por cadeias traduzíveis e os oferecerá para uma tradução, veja Extração de cadeias para CDN Weblate.

Extração de cadeias para CDN Weblate¶

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.

A configuração predefinida para Seletor CSS extrai elementos com classe CSS l10n. Por exemplo, extrairia duas cadeias 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, também pode usar * como um seletor para processar todos os elementos.

Nota

No momento, apenas o texto dos elementos é extraído. Esta extensão não tem suporte à localização de atributos de elementos ou elementos com filhos.

Localização de HTML a usar CDN Weblate¶

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

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

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

O idioma do utilizador é detetado do cookie configurado e volta aos idiomas preferidos do utilizador configurados no navegador.

O Nome do cookie de idioma pode ser útil para integração com outras aplicações (por exemplo, escolha django_language ao usar Django).

Localização de JavaScript¶

As traduções individuais são expostas como ficheiros JSON bilingues sob o CDN. Para buscar um, 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.

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 de localização for secure server setup.