Svelte-i18n 使用教程

项目介绍

svelte-i18n 是一个为 Svelte 和 SvelteKit 设计的国际化库。它旨在简化应用程序的国际化过程，提供了一种直观的方式来管理多语言支持。该库具有轻量级、无外部依赖的特点，使得开发者可以轻松地将应用内容翻译成多种语言。

项目快速启动

安装

首先，你需要在你的项目中安装 svelte-i18n：

npm install svelte-i18n

配置

在你的项目中创建一个 i18n.js 文件，并进行基本配置：

// src/i18n.js
import { init, register } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('zh', () => import('./locales/zh.json'));

init({
  fallbackLocale: 'en',
  initialLocale: 'en',
});

使用

在你的 Svelte 组件中使用 svelte-i18n：

<script>
  import { _ } from 'svelte-i18n';
</script>

<h1>{$_('welcome')}</h1>

应用案例和最佳实践

动态切换语言

你可以在应用中添加一个语言切换功能，允许用户动态切换语言：

<script>
  import { locale } from 'svelte-i18n';

  const changeLocale = (newLocale) => {
    locale.set(newLocale);
  };
</script>

<button on:click={() => changeLocale('en')}>English</button>
<button on:click={() => changeLocale('zh')}>中文</button>

处理复数形式

svelte-i18n 支持处理复数形式，可以通过以下方式实现：

<script>
  import { _ } from 'svelte-i18n';
  let count = 0;
</script>

<h1>{$_('itemCount', { count })}</h1>

在 locales/en.json 中：

{
  "itemCount": "You have {count} item",
  "itemCount_plural": "You have {count} items"
}

典型生态项目

SvelteKit

svelte-i18n 与 SvelteKit 完美集成，可以轻松地在 SvelteKit 项目中实现国际化功能。

Svelte

对于传统的 Svelte 项目，svelte-i18n 同样提供了强大的国际化支持，帮助开发者快速实现多语言功能。

通过以上步骤，你可以快速上手并使用 svelte-i18n 实现你的应用国际化需求。