Traduzindo HTML e JavaScript usando CDN do Weblate

A partir do Weblate 4.2, é possível exportar a localização para um CDN usando a extensão CDN de localização do JavaScript.

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.

Após a instalação em seu componente, ele enviará as traduções confirmadas (veja Commits adiados) para o CDN e elas podem ser usadas em suas páginas da web para localizá-las.

Criando componente

Primeiro, você precisa criar um componente monolíngue que manterá seus textos. Veja add-projects para instruções genéricas sobre isso.

Caso você tenha um repositório existente para começar (por exemplo, aquele que contém arquivos HTML), crie um arquivo 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 você pode começar com uma configuração adicional.

Dica

Caso você tenha traduções existentes, você pode colocá-las nos arquivos JSON de 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 arquivo JSON como formato de arquivo (pode escolher qualquer formato monolíngue este ponto).

Configurando extensão de CDN do Weblate

A extensão CDN de localização do 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 CSS

Configura quais textos dos documentos HTML são traduzíveis, veja Extração de texto para o CDN do Weblate e Localização de HTML usando CDN do Weblate.

Nome do cookie de idioma

Nome do cookie que contém o idioma selecionado pelo usuário. Usado no trecho de JavaScript para Localização de HTML usando CDN do Weblate.

Extrair textos de arquivos HTML

Lista de arquivos no repositório ou URLs onde Weblate irá procurar por textos traduzíveis e os oferecerá para uma tradução, veja 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. Esta extensão não tem suporte à 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.

O Nome do cookie de idioma pode ser útil para integração com outros aplicativos (por exemplo, escolha django_language ao usar 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.