Mulai cepat

Memerlukan Svelte 5. SDK ini berfungsi dengan render sisi server SvelteKit. Sumber di GitHub

Buat proyek

Buat proyek di Langsys. Anda akan memerlukan ID proyek dan kunci API-nya. Minta akses awal

Instal

npm install langsys-js-svelte

Inisialisasi

Inisialisasi Langsys satu kali saja di root layout Anda. Perintah ini menerima objek konfigurasi dan store yang dapat ditulis yang menyimpan locale pengguna.

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

Kunci API

Kunci tulis

Untuk pengembangan. SDK mendaftarkan frasa dan blok konten baru saat muncul di aplikasi Anda.

Kunci hanya-baca

Untuk produksi. SDK hanya mengambil terjemahan dan tidak pernah membuat frasa.

SDK mendeteksi jenis kunci yang digunakan dan menyesuaikan perilakunya.

Terjemahkan frasa

Gunakan store t untuk string individual. Frasa itu sendiri adalah kunci pencarian sekaligus teks bahasa dasar, sehingga tidak perlu file kunci terpisah. Placeholder dalam kurung kurawal diperiksa tipenya saat kompilasi.

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

Gunakan kategori ketika frasa yang sama memiliki arti berbeda di tempat yang berbeda:

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

Terjemahkan blok konten

Gunakan komponen Translate untuk blok yang lebih besar yang strukturnya penting. Penerjemah melihat hasil yang sudah diberi gaya dan menerjemahkannya sebagai satu kesatuan, tetap bekerja frasa demi frasa di dalamnya.

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

SDK lainnya dan API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Referensi API

Mengalami kendala? Kirimi kami pesan