网络本地化的痛点和解决方案

这是关于多语言支持的问题以及一些解决方案和痛点：

常见解决方案

处理多语言通常采用键值对的方式，所谓的 "loca keys" 是文本的标识符，"value" 则是本地化的文本。

定义键和值

首先，你需要在某处定义键和值，比如在一个 JSON 文件中：

{
  "welcome": "Welcome to my website!",
  "hello": "Hello, {{name}}!"
}

上面可能是你的 en.json 文件，同一文件夹下可能有一个 it.json，其中的键相同但值不同：

{
  "welcome": "Benvenuto nel mio sito!",
  "hello": "Ciao, {{name}}!"
}

你甚至可以更进一步，为每种语言创建不同的文件夹，然后有多个 JSON 文件，这样你可以将键拆分到不同的文件中，更好地组织。但确保文件中没有缺失的键！

使用键

有了键和值后，你可以在代码中使用它们。使用 react-i18next，你可以使用 useTranslation 钩子获取 t 函数来进行翻译。

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      {t('welcome')}
      {t('hello', { name: 'Leonardo' })}
    </div>
  );
};

t 函数将返回给定键的值，如果将对象作为第二个参数传递，它将用传递的值替换占位符。

痛点

处理多语言的方式是最快速、最简单的，但它也存在一些缺点。

以下是我个人经历的一些痛点以及我尝试解决它们的方法。

难以找到准确的词汇

在小团队中，这还是可以管理的，通常是前端开发人员处理翻译，当有变化时更新键和值也不是什么大问题。

但在大型项目中或者有专门负责翻译的人员时情况可能不同，特别是当谈论的不是开发人员或者一般无法阅读代码的人。

你可以发送 JSON 文件并要求进行翻译，但另一个人可能会缺乏上下文，不容易理解文本的使用场景。

如果能够直接在网站上编辑翻译，而无需处理代码，这该有多好呢？

你是否见过这个？这是一个很酷的功能，允许你直接在浏览器中编辑页面的内容，而无需打开代码编辑器。

但是，显然这只是在你的浏览器中进行的。

有些工具可以帮助你在本地化的文本上做类似的事情，比如我最近发现的 Tolgee（而且还是开源的，额外加分！）

如果你使用它来处理本地化，它提供了一个功能，通过按住 Alt 键并单击要编辑的文本，可以直接在网站上编辑翻译文本。它会打开一个模态框，你可以编辑文本并保存。

我真希望我早点知道这个！

存储翻译

将所有翻译存储在 JSON 文件中易于管理，但如果你希望对翻译有更好的概览呢？

我的方法是确保 JSON 文件的结构始终相同，这样我就可以通过查看行号轻松找到缺失的键，但这听起来并不是一个十全十美的解决方案！

前端还是后端？

你可能会发现有一些文本在前端翻译，有一些在后端翻译。

这在你是唯一负责项目的情况下是可以工作的，但如果有一个团队，你可能希望有一个地方来统一管理所有翻译。

几种可能的方法：

A）全部在前端：静态文本在你的代码中，每次后端显示文本时，可以传递一个键，这样前端将负责翻译。

B）全部在后端：前端有键但不知道如何翻译。匹配键和值的定义文件都存储在后端，需要时发送给前端，可以在应用程序启动时或按需发送。

C）全部在外部服务：类似于前一种方法，但不是在你自己的后端应用中处理翻译，而是使用外部服务来处理所有事务。优势在于可以遵循专门设计的翻译工作流程。

每种方法都有适用的场景，具体要根据项目需求和团队情况来决定最合适的方式。

我正在参与2023腾讯技术创作特训营第四期有奖征文，快来和我瓜分大奖！