Skip to main content

i18next

在 Svelte 项目中集成 i18next 以实现国际化 (i18n) 功能是一个常见的需求。以下是一个逐步的指南，帮助你在 Svelte 项目中使用 i18next。

步骤 1: 安装依赖​

首先，你需要安装 i18next 和 svelte-i18next（一个专门为 Svelte 项目设计的 i18next 适配器）。

npm install i18next svelte-i18next

步骤 2: 初始化 i18next​

在你的 Svelte 项目中创建一个文件（例如 i18n.js）来初始化 i18next。

// src/i18n.js
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next'; // 需要用到react-i18next的初始化方法
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';

i18next
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, // React already does escaping
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18next;

步骤 3: 配置 Svelte 项目​

在你的 main.js 或 main.ts 文件中引入并初始化 i18next。

// src/main.js
import './i18n';
import App from './App.svelte';

const app = new App({
  target: document.body,
});

export default app;

步骤 4: 创建翻译文件​

在项目的 public 目录下创建一个 locales 文件夹，并在其中创建语言文件（例如 en.json 和 zh.json）。

// public/locales/en/translation.json
{
  "welcome": "Welcome to our application!"
}
// public/locales/zh/translation.json
{
  "welcome": "欢迎使用我们的应用程序！"
}

步骤 5: 使用翻译​

在 Svelte 组件中使用 svelte-i18next 提供的 t 函数来获取翻译。

<!-- src/App.svelte -->
<script>
  import { t } from 'svelte-i18next';

  let translate = t;
</script>

<main>
  <h1>{$translate('welcome')}</h1>
</main>

步骤 6: 切换语言​

为了切换语言，你可以在 Svelte 组件中使用 i18next 的 changeLanguage 方法。

<!-- src/App.svelte -->
<script>
  import { t } from 'svelte-i18next';
  import i18next from 'i18next';

  let translate = t;

  function changeLanguage(language) {
    i18next.changeLanguage(language);
  }
</script>

<main>
  <h1>{$translate('welcome')}</h1>
  <button on:click={() => changeLanguage('en')}>English</button>
  <button on:click={() => changeLanguage('zh')}>中文</button>
</main>

完成​

现在，你的 Svelte 应用已经成功集成了 i18next，并且可以根据用户的选择切换语言。你可以根据需要添加更多的翻译文件和翻译内容。

https://www.i18next.com/overview/getting-started