立即迁移到 Netlify

Netlify 宣布 Gatsby Cloud 的下一次迭代。 了解更多

Gatsby 的本地化和国际化 (i18n)

示例

  • 使用 i18n

为用户提供符合其语言和文化的定制内容是优秀用户体验的一部分。当你努力根据用户的地理位置调整网页内容时,这种做法被称为国际化 (i18n)。

国际化存在两个难点

  • 内容存储和工作流程。 与内部或外部翻译人员协调,将现有和新增内容翻译成所需语言可能非常耗时。此外,在内容发布流程中增加另一个审批者,如果没有仔细设计工作流程,可能会减慢速度。

  • 显示、模板和路由。 至少,国际化意味着用户必须被重定向到一个子域(例如 fr.example.com/blog)或路径前缀(例如 example.com/fr/blog)。此外,国际化工作还涉及到某些语言独有或不包含在某些语言中的部分或页面的逻辑。

本指南简要介绍增强 Gatsby 项目以实现国际化的选项。

选择一个包

市面上有几种 React i18n 包。一些选项包括 react-intl、社区 Gatsby 插件react-i18next。选择包时需要考虑几个因素:您是否已经在其他项目中使用过类似的包?该包在多大程度上满足用户的需求?您或您的团队是否已经熟悉某个特定的包?该包是否文档齐全且维护良好?

gatsby-plugin-i18n

此插件可帮助您将 react-intli18next 或任何其他 i18n 库与 Gatsby 一起使用。此插件不翻译或格式化您的内容,而是为每种语言创建路由,使 Google 更容易找到您网站的正确版本,并在需要时指定备用的 UI 布局。

命名格式遵循 .languageKey.js 文件和 /languageKey/path/fileName 的 URL。

示例

文件 - src/pages/about.en.js

URL - /en/about

GitHub 上的 gatsby-plugin-i18n

react-intl

React-intl 是 FormatJS i18n 库集的一部分,支持 150 多种语言。它基于 JavaScript 的 国际化 API,提供增强的 API 和组件。React-intl 使用 React context 和 HOC(高阶组件)来提供翻译,允许您根据需要动态加载语言模块。对于不支持基础 JavaScript i18n API 的旧浏览器,也提供了 polyfill 选项。

有关 react-intl 的 API组件(包括 演示)的更详细信息,请参阅 文档

react-i18next

React-i18next 是一个基于 i18next 框架的国际化库。它使用组件来确保翻译正确渲染或在用户语言更改时重新渲染您的内容。

React-i18next 比其他选项更具扩展性,拥有各种插件、实用程序和配置。常见的插件允许检测用户的语言或添加额外的本地缓存层。其他选项包括缓存、一个从服务器加载翻译的后端插件,或使用 webpack 打包翻译。

该框架还对 React suspense API 提供了实验性支持,并支持稳定版本的 React hooks。

其他资源

立即开始构建,在 Netlify!
在 GitHub 上编辑此页面
©2025Gatsby, Inc.