我已经本地化了全球最好的短链平台

作为与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>

在终端中执行以下命令，并在提示使用 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>

接下来，在 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>

接下来，在 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>

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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241088271.jpg" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>最后，您可以更新整个应用程序的剩余内容以支持语言更改，从而允许用户以所选语言查看所有组件。</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241165470.jpg" class="lazy" alt="I have localized the best short-linking platform in the world"></p>

<p>Tolgee 还提供上下文翻译功能，让您可以直接在应用程序中翻译字符串，无论是在开发还是生产中，只需单击文本并按住 Alt 或 Option 键即可。</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173093241362494.jpg" 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>


          

            
        </pagecontent>

以上是我已经本地化了全球最好的短链平台的详细内容。更多信息请关注PHP中文网其他相关文章！