阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

小編精選 - 技術文章翻譯 · 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;