क्विक स्टार्ट

SvelteKit ऐप में Langsys जोड़ें। सभी विकल्पों और अन्य SDK के लिए पूरा दस्तावेज़ देखें।

संपूर्ण दस्तावेज़ीकरण API संदर्भ

Svelte 5 आवश्यक है। SDK, SvelteKit की सर्वर रेंडरिंग के साथ काम करता है। GitHub पर सोर्स

प्रोजेक्ट बनाएँ

Langsys में एक प्रोजेक्ट बनाएँ। आपको उसकी प्रोजेक्ट ID और एक API कुंजी की ज़रूरत होगी। अर्ली एक्सेस के लिए अनुरोध करें

इंस्टॉल करें

npm install langsys-js-svelte

इनिशियलाइज़ करें

Langsys को अपने रूट लेआउट में एक बार इनिशियलाइज़ करें। यह एक कॉन्फ़िग ऑब्जेक्ट और एक राइटेबल स्टोर लेता है, जिसमें उपयोगकर्ता का लोकेल रहता है।

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

API कुंजियाँ

राइट कुंजी
डेवलपमेंट के लिए। आपके ऐप में नए वाक्यांश और कंटेंट ब्लॉक दिखाई देते ही SDK उन्हें रजिस्टर कर लेता है।
रीड-ओनली कुंजी
प्रोडक्शन के लिए। SDK केवल अनुवाद प्राप्त करता है और कभी नए वाक्यांश नहीं बनाता।

SDK पहचान लेता है कि उसके पास किस प्रकार की कुंजी है और उसी के अनुसार व्यवहार करता है।

वाक्यांशों का अनुवाद करें

अलग-अलग स्ट्रिंग के लिए t स्टोर का उपयोग करें। वाक्यांश ही लुकअप कुंजी और आधार भाषा का टेक्स्ट है, इसलिए कोई अलग कुंजी फ़ाइल नहीं होती। कर्ली ब्रेसेस में लिखे प्लेसहोल्डर की कंपाइल करते समय टाइप-जाँच होती है।

<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>
Español
  • Bienvenido a mi aplicación
  • ¡Hola, Sarah!
  • Tienes 3 mensajes nuevos

जब एक ही वाक्यांश अलग-अलग जगहों पर अलग-अलग अर्थ रखता हो, तो श्रेणी का उपयोग करें:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>
Español
  • Inicio
  • Hogar

कंटेंट ब्लॉक का अनुवाद करें

जहाँ संरचना मायने रखती है, ऐसे बड़े ब्लॉक के लिए Translate कंपोनेंट का उपयोग करें। अनुवादक स्टाइल किया हुआ परिणाम देखते हैं और उसे एक इकाई के रूप में अनुवाद करते हैं, फिर भी उसके भीतर वाक्यांश-दर-वाक्यांश काम करते हैं।

<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 और API

React
npm install langsys-js-react
Vue
npm install langsys-js-vue
TypeScript (any framework)
npm install langsys-js-typescript

किसी बात पर अटक गए हैं? हमें संदेश भेजें