快速入门

需要 Svelte 5。该 SDK 支持 SvelteKit 服务端渲染。 GitHub 上的源代码

创建项目

在 Langsys 中创建项目。您将需要该项目的 ID 和一个 API 密钥。 申请抢先体验

安装

npm install langsys-js-svelte

初始化

在根布局中初始化一次 Langsys。它接受一个配置对象和一个存放用户语言区域的可写 store。

// 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 store。短语本身既是查找键，也是基础语言文本，因此无需单独的键文件。花括号中的占位符会在编译时进行类型检查。

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

遇到问题了吗？ 给我们留言