Traduzir HTML e JavaScript a usar CDN Weblate

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

Nota

Este recurso é configurado no Hosted Weblate. Requer configuração adicional na sua instalação, veja LOCALIZE_CDN_URL e LOCALIZE_CDN_PATH.

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

Criar componente

Primeiro, precisa criar um componente monolingue que manterá as suas cadeias. Veja add-projects 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

As cadeias de tradução devem estar presentes no Weblate. Pode gerí-los manualmente, usar API para criá-los ou listar ficheiros ou URLs a usar Extrair cadeias de ficheiros HTML e o Weblate irá extraí-los automaticamente. Os ficheiros devem apresentar no repositório ou conter URLs remotas que serão descarregadas e analisadas regularmente pelo Weblate.

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

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

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