小編精選 - 技術文章翻譯 · 09月25日

我輕鬆地將我的 React.js 應用程式翻譯成多種語言。這是如何...🤯

Tolgee 是簡化本地化過程，為開發者節省時間，移除重複任務 🔁 ❌

省時間？這正是我想要的。告訴我如何本地化我的 React 應用程式！

Simpson

什麼是 Tolgee

Tolgee 是一個開源的 i18n 工具，結合本地化平台和 SDK，為開發者和翻譯者提供簡單的方式來翻譯網頁應用程式。

Tolgee 並不僅僅是另一個提供本地化的平台，它是真正通過 SDK 整合進入你的應用程式。

在上下文中翻譯 📖

作為本地化應用程式的開發者，每當需要更改文本時，你可能都必須修改本地化數據。

因此，你需要打開文件，添加或找到要修改的鍵，保存文件並檢查應用程式是否正確更改。

使用 Tolgee，你只需 ALT + click 實際翻譯的文本，💥boom💥 翻譯對話框就會出現，你能立即進行翻譯。

Tolgee - in context translation dialog

自動截圖生成 📸

本地化的另一個棘手問題是為翻譯者提供上下文。僅僅導出鍵和源語言的翻譯並不總是足夠。

Tolgee 允許你在上下文翻譯對話框中直接拍攝並上傳截圖。這樣就不再需要手動拍攝和上傳截圖了。

taking screenshots

包含本地化平台 ✅

Tolgee 也是一個本地化平台，你可以管理所有的本地化字符串。你可以給翻譯者提供訪問權限，他們可以在那裡翻譯文本。

如果你之前上傳過截圖，他們會完美地了解翻譯的上下文，從而產出出色的結果。

整合會很難嗎？不，不會的！

要開始使用，你只需按照平台提供的整合指南即可。

登入 Tolgee Cloud 或使用你自己托管的 Tolgee 實例。
透過點擊右上角的 Add 鈕 創建一個新項目。填入項目名稱。

如果需要，你還可以添加多種語言以進行應用翻譯。
從側邊菜單選擇 Integrate，選擇 React (Vite) 並生成一個 所有範疇均勾選 的 API 密鑰。

Integrate React app

成功啦！🎉 現在你只需按照整合指南進行操作。

將其整合到 React 應用中

生成全新的 React 應用並在你最喜愛的編輯器中打開它。

npm create vite@latest tolgee-hello-world -- --template react-ts
# 跟隨 vite 指南

安裝 Tolgee 套件 ⬇️
```
npm install @tolgee/react
```
透過 從整合指南中複製，將 Tolgee 屬性添加到你的開發 .env 文件 env.development.local。
```
VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
VITE_APP_TOLGEE_API_KEY=<your API key>
```
在 main.tsx 中將你的 App 元件包裝在 TolgeeProvider 元件中。你可以從整合指南中複製這部分。

前往 App.tsx，將所有內容替換為簡單的 "Hello world!" 訊息。

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello world!</h1>
    </div>
  );
}

export default App;

將 "Hello world!" 包裝在 <T> 元件中並添加 keyName 屬性。

import './App.css';
import { T } from '@tolgee/react';

function App() {
  return (
    <div className="App">
      <h1>
        <T keyName="hello_world">Hello world!</T>
      </h1>
    </div>
  );
}

export default App;

讓我們在瀏覽器中運行應用程式，看看魔法吧！ 🪄

按住 ALT 鍵並將滑鼠移到文本上。該文本應會被高亮顯示。
當你點擊它時，對話框會彈出，你可以編輯文本或生成截圖。

當你點擊更新按鈕後，你的 Hello World! 文本將立即變更為新值！

恭喜你！完成了！ 🎉🎉🎉

現在你可以翻譯你的 React 應用程式了。要了解更多有關 Tolgee 的信息，或查找如何翻譯更複雜的情況，請查看我們的文檔。

Tolgee - 開發者友好的本地化工具

Image description

Tolgee 幫助團隊輕鬆地本地化應用程式。我們使翻譯變得簡單，並提供即時更新，輕鬆整合到你的工作流程中。

告別複雜的文件管理，專注於構建偉大的產品。快速、流暢，且為開發者量身打造。

Guy Struggling gif

如果你喜歡這個教程，請幫我們按一個星星。這將幫助我們創建更多這樣的文章 💖

原文出處：https://dev.to/tolgee_i18n/i-easily-translated-my-reactjs-applications-into-multiple-languages-here-is-how-1cbn

0個讚 0留言 68瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。