轻松实现 React 应用的本地化
您是否希望将您的 React 应用扩展到新市场?TacoTranslate 让本地化您的 React 应用变得异常简单,使您能够轻松触达全球用户。
为什么选择 TacoTranslate 用于 React?
- 无缝集成:专为 React 应用设计,TacoTranslate 可轻松融入您现有的工作流程。
- 自动字符串收集:无需再手动管理 JSON 文件,TacoTranslate 会自动从您的代码库收集字符串。
- AI 驱动的翻译:利用 AI 的力量,提供符合应用语境和风格的准确翻译。
- 即时语言支持:只需点击一下即可添加新语言支持,让您的应用具备全球访问能力。
运作方式
通过 npm 安装 TacoTranslate 包:
npm install tacotranslate
当您安装好模块后,您需要创建一个 TacoTranslate 账号、一个翻译项目以及相关的 API 密钥。在这里创建账号。 这是免费的,且无需添加信用卡信息。
在 TacoTranslate 应用界面内,创建一个项目,然后导航到其 API 密钥标签页。创建一个 read
密钥和一个 read/write
密钥。我们将把它们保存为环境变量。read
密钥就是我们所说的 public
,而 read/write
密钥是 secret
。例如,您可以将它们添加到项目根目录下的 .env
文件中。
您还需要添加另外两个环境变量: TACOTRANSLATE_DEFAULT_LOCALE
和 TACOTRANSLATE_ORIGIN
。
TACOTRANSLATE_DEFAULT_LOCALE
:默认回退语言代码。在此示例中,我们将其设置为en
,表示英语。TACOTRANSLATE_ORIGIN
:存储字符串的“文件夹”,例如您网站的 URL。在这里了解更多关于 origins 的信息。
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
请务必绝不将秘密 read/write
API 密钥泄露到客户端生产环境。
设置 TacoTranslate
通过将您的应用程序包装在 TacoTranslate
上下文提供程序中,在 React 应用中初始化 TacoTranslate:
import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';
const tacoTranslate = createTacoTranslateClient({
apiKey: 'YOUR_API_KEY',
});
export default function App() {
const [locale, setLocale] = useState('en');
return (
<TacoTranslate client={tacoTranslate} locale={locale}>
<Translate string="Hello, world!"/>
</TacoTranslate>
);
}
您现在可以在应用程序的任何地方使用 Translate
组件来显示翻译后的文本!请务必查看 我们的文档 以获取更多信息,以及针对您的设置的具体实现指南。
import {Translate} from 'tacotranslate/react';
export default async function Component() {
return (
<Translate string="Hello? This is TacoTranslate speaking." />
);
}
使用 TacoTranslate 的好处
- 节省时间:自动化繁琐的本地化和字符串收集过程,节省您的宝贵时间。
- 成本效益:减少手动翻译的需求,降低您的本地化成本。
- 提高准确性:AI 驱动的翻译确保上下文准确且高质量的结果。
- 可扩展的解决方案:随着您的应用和客户群增长,轻松添加对新语言的支持。
今天就开始吧!
当您将任何字符串添加到 Translate
组件时,您的 React 应用将自动被翻译。请注意,只有拥有 read/write
权限的环境才能创建新的待翻译字符串。
我们建议设立一个封闭且安全的预发布环境,您可以在其中测试生产应用,并在上线前添加新的字符串。这样可以防止任何人窃取您的秘密 API 密钥,并避免因添加恶意字符串而膨胀您的翻译项目。
请务必查看我们GitHub主页上的完整示例。如果您遇到任何问题,欢迎随时联系我们,我们将非常乐意提供帮助。
TacoTranslate让您能够快速自动地将React应用程序本地化为任意语言,亦可从任意语言翻译回来。免费翻译!