useGT
`useGT` 字符串翻译函数 API 参考
概览
useGT 函数是一个在构建阶段用于翻译字符串的 hook。
const t = useGT();
<p>{ t('此文本将被翻译') }</p>;构建时翻译:
useGT 的翻译在构建阶段执行,即在应用部署之前。
尽管你可以向翻译后的字符串传入变量,但只能翻译在构建时已知的内容。
参考
参数
无
返回值
一个回调函数 t,用于翻译传入的内容。
(content: string, options?: InlineTranslationOptions) => string| 名称 | 类型 | 描述 |
|---|---|---|
content | string | 待翻译的字符串内容。 |
options? | InlineTranslationOptions | 用于自定义 t 行为的翻译选项。 |
行为
生产环境
在 CD 过程中,任何出现在 t 函数中的内容都会在应用部署前完成翻译。
这可确保所有 locale 的快速加载,但只能翻译构建时已知的内容。
生成后,翻译会根据你的配置:(1) 存储在 CDN(内容分发网络)中,或 (2) 存储在应用的构建产物中。 随后,这些翻译内容将提供给你的用户。 如果未找到对应翻译,将回退到原始内容。
请务必遵循此处的部署指南。
开发
在开发过程中,t 函数会按需翻译内容。
这有助于你为应用在不同语言下的呈现快速做原型并预览效果。
请记得在环境中添加 Dev API key 以启用此功能。
在开发环境中进行按需翻译时,你可能会看到一些延迟。
在生产构建中不会出现这种情况,除非内容被明确设置为按需翻译,
例如使用 tx 或 <Tx>。
示例
基本用法
你可以使用 useGT 来翻译字符串。
import { useGT } from 'gt-next';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('你好,Alice!')}
</p>
);
}注意:“Alice”将会被翻译为用户的首选语言。
使用变量
你可以向字典中的翻译传入变量。
import { useGT } from 'gt-next';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('你好,{name}!', { name: 'Alice' })}
</p>
);
}注意:由于“Alice”是变量,因此不会按用户的首选语言进行翻译。
使用 ICU 消息格式
gt-next 支持 ICU 消息格式,可用于同时格式化变量。
import { useGT } from 'gt-next';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('购物车中{count, plural, =0 {没有商品} =1 {有1件商品} other {有{count}件商品}}', { count: 10 })}
</p>
);
}ICU 消息格式是格式化变量的强大方式。 了解更多,请参阅 ICU 消息格式文档。
从 gt-next/client 导入
如果在使用 "use client" 指令时运行,应从 gt-next/client 导入,而不是从 gt-next 导入。
"use client";
import { useGT } from 'gt-next/client';
export default function TranslateGreeting() {
const t = useGT();
return (
<p>
{t('你好,Alice!')}
</p>
);
}注意
useGT函数是用于翻译字符串的 hook。- 使用
useGT的翻译会在构建阶段、而非运行时执行(开发环境除外)。
下一步
本指南如何?