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.