快速开始
General Translation 的本地化库文档
入门指南
点击你的 React 框架以开始：
或者，你也可以运行 Setup Wizard。
npx gtx-cli@latest什么是 General Translation？
General Translation 是一个完整的国际化（i18n）解决方案，能够让你快速轻松地发布多语言应用。
General Translation 包含以下内容：
- 针对 React 和 Next.js 的开源开发者库
- 一个 AI 翻译服务
- 用于提供翻译内容的完整基础设施包
如果你希望将 GT 库与自己的翻译服务商一起使用，请参阅我们关于 gt-next 和 gt-react 的独立文档。
如果你想使用自己的 i18n 库，但仍希望使用 General Translation 的 AI 翻译服务，请参阅我们的 CLI 工具 文档。
如果你想使用 General Translation 翻译你的 JSON、Markdown 或 MDX 文件，请参阅我们的 CLI 工具 文档。
npx gtx-cli@latest init运行我们的安装向导，开始体验吧！
功能
⚛️ 内联翻译整个 React 组件
- 只需一个
<T>组件的起始和结束标签，就能翻译整个 React 组件。- 无需复杂的重构或繁琐的函数调用。
- 内容内联，与你的代码位于同一位置。
- 无需 key、字符串或额外的文件！
- 该库在后台自动处理所有 i18n 逻辑，你无需操心。
- 翻译始终与源代码保持同步。
- 翻译包含内容的上下文信息，因此更加准确。
export default function Page() {
return (
<T>
<p>You can write any JSX as children of the {"<T>"} component.</p>
<p>
For example, you could write a <a href="/">link</a> and have the text be
translated in context.
</p>
<div>
<div>
<p>Even deeply nested components are translated in context.</p>
<button>Click me!</button>
</div>
</div>
</T>
);
}🔎 与现有库功能等同
- GT 库同样支持如
i18next、react-intl和next-intl等现有库的所有功能。 - 支持字典、复数、货币和自动路由等功能。
🧠 免费 AI 驱动的翻译服务
- 我们的免费 AI 翻译服务可让你在几秒钟内为应用生成翻译。
- 翻译热重载 会在你编写时自动更新翻译内容。
- HTML 内容会根据语言自动重新排列和定制。
🔧 开发者友好
- 配置简单，几分钟即可完成。
- 所有 GT 库均为开源且可独立使用。
- 你可以使用自己的翻译服务商，或使用我们的免费 AI 翻译服务。
- 不再浪费时间管理像
t('menu.header.title')这样的翻译 key。- 只需直接内联编写所有内容！
查看我们的 Github 仓库 获取源代码和示例项目。
这些文档正在建设中。如果你在这里找不到需要的内容，请在我们的 GitHub 仓库 提交 issue。
为什么选择 General Translation？
General Translation 是一个完整的 i18n 技术栈，包括开发者库、AI 翻译和多语言应用的完整基础设施包。
您可以将我们的库与您自己的翻译提供商混合使用，或者将我们免费的 AI 驱动翻译服务与您自己的 i18n 库一起使用。
为了获得无缝的端到端 i18n 体验，我们建议将我们的库与我们的翻译服务一起使用。
使用 GT 库如 gt-react 和 gt-next，您可以：
1. 翻译整个 React 组件，而不仅仅是字符串
作为 <T> 组件子元素传递的 UI 将被翻译，无论 JSX 树有多复杂。例如：
import { T } from "gt-next";
export default function Page() {
return (
<T>
<p>Any children of <b>the {`<T>`} component</b> will be translated.</p>
<p>
Things like <a href="/">links</a>{', '}
<button>buttons</button>{', '}
and even <div> <div> <div> deeply nested components </div> </div> </div> are translated.
</p>
</T>
);
}2. 翻译客户端和服务器组件
通过对 Next.js App Router 和 React Server Components 的一流支持，您可以翻译客户端和服务器组件。
import getName from "@/getName";
import { T, Var } from "gt-next";
export default async function MyServerComponent() {
const name = await getName();
return (
<T>
Hello, <Var>{name}</Var>
</T>
);
}"use client";
import { useState } from "react";
import { T, Var } from "gt-next";
export default function MyClientComponent() {
const [name, setName] = useState("Alice");
return (
<T>
Hello, <Var>{name}</Var>
</T>
);
}3. 内联编写内容或使用字典
放置在 <T> 组件内的 JSX 内容会被标记为翻译：
import { T } from "gt-next";
export default function Page() {
return (
<T>
<p>Hello, world!</p> {/* translates <p>Hello, world!</p> */}
</T>
)
}或者，如果您更喜欢使用传统的字典方法，您可以在字典文件中编写内容：
{
"greeting": "Hello, world!"
}const dictionary = {
greeting: "Hello, world!"
}
export default dictionary;const dictionary = {
greeting: "Hello, world!"
}
export default dictionary;import { useTranslations } from "gt-next";
export default function Page() {
const t = useTranslations();
return t('greeting'); // translates "Hello, world!"
}4. 在开发中查看翻译内容
无需担心 UI 在不同语言中的外观，General Translation 会在您编写内容时自动实时翻译您的内容。
无需在生产环境中持续多次修改您的 UI，只需用英语编写内容一次，让 General Translation 处理其余工作。
需要在部署前查看您的 UI 元素在德语中的外观？没问题，General Translation 会自动为您翻译它们！
5. 按需翻译内容
应用程序经常需要翻译仅在运行时才知道的内容。对于 Next.js，GT 库支持按需翻译内容的能力。
一些常见示例包括：
- 用户特定信息
- 远程存储的内容
- 动态生成的内容
一旦翻译加载完成，它将使用新的翻译内容实时重写您的组件。
快速开始
按照快速入门指南，发布你的第一个翻译内容。
npm i gt-nextyarn add gt-nextbun add gt-nextpnpm add gt-next按照快速入门指南，发布你的第一个翻译内容。
npm i gt-reactyarn add gt-reactbun add gt-reactpnpm add gt-react准备好迈向全球了吗？几分钟内开始为你的应用翻译，触达全球用户！
这份指南怎么样？