Översättning av HTML och JavaScript med Weblate CDN

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

Observera

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

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

Skapar komponent

Först måste du skapa en enspråkig komponent som kommer att innehålla dina strängar. Se Lägga till översättningsprojekt och komponenter för allmänna instruktioner om detta.

Om du redan har ett befintligt arkiv att utgå ifrån (till exempel det som innehåller HTML-filer), skapa en tom JSON-fil i arkivet för källspråket (se Källspråk), till exempel locales/en.json. Innehållet ska vara {} för att ange ett tomt objekt. När du har gjort det kan arkivet importeras till Weblate och du kan börja med en tilläggskonfiguration.

Råd

Om du har befintliga översättningar kan du placera dem i språk-JSON-filerna så kommer de att användas i Weblate.

För dem som inte vill använda ett befintligt arkiv (eller inte har något) väljer man Start from scratch när man skapar komponenten och väljer JSON file som filformat (det går bra att välja vilket enspråkigt format som helst i detta skede).

Konfigurera Weblate CDN-tillägg

Tillägget JavaScript-lokalisering CDN erbjuder några få konfigurationsalternativ.

Översättningströskel

Översättningar som översätts över denna tröskel kommer att inkluderas i CDN.

CSS-väljare

Konfigurerar vilka strängar från HTML-dokumenten som är översättningsbara, se Strängutdragning för Weblate CDN och HTML-lokalisering med Weblate CDN.

Namn på språkcookie

Namn på cookie som innehåller det språk som användaren valt. Används i JavaScript-snippet för HTML-lokalisering med Weblate CDN.

Extrahera strängar från HTML-filer

Lista över filer i arkivet eller URL:er där Weblate kommer att söka efter översättningsbara strängar och erbjuda dem för översättning, se Strängutdragning för Weblate CDN.

Strängutdragning för Weblate CDN

The translation strings have to be present in Weblate. You can either manage these manually, use API to create them or list files or URLs using Extract strings from HTML files and Weblate will extract them automatically. The files have to present in the repository or contain remote URLs which will be download and parsed regularly by Weblate. Remote URLs are restricted by ALLOWED_ASSET_DOMAINS, including any redirect targets.

Standardkonfigurationen för CSS-selektor extraherar element med CSS-klassen l10n, till exempel skulle den extrahera två strängar från följande kodsnuttar:

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

Om du inte vill ändra befintlig kod kan du också använda * som selektor för att bearbeta alla element.

Observera

Just nu extraheras endast elementens text. Detta tillägg stöder inte lokalisering av elementattribut eller element med underordnade element.

HTML-lokalisering med 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>

Vid inläsning hittar detta automatiskt alla matchande översättningsbara element (baserat på CSS-selektorkonfiguration) och ersätter deras text med en översättning.

Användarens språk identifieras från den konfigurerade cookien och faller tillbaka till användarens önskade språk som konfigurerats i webbläsaren.

Språkkookienamn kan vara användbart för integration med andra applikationer (välj till exempel django_language när du använder Django).

Lokalisering för JavaScript

De enskilda översättningarna visas som tvåspråkiga JSON-filer under CDN. För att hämta en kan du använda följande kod:

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

I detta fall måste den faktiska lokaliseringslogiken implementeras.

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 Lokalisering CDN for secure server setup.