Translating HTML and JavaScript using Weblate CDN¶
Starting with Weblate 4.2 it is posible to export localization to a CDN using CDN de localização JavaScript addon.
Nota
This feature is configured on Hosted Weblate. It requires additional
configuration on your installation, see LOCALIZE_CDN_URL
and
LOCALIZE_CDN_PATH
.
Upon installation into your component it will push committed translations (see Lazy commits) to the CDN and these can be used in your web pages to localize them.
Creating component¶
First, you need to create a monolingual component which will hold your strings, see Adding translation projects and components for generic instructions on that.
In case you have existing repository to start with (for example the one
containing HTML files), create an empty JSON file in the repository for the
source language (see Idioma fonte), for example
locales/en.json
. The content should be {}
to indicate an empty
object. Once you have that, the repository can be imported into Weblate and you
can start with an addon configuration.
Dica
In case you have existing translations, you can place them into the language JSON files and those will be used in Weblate.
For those who do not want to use existing repository (or do not have one), choose Start from scratch when creating component and choose JSON file as a file format (it is okay to choose any monolingual format at this point).
Configuring Weblate CDN addon¶
The CDN de localização JavaScript addon provides few configuration options.
- Limiar de tradução
Translations translated above this threshold will be included in the CDN.
- Seletor de CSS
Configures which strings from the HTML documents are translatable, see String extraction for Weblate CDN and HTML localization using Weblate CDN.
- Nome do cookie do idioma
Name of cookie which contains user selected language. Used in the JavaScript snippet for HTML localization using Weblate CDN.
- Extrair cadeias de ficheiros de HTML
List of files in the repository or URLs where Weblate will look for translatable strings and offer them for a translation, see String extraction for Weblate CDN.
String extraction for Weblate CDN¶
As cadeias de tradução devem estar presentes no Weblate. Pode gerí-los manualmente, usar API para criá-los ou listar ficheiros ou URLs usando 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. Este complemento não suporta a localização de atributos de elementos ou elementos com filhos.
HTML localization using Weblate CDN¶
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á seu texto por uma tradução.
The user language is detected from the configured cookie and falls back to user preferred languages configured in the browser.
The Language cookie name can be useful for integration with other
applications (for example choose django_language
when using Django).
Localização de JavaScript¶
The individual translations are exposed as bilingual JSON files under the CDN. To fetch one you can use following code:
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.