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.