Översättning av HTML och JavaScript med Weblate CDN

Från och med Weblate 4.2 är det möjligt att exportera lokalisering till ett CDN med hjälp av tillägget JavaScript-lokalisering CDN.

Observera

Denna funktion konfigureras på Hosted Weblate. Den kräver ytterligare konfiguration på din installation, se LOCALIZE_CDN_URL och LOCALIZE_CDN_PATH.

När det har installerats i din komponent kommer det att skicka bekräftade översättningar (se Lata åtaganden) till CDN, och dessa kan användas på dina webbsidor för att lokalisera dem.

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

Översättningssträngarna måste finnas i Weblate. Du kan antingen hantera dessa manuellt, använda API för att skapa dem eller lista filer eller URL:er med hjälp av Extrahera strängar från HTML-filer, så extraherar Weblate dem automatiskt. Filerna måste finnas i arkivet eller innehålla fjärr-URL:er som kommer att laddas ner och analyseras regelbundet av Weblate.

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

För att lokalisera ett HTML-dokument måste du ladda skriptet weblate.js:

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