SuperAPI AI 工具集

shopify-app-i18n

前端与建站

查看项目

更新于 10-16 05:47

技能介绍

用途:指导为 Shopify 应用接入多语言(i18n),面向需要服务全球商家的应用。

技术栈:i18next 作为核心库,React 使用 react-i18next,Remix 使用 remix-i18next。

安装:npm install i18next react-i18next remix-i18next i18next-fs-backend i18next-http-backend

配置与用法:在 app/i18n.server.ts 用 RemixI18Next 创建服务端实例以检测语言,配置 supportedLanguages、fallbackLanguage,并通过 backend.loadPath 指定翻译文件路径;在 app/root.tsx 的 loader 中调用 getLocale 获取 locale,通过 useChangeLanguage 同步 Remix 与 i18next,并在 html 上设置 lang 与 dir;可用 handle 导出声明该路由使用的翻译命名空间。组件中通过 useTranslation 获取 t 函数翻译文案。

翻译文件:以 JSON 放在 public/locales 下,按语言分目录(如 en、fr、vi),支持嵌套键。

Shopify Admin 语言:Shopify 会通过 URL 查询参数(如 ?locale=fr-FR)传递语言,也可从 GraphQL Admin API 获取;配置正确时 remix-i18next 会自动处理请求头或查询参数。

扩展限制:Theme App Extensions 与 Checkout UI Extensions 各自拥有独立 locales 目录,不共享 Remix 应用的翻译文件,路径形如 extensions/my-ext/locales/en.default.json 与 extensions/checkout-ui/locales/en.json。

其他细节(如具体语言矩阵、完整 API 说明、计费或平台约束)暂未提供。