为 React 应用实现轻松本地化
您是否想将您的 React 应用扩展到新的市场?TacoTranslate 使本地化您的 React 应用变得异常简单,让您轻松触达全球用户。
为什么选择 TacoTranslate 作为 React 的本地化解决方案?
- 无缝集成:专为 React 应用设计,TacoTranslate 可轻松融入您现有的工作流程。
- 自动字符串收集:无需再手动管理 JSON 文件,TacoTranslate 会自动从您的代码库中收集字符串。
- 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。点击这里了解更多关于origin的信息。
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 密钥环境才能创建新的待翻译字符串。
我们建议您设立一个封闭且安全的预发布环境,用于测试您的生产应用,在上线前添加新的字符串。这样可以防止任何人窃取您的秘密 API 密钥,并避免通过添加恶意字符串使翻译项目膨胀。
一定要查看我们GitHub主页上的完整示例。如果遇到任何问题,欢迎随时联系我们,我们将非常乐意为您提供帮助。
TacoTranslate 让您能够快速自动地将 React 应用程序本地化到任何语言,反之亦然。免费翻译!