SuperAPI AI 工具集

intlayer-preact

前端与建站

查看项目

更新于 10-15 17:23

技能介绍

用途:把 Intlayer 国际化能力接入 Preact 应用,适合需要为 Preact 项目搭建多语言支持、创建可翻译组件的场景。

核心理念:Intlayer 采用组件级内容声明,而非单一庞大的全局翻译文件。内容写在紧邻使用它的 Preact 组件的 *.content.ts 文件中。

工作流:创建翻译组件需要两个文件——声明文件(如 myComponent.content.ts)定义字典,实现文件(如 MyComponent.tsx)通过 useIntlayer 钩子使用内容。

声明内容:在内容文件中用 t() 定义翻译,字典需设置唯一 key,且与 useIntlayer() 传入的值一致。示例: import { t, type Dictionary } from "intlayer"; const content = { key: "my-component", content: { text: t({ en: "Welcome", fr: "Bienvenue", es: "Hola" }) } } satisfies Dictionary; export default content;

使用方式:从 preact-intlayer 导入 useIntlayer 钩子,在组件中调用 const content = useIntlayer("my-component"),直接渲染 content.text,或通过 .value 取字符串(如用于 img 的 src 与 alt)。

适用场景:Vite 与 Preact 项目中的多语言界面开发。

限制:资料未提供安装命令、依赖版本、构建配置细节、收费与平台支持等信息,暂未提供。