How to use i18n to gatsby?

在Gatsby中实现国际化（i18n）可以通过多种方式进行，但最常见和推荐的方法是使用 gatsby-plugin-react-i18next 插件。这个插件基于 react-i18next 库，提供了强大的国际化支持，包括多语言路由和服务器端语言检测。以下是如何在Gatsby项目中使用该插件的步骤：

第一步：安装必要的包

首先，您需要安装 gatsby-plugin-react-i18next 和 i18next 本身，还有 react-i18next 库。

bash
npm install gatsby-plugin-react-i18next i18next react-i18next

第二步：配置 gatsby-config.js

然后在您的 gatsby-config.js 文件中添加和配置 gatsby-plugin-react-i18next。

javascript
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
        languages: [`en`, `de`], // List of supported languages
        defaultLanguage: `en`, // Default language
        siteUrl: `https://www.example.com`,
        i18nextOptions: {
          interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
          },
          keySeparator: false,
          nsSeparator: false,
        },
        pages: [
          {
            matchPath: '/:lang?/blog/:uid',
            getLanguageFromPath: true,
            excludeLanguages: ['es'],
          },
        ],
      },
    },
  ],
};

第三步：添加语言文件

创建语言 JSON 文件，通常放置在 ./locales 文件夹内。例如，您可以有 en/translation.json 和 de/translation.json。

json
// en/translation.json
{
  "hello": "Hello"
}

// de/translation.json
{
  "hello": "Hallo"
}

第四步：使用 useTranslation 钩子

在您的组件中，您可以使用 useTranslation 钩子来引入翻译功能。

javascript
import React from "react";
import { useTranslation } from "react-i18next";

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

  return <h1>{t('hello')}</h1>; // Will display "Hello" or "Hallo" based on current language
};

export default MyComponent;

第五步：语言切换

您可以添加一个切换语言的功能，允许用户手动选择他们偏好的语言。

javascript
import React from "react";
import { useI18next } from "gatsby-plugin-react-i18next";

const LanguageSwitcher = () => {
  const { languages, changeLanguage } = useI18next();

  return (
    <div>
      {languages.map((lang) => (
        <button key={lang} onClick={() => changeLanguage(lang)}>
          {lang}
        </button>
      ))}
    </div>
  );
};

export default LanguageSwitcher;

通过上述步骤，Gatsby 网站就能够支持多语言了，实现国际化。这对于提升网站的全球可访问性非常有帮助。