@svelte-dev/i18n

一个简单好用的 Svelte 国际化脚手架工具

安装

可以通过 npm, yarn, pnpm 或者 bun 进行安装：

npm add @svelte-dev/i18n

使用

创建 lib 声明：

import { browser } from '$app/environment';
import { navigating } from '$app/stores';
import { addMessages, locale } from '@svelte-dev/i18n';
 
const translations = import.meta.glob(`../i18n/*.ts`, { eager: true });
 
export const supportedLanguages = [];
export const fallbackLng = 'zh';
 
Object.entries(translations).forEach(([name, mod]) => {
  const lang = name.replace(/.+\/(.+)\.ts/, '$1');
  addMessages(lang, mod.dict);
  supportedLanguages.push(lang);
});
 
if (browser) {
  const path = new URL(location.href).pathname.split('/');
  const lang = supportedLanguages.includes(path?.[1]) ? path?.[1] : fallbackLng;
  locale.set(lang);
 
  navigating.subscribe((params) => {
    if (params?.to?.params?.lang) {
      locale.set(params.to?.params?.lang);
    }
  });
}

创建翻译文件，这里是一个示例：

// src/i18n/en.ts
import type { I18nDict } from '@svelte-dev/i18n';
 
export const dict: I18nDict = {
  __name: 'English',
  __flag: '🇺🇸',
  __unicode: '1f1fa-1f1f8',
  __code: 'EN',
  __direction: 'ltr',
  __status: 'beta',
  site: {
    title: 'Hello World'
  },
  common: {
    get_started: 'Get Started',
    npm_downloads: 'NPM Downloads'
  }
};

创建路由页面 [[lang]]/+page.svelte 或 [[lang=locale]]/+page.svelte。

可选，配置语言参数校验 src/params/locale.ts：

import type { ParamMatcher } from '@sveltejs/kit';
import { getLocales } from '@svelte-dev/i18n';
 
export const match: ParamMatcher = (param) => {
  return getLocales().includes(param);
};

配置 +layout.ts：

import '$lib/i18n';

在页面中使用：

<script>
  import { t } from '@svelte-dev/i18n';
</script>
 
{$t('message')}

API 文档

API 接口文档

赞助

维护者： Willin Wang

如果您对本项目感兴趣，可以通过以下方式支持我：

License

Apache-2.0