البدء السريع

يتطلب Svelte 5. يعمل SDK مع العرض من جهة الخادم في SvelteKit. الشيفرة المصدرية على GitHub

أنشئ مشروعًا

أنشئ مشروعًا في Langsys. ستحتاج إلى معرّف المشروع ومفتاح API. اطلب الوصول المبكر

تثبيت

npm install langsys-js-svelte

تهيئة

هيّئ Langsys مرة واحدة في التخطيط الجذر (root layout) لديك. يأخذ كائن إعدادات ومخزنًا قابلًا للكتابة يحتوي على لغة المستخدم.

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

استخدم فئة عندما تحمل العبارة نفسها معاني مختلفة في أماكن مختلفة:

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

ترجمة كتل المحتوى

استخدم المكوّن 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

REST API

مرجع API

هل تواجه مشكلة في أمر ما؟ أرسل إلينا رسالة