\'Zenith\' – 一款帶有 React、Tolgee 和 Tailwind CSS 的寧靜冥想應用程序

在這篇文章中，我很高興與大家分享Zenith，這是一款冥想應用程序，旨在透過精選的舒緩聲音、用戶友好的介面和支援幫助用戶找到平靜和注意力對於多種語言。我將介紹該應用程式的核心功能、技術堆疊、如何設定以及在 React 中整合 tolgee。

示範

特點

• 舒緩的聲音：使用者可以從各種專為增強冥想效果而定制的平靜聲音中進行選擇。
• 在地化：Tolgee 的整合使世界各地的用戶都可以用自己的母語體驗該應用程式。
• 響應式設計：Tailwind CSS 可實現跨裝置的流暢、行動友善的體驗。
• 使用者友善的介面：簡單的佈局優先考慮可訪問性和易於導航。

技術堆疊

• React：應用程式的前端使用 React，非常適合創建流暢的互動式 UI。
• Tolgee：Tolgee 簡化了多語言支持，讓您可以輕鬆地為全球受眾提供在地化服務。
• Tailwind CSS：Tailwind 透過實用優先的方法幫助快速建立乾淨、響應式的設計。

開始使用 Zenith

有興趣嘗試嗎？以下是如何讓應用程式在您的電腦上運行。

克隆儲存庫：

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

安裝依賴項：

npm install

運行應用程式：

npm run dev

然後，在瀏覽器中造訪 http://localhost:5173 來探索該應用程式。

使用天頂

• 使用語言切換按鈕選擇您的首選語言。
• 瀏覽可用的舒緩聲音並點擊播放。
• 使用計時器設定會話的持續時間。
• 享受你的冥想課程。

Tolgee 在 React 中的集成

文件

托爾吉是什麼？

Tolgee 是一個開源本地化和翻譯平台，可以與包括 React 在內的各種框架順利整合。它提供了應用內翻譯工具，允許開發者快速創建多語言應用程式並輕鬆管理翻譯。

如何將 Tolgee 整合到 React 應用程式中

Tolgee 透過提供簡單的設定和強大的工具來直接在應用程式介面中管理翻譯，從而簡化了在地化。這是將 Tolgee 與 React 應用程式整合並使用它來創建多語言體驗的逐步指南。

第1步：安裝Tolgee

首先，將 Tolgee 函式庫加入您的 React 專案中。 Tolgee 提供 NPM 和 Yarn 軟體包，因此請選擇最適合您的一個。

git clone https://github.com/tolgee/tolgee-platform.git
cd demos/meditation-app

第 2 步：在您的應用程式中設定 Tolgee

現在，在您的應用程式中初始化 Tolgee。首先從 Tolgee 庫導入必要的元件，然後將您的應用程式包裝在 Tolgee 的 TolgeeProvider 中。該提供者在您的應用程式中啟用 Tolgee 的翻譯和在地化功能。

在您的主應用程式檔案（例如 App.js 或 index.js）中，設定 TolgeeProvider，如下所示：

npm install

第 3 步：新增翻譯

Tolgee 為每個翻譯使用唯一的金鑰，可以在整個應用程式中引用。您可以透過 Tolgee 平台或直接在程式碼中管理您的翻譯。

新增文字進行本地化的範例

使用 T 元件或 Tolgee 的 useTranslate 鉤子來定義需要翻譯的文字。以下是您在組件中使用它們的方法：

使用 ;組件

npm run dev

在 Tolgee 平台中，您可以將關鍵的welcome_message映射到其翻譯，例如英語的“Welcome to Zenith”，以及其他不同語言的等效短語。

使用 useTranslate 鉤子

對於更複雜的場景，useTranslate 鉤子很有幫助。

npm install @tolgee/react
# or
yarn add @tolgee/react

第 4 步：使用 Tolgee DevTools 進行上下文編輯

Tolgee 的上下文編輯是一個主要優勢 - 它允許您直接在應用程式中編輯翻譯。啟用 DevTools 後，您可以點擊任何文字來即時編輯其翻譯，從而簡化翻譯工作流程。

要存取 DevTools，請確保您已將應用程式包裝在 中（如上所示）並且處於開發模式。這樣您就可以調整或新增翻譯，而無需來回 Tolgee 平台。

總結

Zenith 匯集了舒緩的聲音、用戶友好的介面和多語言支持，提供真正易於理解的冥想體驗。透過利用 React 等前端工具、Tailwind CSS 進行響應式設計以及 Tolgee 進行無縫本地化，Zenith 旨在幫助用戶跨語言和裝置找到平靜。

無論您是希望了解更多在地化知識的開發人員，還是只是對冥想應用程式感興趣的人，我希望這篇文章具有洞察力。請隨意嘗試DEMO，看看Zenith如何幫助您找到自己的平靜。

快樂編碼，快樂冥想！

以上是\'Zenith\' – 一款帶有 React、Tolgee 和 Tailwind CSS 的寧靜冥想應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！