Bắt đầu nhanh

Yêu cầu Svelte 5. SDK hoạt động với kết xuất phía máy chủ của SvelteKit. Mã nguồn trên GitHub

Tạo dự án

Tạo một dự án trong Langsys. Bạn sẽ cần ID dự án và khóa API của dự án đó. Đăng ký truy cập sớm

Cài đặt

npm install langsys-js-svelte

Khởi tạo

Hãy khởi tạo Langsys một lần, trong layout gốc của bạn. Hàm này nhận một đối tượng cấu hình và một store có thể ghi chứa locale của người dùng.

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

Khóa API

Khóa ghi

Dành cho môi trường phát triển. SDK sẽ đăng ký các cụm từ và khối nội dung mới khi chúng xuất hiện trong ứng dụng của bạn.

Khóa chỉ đọc

Dành cho môi trường production. SDK chỉ tải bản dịch và không bao giờ tạo cụm từ.

SDK tự phát hiện loại khóa mà nó đang dùng và hoạt động phù hợp.

Dịch các cụm từ

Dùng store t cho các chuỗi riêng lẻ. Bản thân cụm từ vừa là khóa tra cứu vừa là văn bản ngôn ngữ gốc, nên không cần tệp khóa riêng. Các placeholder trong dấu ngoặc nhọn được kiểm tra kiểu khi bạn biên dịch.

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

Hãy dùng danh mục khi cùng một cụm từ có nghĩa khác nhau ở những nơi khác nhau:

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

Dịch các khối nội dung

Hãy dùng thành phần Translate cho các khối lớn hơn mà cấu trúc đóng vai trò quan trọng. Biên dịch viên sẽ thấy kết quả đã được định dạng và dịch nó như một đơn vị, vẫn làm việc theo từng cụm từ bên trong đó.

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

Các SDK khác và API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Tài liệu tham khảo API

Bạn đang gặp khó khăn? Gửi tin nhắn cho chúng tôi