当前位置：首页 > 文章列表 > 文章 > 前端 > “Zenith”——一款使用 React、Tolgee 和 Tailwind CSS 的宁静冥想应用程序

“Zenith”——一款使用 React、Tolgee 和 Tailwind CSS 的宁静冥想应用程序

来源：dev.to 2024-11-04 19:12:31 0浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《“Zenith”——一款使用 React、Tolgee 和 Tailwind CSS 的宁静冥想应用程序》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

在这篇文章中，我很高兴与大家分享 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 软件包，因此请选择最适合您的一个。

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

第 2 步：在您的应用程序中设置 tolgee

现在，在您的应用程序中初始化 tolgee。首先从 tolgee 库导入必要的组件，然后将您的应用程序包装在 tolgee 的 tolgeeprovider 中。该提供商在您的应用程序中启用 tolgee 的翻译和本地化功能。

在您的主应用程序文件（例如 app.js 或 index.js）中，设置 tolgeeprovider，如下所示：

import { tolgeeprovider } from "@tolgee/react";
import { devtools } from "@tolgee/react";
import app from "./app";

const tolgee = tolgee({
  apikey: process.env.react_app_tolgee_api_key,
  apiurl: "https://app.tolgee.io",
  defaultlanguage: "en",
});

const root = () => (
  <tolgeeprovider tolgee={tolgee}>
    <devtools /> {/* enables in-context editing for translations */}
    <app />
  </tolgeeprovider>
);

export default root;

第 3 步：添加翻译

tolgee 为每个翻译使用唯一的密钥，可以在整个应用程序中引用。您可以通过 tolgee 平台或直接在代码中管理您的翻译。

添加文本进行本地化的示例

使用 t 组件或 tolgee 的 usetranslate 钩子来定义需要翻译的文本。以下是您在组件中使用它们的方法：

使用组件

import { t } from "@tolgee/react";

function welcome() {
  return <h1><t keyname="welcome_message">welcome to zenith</t></h1>;
}

在 tolgee 平台中，您可以将关键的welcome_message映射到其翻译，例如英语的“welcome to zenith”，以及其他不同语言的等效短语。

使用 usetranslate 钩子

对于更复杂的场景，usetranslate 钩子很有帮助。

import { useTranslate } from "@tolgee/react";

function Welcome() {
  const { t } = useTranslate();

  return <h1>{t("welcome_message", "Welcome to Zenith")}</h1>;
}