好用，就该早部署，如何实现前后端“一套方案”轻松搞定国际化？

前端

2024-01-27 19:59:34

我们都知道，国际化是一件如果你不在意它，它会让你很头疼，很痛苦的事情，像是一种习惯，还是早养成为好，等最后再去弄，你会感叹怎么这么多东西要翻译，所以一套整合好的国际化解决方案就很有用。

前端国际化利器：React-I18Next

React-I18Next 是一个强大而灵活的 React 国际化框架，拥有丰富的功能和广泛的社区支持。它具有以下优点：

支持多语言切换。 React-I18Next 允许您轻松地将应用程序翻译成多种语言，并可在运行时动态切换语言。
支持服务器端和客户端渲染。 React-I18Next 可以同时在服务器端和客户端进行渲染，确保应用程序在任何环境下都能正确显示翻译后的文本。
支持多种数据格式。 React-I18Next 支持多种数据格式，包括 JSON、YAML 和 XML，使您可以轻松地导入和导出翻译文本。
支持多个翻译后端。 React-I18Next 支持多种翻译后端，包括基于内存、数据库和 API，使您可以根据自己的需要选择合适的存储方式。

后端国际化利器：Django-Internationalization

Django-Internationalization 是一个 Django 国际化框架，它提供了一套完整的工具和 API，使您能够轻松地将 Django 应用程序翻译成多种语言。它具有以下优点：

支持多语言切换。 Django-Internationalization 允许您轻松地将 Django 应用程序翻译成多种语言，并可在运行时动态切换语言。
支持服务器端和客户端渲染。 Django-Internationalization 可以同时在服务器端和客户端进行渲染，确保 Django 应用程序在任何环境下都能正确显示翻译后的文本。
支持多种数据格式。 Django-Internationalization 支持多种数据格式，包括 JSON、YAML 和 XML，使您可以轻松地导入和导出翻译文本。
支持多个翻译后端。 Django-Internationalization 支持多种翻译后端，包括基于内存、数据库和 API，使您可以根据自己的需要选择合适的存储方式。

一套方案，轻松搞定国际化

现在，您已经了解了 React-I18Next 和 Django-Internationalization 这两个国际化框架。接下来，让我们将它们结合起来，实现一套完整的前后端国际化解决方案。

在前端使用 React-I18Next

在前端，我们可以使用 React-I18Next 来管理国际化。首先，我们需要安装 React-I18Next 和相关的依赖项：

npm install react-i18next i18next

然后，我们需要创建一个翻译文件，例如 en.json，并将其放在 src/i18n 目录下：

{
  "hello": "Hello, world!",
  "goodbye": "Goodbye, world!"
}

接下来，我们需要在 React 组件中使用 React-I18Next。例如，我们可以在 App.js 文件中使用 useTranslation 钩子来获取当前语言的翻译文本：

import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('hello')}</h1>
      <p>{t('goodbye')}</p>
    </div>
  );
};

export default App;

在后端使用 Django-Internationalization

在后端，我们可以使用 Django-Internationalization 来管理国际化。首先，我们需要在 Django 项目中安装 Django-Internationalization：

pip install django-internationalization

然后，我们需要在 Django 项目的设置文件中启用 Django-Internationalization：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_internationalization',
]

LANGUAGES = [
    ('en', 'English'),
    ('zh-hans', 'Chinese (Simplified)'),
]

接下来，我们需要创建一个翻译文件，例如 en.po，并将其放在 locale/en 目录下：

#: src/i18n/en.json:1
msgid "Hello, world!"
msgstr "你好，世界！"

#: src/i18n/en.json:2
msgid "Goodbye, world!"
msgstr "再见，世界！"

最后，我们需要在 Django 视图中使用 Django-Internationalization。例如，我们可以在 views.py 文件中使用 gettext 函数来获取当前语言的翻译文本：

from django.utils.translation import gettext as _

def index(request):
    context = {
        'hello': _('Hello, world!'),
        'goodbye': _('Goodbye, world!'),
    }
    return render(request, 'index.html', context)