npm 包 @gatsby-plugin-multilingual/shared 使用教程

前言

在国际化的前端开发过程中，为了方便地支持多语言，我们常常会使用一些工具来简化翻译和路由等操作。@gatsby-plugin-multilingual/shared 就是这样一个 npm 包，它能够帮助我们快捷地在 Gatsby 项目中支持多语言。本文将介绍该包的使用方法。

安装

在项目根目录下执行以下命令：

npm install @gatsby-plugin-multilingual/shared

使用

配置文件

在 Gatsby 项目的根目录下创建一个名为 gatsby-config.js 的文件，然后在该文件中添加以下代码：

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-multilingual",
      options: {
        // ...
      },
    },
  ],
  // ...
};

由于 @gatsby-plugin-multilingual/shared 是 @gatsby-plugin-multilingual 的依赖，我们需要先安装 @gatsby-plugin-multilingual，然后进行配置。在 options 中，我们可以设置多个属性，包括：

• defaultLanguage: 默认语言，必填
• languages: 支持的语言列表，必填
• redirect: 是否启用重定向，可选，其值为一个布尔类型，默认为 true

更多配置信息可以参考文档：https://github.com/chasegiunta/gatsby-plugin-multilingual#plugin-options

页面

在页面中使用 @gatsby-plugin-multilingual/shared 可以帮助我们实现不同语言之间的切换。

首先，在页面的开头引入 useI18n() 方法：

import { useI18n } from "@gatsby-plugin-multilingual/shared";

然后，通过 useI18n() 方法获取到当前语言并设置相应的路由。例如：

const { locale, setLocale } = useI18n();

其中，locale 表示当前的语言。setLocale(locale) 表示切换到指定的语言。

在实际开发中，我们常常需要将多语言文本保存在多个文件中，例如 i18n/en.json 和 i18n/zh-CN.json。我们可以使用 @gatsby-plugin-multilingual/shared 提供的 useTranslation() 方法来实现。

首先，在页面的开头引入 useTranslation() 方法：

import { useTranslation } from "@gatsby-plugin-multilingual/shared";

然后，通过 useTranslation() 方法获取翻译后的文本。例如：

const { t } = useTranslation();

其中，t(id) 表示获取指定 id 的文本。

接下来，我们看一个完整的示例：

import React from "react";
import { useI18n, useTranslation } from "@gatsby-plugin-multilingual/shared";

const IndexPage = () => {
  const { locale, setLocale } = useI18n();
  const { t } = useTranslation();

  return (
    <div>
      <header>
        <nav>
          <ul>
            <li>
              <button onClick={() => setLocale("en")}>EN</button>
            </li>
            <li>
              <button onClick={() => setLocale("zh-CN")}>中文</button>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h1>{t("hello_world")}</h1>
      </main>
    </div>
  );
};

export default IndexPage;

通过这个示例，我们可以了解到如何在 Gatsby 项目中使用 @gatsby-plugin-multilingual/shared 在多语言之间进行切换和获取多语言文本。

总结

本文详细介绍了 @gatsby-plugin-multilingual/shared 的使用方法，包含了配置方法和页面代码示例。通过使用 @gatsby-plugin-multilingual/shared，我们可以在 Gatsby 项目中方便地支持多语言，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c50