README_zh-CN.md

适用于 Svelte 的轻量、简单、灵活、自动翻译的国际化工具

English | 简体中文

目录

愿景
要求
特性
Live Demo
原理
  基于 Store 实现
  基于 Context 实现
License

愿景

为了让接入国际化成为轻松且愉快的事😄💪🏻

要求

• svelte >= 3.0.0
• i18n-pro >= 2.0.0

特性

• 轻量： +
• 以下特性继承于 i18n-pro
  • 简单
  • 灵活
  • 自动翻译
  • keyless

Live Demo

• 基于 Store 实现
  • Open in CodeSandbox
  • 
• 基于 Context 实现
  • Open in CodeSandbox
  • 

原理

该库是基于 i18n-pro 结合 Svelte 的 Store 和 Context 特性分别做了对应实现

基于 Store 实现

主要由 4 部分构成

• createI18n
• t
• setI18n
• i18nState

createI18n：初始化国际化状态
t：获取国际化文案
setI18n：设置语言或语言包
i18nState：当前国际化的状态

简易示例如下

// i18n.ts
import { createI18n } from '@i18n-pro/svelte'

createI18n( {
  namespace: 'testNamespace',
  locale: "en",
  langs: {
    zh: {
      'hello world': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
    },
  }
})

// App.svelte
<script>
  import { t } from '@i18n-pro/svelte'
</script>

<div>
  {$t('hello world')}
</div>

// index.ts
import './i18n'
import App from './App.svelte'

new App({
  target: document.getElementById('app'),
})

基于 Context 实现

主要由 2 部分构成

• I18nProvider
• useI18n

I18nProvider：配置国际化初始化属性的容器组件
useI18n：获取国际化 API 和状态的 hook 方法

简易示例如下

// App.svelte
<script>
  import { useI18n } from '@i18n-pro/svelte/context'
  const { t } = useI18n()
</script>

<div>
  {$t('hello world')}
</div>

// Root.svelte
<script>
  import { I18nProvider } from '@i18n-pro/svelte/context'
  import App from './App.svelte'
</script>

<I18nProvider
  namespace="i18n-example"
  locale="en"
  langs={{
    zh: {
      'hello world': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
    },
  }}
>
  <App/>
</I18nProvider>

// index.ts
import App from './Root.svelte'

new App({
  target: document.getElementById('app'),
})

帮助文档

为了避免不必要的重复文档内容，该库的部分文档是链接 i18n-pro 中的内容
当前文档中 i18n-pro 相关链接是基于 2.1.0 版本，如果你使用的非该版本，需查看你所使用版本对应的文档，以免用法不一致

• 当前库
  • 快速上手
    • 基于 Store 实现
    • 基于 Context 实现
  • API
    • 基于 Store 实现
    • 基于 Context 实现
  • 更新日志
• i18n-pro
  • 命令行
  • 匹配规则
  • Q&A
  • 翻译日志

License

MIT

Copyright (c) 2023-present Eyelly Wu