SuperAPI AI 工具集

intlayer-svelte

前端与建站

查看项目

更新于 10-15 18:41

技能介绍

用途:把 Intlayer 国际化能力接入 Svelte 与 SvelteKit 应用,适合需要在 Svelte 项目中实现多语言翻译的场景。

核心理念:采用组件级内容声明,而不是维护一个庞大的全局翻译文件。内容写在靠近使用它的 Svelte 组件的 *.content.ts 文件中。

工作方式:创建一个可翻译组件通常需要两个文件。声明文件(如 myComponent.content.ts)定义字典内容;实现文件(如 MyComponent.svelte)通过 useIntlayer store 使用这些内容。

声明内容:在 content 文件中使用 t() 写翻译,并用 Dictionary 类型约束。例如 key 必须唯一,并与传给 useIntlayer() 的参数一致,content 中可用 t({ en: "Welcome", fr: "Bienvenue", es: "Hola" }) 定义多语言文本。

在组件中使用:useIntlayer 在 Svelte 中返回 store,需要通过前缀 $ 访问其值。示例:import { useIntlayer } from "svelte-intlayer"; const content = useIntlayer("my-component"); 之后用 {$content.text} 返回内容,用 {$content.text.value} 返回字符串,例如作为 aria-label。

适用范围:Vite 与 Svelte 以及 SvelteKit 项目的国际化设置。

限制:资料未提供具体的安装命令、包名版本、收费信息、平台限制或性能效果,这些内容暂未提供。使用前需按官方文档确认 Vite 与 SvelteKit 的配置步骤。