Szybki start

Wymaga Svelte 5. SDK działa z renderowaniem po stronie serwera w SvelteKit. Kod źródłowy na GitHubie

Utwórz projekt

Utwórz projekt w Langsys. Będzie Ci potrzebny jego identyfikator oraz klucz API. Poproś o wczesny dostęp

Instalacja

npm install langsys-js-svelte

Zainicjuj

Zainicjuj Langsys raz, w głównym layoucie. Przyjmuje on obiekt konfiguracyjny oraz zapisywalny store przechowujący ustawienia regionalne użytkownika.

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

Klucze API

Klucz zapisu

Do celów deweloperskich. SDK rejestruje nowe frazy i bloki treści w miarę ich pojawiania się w Twojej aplikacji.

Klucz tylko do odczytu

Do środowiska produkcyjnego. SDK tylko pobiera tłumaczenia i nigdy nie tworzy fraz.

SDK wykrywa, z jakim rodzajem klucza ma do czynienia, i zachowuje się odpowiednio.

Tłumaczenie fraz

Do pojedynczych ciągów znaków używaj store'a t. Sama fraza jest kluczem wyszukiwania i tekstem w języku bazowym, więc nie potrzeba osobnego pliku z kluczami. Symbole zastępcze w nawiasach klamrowych są sprawdzane pod kątem typów podczas kompilacji.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

Użyj kategorii, gdy ta sama fraza ma różne znaczenia w różnych miejscach:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

Tłumaczenie bloków treści

Używaj komponentu Translate w przypadku większych bloków, w których liczy się struktura. Tłumacze widzą sformatowany wynik i tłumaczą go jako jedną całość, nadal pracując w jej obrębie fraza po frazie.

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

Pozostałe pakiety SDK i API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Dokumentacja API

Masz z czymś problem? Wyślij nam wiadomość