开始

此寄存器包含为 SvelteKit 的国际化 .

安装

1. 安装包

pnpm i @deckweiss/internationalization

2.a 设置(配有饼干)

// src/i18n.ts
import { setupI18n } from '@deckweiss/internationalization';
import de from '$lib/translations/de.json';
import en from '$lib/translations/en.json';

setupI18n({
    defaultLocale: 'en',
    locales: {
        de,
        en
    },
});

// src/hooks.server.ts
import { handle } from '@deckweiss/internationalization';
import './i18n.js';

export { handle };

// hooks.client.ts
import './i18n.js';

<!-- app.html -->
<html lang="%lang%">
    ...
</html

// +layout.server.ts
export function load(event) {
    return { locale: event.locals.i18n.locale }
}

// +layout.svelte
<script lang="ts">
    import { setI18nContext, useI18n } from '@deckweiss/internationalization';

    let { data, children } = $props();

    setI18nContext(data.locale)
</script>

{@render children()}

2.b 设置( 无 Cookie 通过 URL 参数)

示例url : example.com/en/... 或者说 example.com/de/...

// src/i18n.ts
import { setupI18n } from '@deckweiss/internationalization';
import de from '$lib/translations/de.json';
import en from '$lib/translations/en.json';

setupI18n({
    defaultLocale: 'en',
    locales: {
        de,
        en
    },
});

// src/hooks.server.ts
import { handle } from '@deckweiss/internationalization';
import './i18n.js';

export { handle };

// hooks.client.ts
import './i18n.js';

<!-- app.html -->
<html lang="%lang%">
    ...
</html

// src/routes/[locale]/+layout.server.ts
export function load(event) {
    event.locals.i18n.setLocale(event.params.locale)
    return { locale: event.locals.i18n.locale }
}

// src/routes/[locale]/+layout.svelte
<script lang="ts">
    import { setI18nContext, useI18n } from '@deckweiss/internationalization';

    let { data, children } = $props();

    setI18nContext(data.locale)
</script>

{@render children()}

3. 使用费

// +page.svelte
<script>
    import { useI18n } from '@deckweiss/internationalization';
    
    const i18n = useI18n();
</script>

<p>{i18n.t('app.day', { date: Date.now() })}</p>

I18n 实例存在于所有服务器文件,组成动作和服务器钩子(+layout.server.ts,+page.server.ts,+server.ts)通过: event.locals.i18n。 。 。 .

4. (可选) 更新选定区域

提示: 在无饼干模式中, 您想要从 /de 到/ en 附加链接, 以便在页面重载时保持一致

// src/lib/components/language-picker.svelte
<script>
    import { useI18n } from '@deckweiss/internationalization';

    const i18n = useI18n()
</script>

<select onchange={(event) => i18n.setLocale(event.target.value)}>
    <option disabled>Choose language</option>
    {#each locales as l}
        <option value={l} selected={l === i18n.locale}>{l}</option>
    {/each}
</select>

JSON 格式

此软件包兼容 i18n 下个 JSON v4。尽管它目前只支持嵌入键和以格式插入.

实例

// src/lib/translations/en.json
{
    "app": {
        "name": "Example app",
        "day": "Today is {{date, date(format: dddd)}}"
    }
}

可找到日期格式符号 这里。 。 。 . 装订日期语言

• 德语
• 联合国
• 意大利语
• 西班牙语

支助的刑警组织

日期和时间

// src/lib/translations/en.json
{
    "day": "Today is {{date, date(format: dddd, dd.mm.yyyy)}}" // Output: "Today is Friday, 23.05.1997"
}

数字和货币

这个 options 参数直接传入 Intl.NumberFormat 建筑师。 因此,您可以在 JSON 语法中配置任意选项 .

// src/lib/translations/en.json
{
    "number": "{{count, number(options: {\"style\": \"decimal\", \"minimumFractionDigits\": 5})}}", // Output: "5,132.95000"
    "currency": "{{amount, number(options: {\"style\": \"currency\", \"currency\": \"EUR\"})}}" // Output: "5,132.95 €"
}

已知问题

+page.ts和+layout.ts文件中没有 i18n 实例

捐款

创建新发行

1. 手或手更新软件包版本 pnpm version。 。 。 .
2. 承诺信息在主机上必须从 chore: release