HTML en JavaScript vertalken met Weblate CDN¶

Starting with Weblate 4.2 it is possible to export JavaScript and HTML localization to a CDN using JavaScript-vertaling CDN add-on. To publish translation files without the JavaScript loader, use Translation files CDN.

Notitie

This feature is configured on Hosted Weblate. It requires additional configuration on your installation, see LOCALIZE_CDN_URL and LOCALIZE_CDN_PATH. See also Vertaling CDN.

Upon installation into your component the JavaScript localization add-on will push committed translations (see Vertraagd indienen) to the CDN and these can be used in your web pages to localize them.

Onderdeel aanmaken¶

Als eerste moet u een eentalig onderdeel maken dat uw tekenreeksen zal bevatten, bekijk Vertaalprojecten en onderdelen toevoegen voor algemene instructies daarvoor.

In het geval u een bestaande opslagruimte heeft om mee te beginnen (bijvoorbeeld die welke de HTML-bestanden bevat), maak dan een leeg JSON-bestand in de opslagruimte voor de brontaal (bekijk Brontaal), bijvoorbeeld locales/en.json. De inhoud zou {} moeten zijn om een leeg object aan te geven. Als u dat eenmaal hebt kan de opslagruimte worden geïmporteerd in Weblate en kunt u beginnen met de configuratie van een add-on.

Hint

In het geval u bestaande vertalingen hebt, kunt u die plaatsen in de taal-JSON-bestanden en die zullen worden gebruikt in Weblate.

Voor hen die geen bestaande opslagruimte willen gebruiken (of die niet hebben), kies Vanaf nul beginnen bij het maken van een onderdeel en kies JSON-bestand als een bestandsindeling (het is oké om op dit punt elke eentalige indeling te kiezen).

Weblate CDN add-on configureren¶

De add-on JavaScript-vertaling CDN verschaft een paar opties voor de configuratie.

Drempelwaarde vertaling: Vertalingen die boven deze drempel zijn vertaald zullen worden opgenomen in de CDN.
CSS-selectie: Configureert welke tekenreeksen uit de HTML-documenten te vertalen zijn, bekijk Tekenreeks uitnemen voor Weblate CDN en HTML vertalen met Weblate CDN.
Naam van taalcookie: Naam van het cookie dat de door de gebruiker geselecteerde taal bevat. Gebruikt in de snipper voor JavaScript voor HTML vertalen met Weblate CDN.
Tekenreeksen uitnemen uit HTML-bestanden: Lijst met bestanden in de opslagruimte of URL’s waar Weblate zal zoeken naar vertaalbare tekenreeksen en ze aanbiedt voor een vertaling, bekijk Tekenreeks uitnemen voor Weblate CDN.

Tekenreeks uitnemen voor Weblate CDN¶

De tekenreeksen voor de vertaling moeten aanwezig zijn in Weblate. U kunt ze ofwel handmatig beheren, de API gebruiken om ze te maken of bestanden in lijsten zetten of URL’s met Tekenreeksen uitnemen uit HTML-bestanden en Weblate zal ze automatisch uitnemen. De bestanden moeten aanwezig zijn in de opslagruimte of URL’s op afstand bevatten die regelmatig zullen worden gedownload en geparset door Weblate. URL’s op afstand zijn beperkt door ALLOWED_ASSET_DOMAINS, inclusief eventuele doelen voor verwijzing.

De standaard configuratie voor CSS selecteren neemt elementen uit met de CSS-klasse l10n, het zou bijvoorbeeld twee tekenreeksen uitnemen uit de volgende snippers:

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

In het geval dat u geen bestaande code wilt aanpassen, kunt u ook * gebruiken als selectie om alle elementen te verwerken.

Notitie

Momenteel wordt alleen de tekst van de elementen uitgenomen. Deze add-on verschaft geen ondersteuning voor vertalen van attributen van elementen of elementen met kinderen.

HTML vertalen met Weblate CDN¶

To localize an HTML document, you need to load the weblate.js script:

<script src="https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/weblate.js" async></script>

Bij het laden zal dit automatisch alle overeenkomende vertaalbare elementen zoeken (gebaseerd op de configuratie van CSS selecteren) en hun tekst door een vertaling vervangen.

De gebruikerstaal wordt gedetecteerd uit het geconfigureerde cookie en valt terug op de door de gebruiker gedefinieerde voorkeurstalen die zijn geconfigureerd in de browser.

De Naam taalcookie kan nuttig zijn voor het integreren met andere toepassingen (kies bijvoorbeeld django_language bij het gebruiken van).

JavaScript vertalen¶

De individuele vertalingen worden weergegeven als tweetalige JSON-bestanden onder de CDN. U kunt de volgende code gebruiken om er een op te halen:

fetch(("https://weblate-cdn.com/a5ba5dc29f39498aa734528a54b50d0a/cs.json")
  .then(response => response.json())
  .then(data => console.log(data));

De feitelijke logica voor de vertaling moet in dit geval worden geïmplementeerd.

Publishing translation files¶

The Translation files CDN add-on publishes translation files directly to the CDN. It does not generate a JavaScript loader or convert translations into bilingual JSON.

Single-file translations are named using the language code and original file extension, for example cs.json or de.po. Multi-file translations are served below the language code using paths relative to the translation directory. Monolingual components include the source language file, while bilingual components publish only target-language files. See Vertaling CDN for secure server setup.