我在地化了全球最好的短鏈平台

作為與Tolgee一起玩的一部分，我嘗試將dub.co（一家成熟的開源公司）翻譯成其他語言！我花了1個小時，結果令人驚訝！

---

在本教程中，我將引導您使用 Tolgee（一個專為快速自主翻譯管理而設計的平台）在 Next.js 應用程式中輕鬆高效地進行在地化。

您還將學習如何將 Tolgee 與 Dub.co 集成，Dub.co 是一個流行的連結管理平台，允許用戶以自己喜歡的語言存取應用程式並與之互動。

先決條件

要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。

您還需要設定以下內容：

• Tolgee 專案 - 至少有兩種語言翻譯的現有專案。
• Tolgee CLI - 允許您使用命令列從電腦與 Tolgee 平台互動。
• Docker - 運行 Dub.co 所必需的。它是一個開源平台，使用容器化來更輕鬆地創建、部署和運行應用程式。
• Docker Compose - 用於定義和運行多容器 Docker 應用程式的軟體應用程式。
• Python（版本 3.8 或更高版本）：配置 Dub.co 的某些套件所必需的。

---

托爾吉是什麼？

Tolgee 是一個開發人員友好的在地化平台，可讓您將應用程式翻譯成任何語言，而無需修改程式碼。它專為 Web 應用程式設計，但也支援行動和桌面應用程式。

使用 Tolgee，您無需在原始程式碼中尋找金鑰、編輯在地化檔案或為翻譯人員執行手動匯出資料。 Tolgee 提供上下文翻譯、用於追蹤已翻譯字串的翻譯記憶庫、機器和自動翻譯等。

請幫我們加一顆星。 ？

這會幫助我們創作更多這樣的文章？

為 Tolgee 儲存庫加註星標 ⭐

---

如何在本地電腦上設定 Dub.co

Dub.co 是一個開源連結管理平台，允許行銷團隊為其連結添加強大的分析功能、創建短連結、為連結產生二維碼等等。它是由 Steven Tey（前 Vercel 成員）創建的。

按照以下步驟在您的電腦上設定 Dub.co：

透過運行下面的程式碼片段來克隆 Dub.co GitHub 儲存庫。

git clone https://github.com/dubinc/dub.git

導覽至 dub 資料夾並安裝專案依賴項：

git clone https://github.com/dubinc/dub.git

在apps/web資料夾中，將.env.example檔案重新命名為.env。

建立新的 Tinybird 帳戶，並將您的管理員身份驗證令牌複製到.env檔案中。

pnpm install

導覽至 packages/tinybird 目錄並使用以下指令安裝 Tinybird CLI：

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

在終端機中執行以下命令，並在提示使用 Tinybird CLI 進行身份驗證時輸入您的管理員身份驗證令牌：

pip3 install tinybird-cli

透過執行下面的程式碼片段來發布 Tinybird 資料來源和端點：

tb auth

建立 Upstash 資料庫，並將下列憑證從 REST API 部分複製到 .env 檔案：

tb push

導覽至 QStash 標籤並將下列憑證複製到 .env 檔案中。

UPSTASH_REDIS_REST_URL=<your_rest_url>
UPSTASH_REDIS_REST_TOKEN=<your_rest_token>
</your_rest_token></your_rest_url>

接下來，在 apps/web 目錄中，執行以下命令來啟動 Docker Compose 堆疊：

QSTASH_TOKEN=
QSTASH_CURRENT_SIGNING_KEY=
QSTASH_NEXT_SIGNING_KEY=

使用以下命令產生 Prisma 用戶端並建立其資料庫表：

docker-compose up

Dub.co 支援多種身份驗證方式。 建立一個 GitHub 應用程式並複製下面的 URL 作為其回呼 URL。

npx prisma generate
npx prisma db push

最後，啟動開發伺服器：

http://localhost:8888/api/auth/callback/github

您可以透過在瀏覽器中導航至 http://localhost:8888 來存取 Web 應用程序，建立工作區並開始使用。如果您遇到任何問題，請參閱完整的安裝指南以獲得更詳細的協助。

---

如何在 Next.js 應用程式中配置 Tolgee

在本節中，您將學習如何將 Tolgee 新增至 Next.js 應用程式並將其配置為支援多種語言，從而允許使用者以其首選語言存取應用程式。

要在 Next.js 應用程式中實現在地化，您需要安裝 Tolgee React SDK。

pnpm dev

接下來，建立一個 Tolgee 平台帳戶並登入您的儀表板。

透過點擊「項目」按鈕並選擇項目的首選語言來新增項目。對於此應用程序，我們將使用五種語言：英語（作為基本語言）、中文、印地語、西班牙語和阿拉伯語。

點擊儀表板右上角的個人資料圖標，然後選擇「專案 API 金鑰」為您的 Tolgee 專案建立 API 金鑰。

建立 .env.development.local 並將您的 API 金鑰複製到檔案中：

git clone https://github.com/dubinc/dub.git

從側邊欄選單中選擇翻譯並將新翻譯新增至項目。

您可以建立翻譯鍵，新增需要翻譯的內容或字串，提供描述，然後儲存。

Tolgee 預設提供各種機器翻譯選項，讓您輕鬆將內容翻譯成專案中可用的語言。

恭喜！您已成功在應用程式中設定了用於翻譯的 Tolgee 平台。接下來，讓我們在 Dub.co 專案中配置 Tolgee，以便直接在應用程式中輕鬆產生翻譯。

如何在 Dub.co 中設定本地化

在本節中，我將指導您配置 Tolgee 以支援 Dub.co 專案中的客戶端-伺服器互動。

首先，安裝 Tolgee CLI 軟體包。

pnpm install

執行以下程式碼片段以使用您的專案 API 金鑰登入您的 Tolgee 平台。

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

接下來，在 apps/web 目錄中建立一個 i18n 資料夾。該資料夾將儲存 JSON 文件，其中包含 Tolgee 平台專案中可用的各種語言的翻譯。

pip3 install tinybird-cli

在 apps/web 目錄中，透過執行以下程式碼片段來取得在 Tolgee 專案中建立的語言翻譯：

tb auth

上面的程式碼片段會使用在 Tolgee 平台中建立的各種語言翻譯自動填入 i18n 資料夾。

tb push

建立一個 tolgee 資料夾，其中將包含 apps/web 目錄中的 Tolgee 配置：

git clone https://github.com/dubinc/dub.git

在tolgee目錄中加入shared.ts文件，然後將以下程式碼片段複製到該文件中：

pnpm install

上面的程式碼片段使用預設語言和後備語言配置 Tolgee，以在應用程式中啟用本地化。

接下來，在 tolgee 目錄中建立一個 client.tsx 文件，然後將以下程式碼片段複製到該文件中：

TINYBIRD_API_KEY=<your_admin_auth_token>
</your_admin_auth_token>

client.tsx 檔案用於翻譯客戶端元件，也為伺服器渲染元件啟用上下文功能。上面的程式碼片段定義了 TolgeeNextProvider 元件，它包裝了整個 Dub.co 應用程序，提供管理語言變更和翻譯所需的配置。

在 tolgee 資料夾中建立自訂 locale.ts 文件，並將以下程式碼片段複製到其中：

pip3 install tinybird-cli

最後，在 tolgee 資料夾中建立一個 server.tsx 文件，然後將以下程式碼片段複製到該文件中：

tb auth

應用程式利用 React 伺服器快取在單一渲染中跨元件共用 Tolgee 實例。這允許應用程式在伺服器元件中的任何位置使用 Tolgee 實例。

恭喜！您已成功配置 Tolgee，現在可以開始在應用程式內的各種內容中新增翻譯。

---

如何使用 Tolgee 翻譯您的申請內容

在這裡，您將學習如何翻譯 Web 應用程式中的內容，並了解 Tolgee 如何實現輕鬆的應用程式內翻譯。

首先，您需要使用 TolgeeNextProvider 組件包裝整個 Dub.co 應用程序，該組件在 tolgee/client.tsx 中定義。導覽至apps/web/app 資料夾，然後前往app.dub.co/(dashboard) 目錄，並更新layout.tsx 檔案如下圖：

tb push

上面的程式碼片段使用 Tolgee 提供者包裝儀表板路由，從而在整個應用程式中實現語言切換和本地化。

Tolgee 提供了兩個鉤子來幫助您在應用程式中選擇和翻譯文字：useTolgee 和 useTranslate。

• useTolgee 鉤子傳回 Tolgee 實例，讓您訂閱各種在翻譯文字時觸發重新渲染的事件。
• useTranslate 掛鉤包含一個翻譯函數（t 函數），可直接在應用程式內呈現實際翻譯。

透過加入以下程式碼片段來更新 app.dub.co/(dashboard)/[slug] 目錄中的 page.tsx 檔案：

「使用客戶端」；
從“@/ui/layout/page-content”導入{ PageContent }；
從“./page-client”導入 WorkspaceLinksClient；
//??托爾吉裝置
從“@tolgee/react”導入{ useTolgee, useTranslate }；
從“tolgee/locale”導入{ setUserLocale }；


匯出預設函數 WorkspaceLinks() {
  const { t } = useTranslate();
  const tolgee = useTolgee(["pendingLanguage"]);
  const 語言 = tolgee.getPendingLanguage();

  返回 （
    <pagecontent title="連結">
    {/**-- 用於選擇首選語言的 HTML 輸入 --*/}
      <div classname="flex w-full flex-col px-10">
        <p>選擇語言</p>
        



<p>上面的程式碼片段顯示了一個 HTML <strong><select></select></strong> 標籤，允許使用者選擇和在不同語言之間切換。 <strong>{t("hello")}</strong> 元素使用 Tolgee 的翻譯函數根據所選語言呈現「hello」鍵的值。 </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>最後，您可以更新整個應用程式的剩餘內容以支援語言更改，從而允許使用者以所選語言查看所有元件。 </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>Tolgee 還提供上下文翻譯功能，讓您可以直接在應用程式中翻譯字串，無論是在開發還是生產中，只需單擊文字並按住 Alt 或 Option 鍵即可。 </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>恭喜！您已成功完成本教學的專案。 </p>

<p>本教學的原始碼可在此處取得：</p>

<p>https://github.com/JanCizmar/dub-with-tolgee</p>


<hr>

<h2>
  
  
  結論
</h2>

<p>到目前為止，您已經學習瞭如何使用 Tolgee 將本地化添加到您的軟體應用程式、實現對多種語言的支持，以及如何在實際專案中實現語言無縫切換。 </p>

<p>Tolgee 是一個快速、以開發人員為中心的在地化平台，可讓您為內容提供上下文並在幾秒鐘內產生翻譯。它還支援多種 JavaScript 框架，包括 Vue、Angular 和 Svelte，並與 Figma 和 REST API 等工具整合以實現靈活性。 </p>

<p>如果您希望為使用者建立個人化體驗，Tolgee 是一個絕佳的選擇。請隨意為我們的 GitHub 儲存庫做出貢獻並加註星標，並加入我們的 Slack 社群與其他人聯繫並與團隊互動。 </p>
<p>感謝您的閱讀！ </p>


          </div>

            
        </pagecontent>

以上是我在地化了全球最好的短鏈平台的詳細內容。更多資訊請關注PHP中文網其他相關文章！