简介
gatsby-source-strapi-localized 是一个适用于 GatsbyJS 的 npm 包，它允许你将 Strapi 管理的本地化内容源导入到你的 Gatsby 网站中。该包支持多语言的内容，因此可以轻松地创建多语言、本地化的网站。在本文中，我们将学习如何使用 gatsby-source-strapi-localized 包来创建多语言网站。
安装
首先，你需要在你的 Gatsby 网站项目中安装 gatsby-source-strapi-localized 包。你可以使用 npm 或 yarn 包管理器来安装，如下所示：
--- ------- ------------------------------ - -- ---- --- ------------------------------
使用
安装成功后，我们可以在 Gatsby 配置文件中启用 gatsby-source-strapi-localized 插件。在 gatsby-config.js 文件中，我们需要配置 Strapi 的 GraphQL 端点，并在插件列表中启用 gatsby-source-strapi-localized 插件。示例如下所示：
-- ----------------
-------------- - -
------------- -
-- --- --------
--
-------- -
-- --- ----- -------
-
-------- ---------------------------------
-------- -
------- ------------------------
------------- -
----------
-----------
--
----------- -----
--
--
--
--在上面的示例中，我们配置了一个名为 gatsby-source-strapi-localized 的插件，并将其启用。我们还指定了 Strapi API 的 URL、内容类型和查询限制。这里的内容类型指你要导入到 Gatsby 的内容类型，比如上面的 article 和 category。
当我们重新开发和构建 Gatsby 网站时，Gatsby 将向未来的 GraphQL 数据层中添加一个新的节点 gatsbyStrapiLocalized。该节点将包含有关 Strapi API 中导入的内容类型数据的所有字段和本地化信息。
在 Gatsby 查询中使用该节点时，你必须指定要从该节点的哪个字段进行查询。示例如下所示：
-- ------- -----
------ ----- ----- - --------
-
------------------------------- -
----- -
---- -
------- -
-----
-----------
----
-
------
-
-
-
-
--在上面的示例中，我们使用 allGatsbyStrapiLocalizedArticle 来查询 Strapi 中的所有文章，并指定要查询的字段。每个查询结果包含了 Strapi 的文章数据以及该数据的语言代码。
示例应用
以下是一个简单的多语言网站示例应用，它使用 gatsby-source-strapi-localized 对 Strapi 中的多语言内容进行导入和查询。
-- --------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ------- - ---- --------------------- -- -- ------------------ ----- ------- ---- -------
----- -------- - -- ---- -- -- -
----- - ------------- - - ---------- -- -- ------- ---- ---------
----- -------- - -------------------------------------------
------ -
----------------
-------------------- --- ------- -------- --- -- ------------- ------ ---
----
---------------- ----- - -------- ------ - -- ------ -- -
------ -
--- ------------
------------------------
----------------------------
---------------------
---------------
-----
--
---
-----
-----------------
--
--
------ ----- ----- - --------
-
------------------------------- -
----- -
---- -
------- -
-----
-----------
----
-
------
-
-
-
-
--
------ ------- ----------- --------------- - -------- -------- -- -- -------- - -- --------------- - -------- ---------- -
在上面的示例中，我使用了 gatsby-plugin-intl 插件提供的 useIntl hook 来获取翻译函数，并在组件内部使用该函数来渲染页面上的文本内容。在下面的跟随的示例应用中，我们将更加深入地了解 gatsby-plugin-intl 插件。
使用 gatsby-plugin-intl 进行国际化
gatsby-source-strapi-localized 提供了多语言数据源的导入和查询，并以 GraphQL 数据结构的方式提供了这些数据，用于在 Gatsby 网站上进行多语言和本地化展示。
但是，如何在页面和组件中使用这些内容的翻译和本地化呢？答案就是 gatsby-plugin-intl 插件！gatsby-plugin-intl 插件可以帮助你自动化翻译你的 Gatsby 网站，并基于不同的区域设置（即语言环境）本地化你的 Gatsby 线上应用。
下面是如何使用 gatsby-plugin-intl 插件对上面的示例应用进行国际化的介绍。
安装
首先，你需要在你的 Gatsby 网站项目中安装 gatsby-plugin-intl 包。你可以使用 npm 或 yarn 包管理器来安装，如下所示：
--- ------- ------------------ - -- ---- --- ------------------
配置
在 Gatsby 配置文件中添加 gatsby-plugin-intl 插件，并配置默认和支持的语言、语言文件目录和翻译文件。示例如下所示：
-- ----------------
-------------- - -
------------- -
-- --- ---- --------
--
-------- -
-- --- ----- -------
-
-------- ---------------------
-------- -
----- ---------------------------
---------- ------ ------ -- -------
---------------- ----- -- ----
--------- -----
--
--
--
--在上面的示例中，我们配置了 gatsby-plugin-intl 插件，并使用 options 属性配置插件的基本设置，如语言、语言文件目录和默认语言。我们还开启了自动重定向（即重定向不存在或无效语言请求到默认语言）的选择。
使用
完成插件的基本配置后，我们就可以在页面和组件中使用翻译和本地化内容。我们可以使用 useIntl hook 来访问和使用国际化和本地化信息。在之前的示例应用中，我们已经对 useIntl hook 进行了介绍。
最后，我们需要为每个语言（包括默认语言）在项目的 locales 目录下创建一个文件，以保存该语言的翻译和本地化内容。示例如下所示：
-- --------------- - -------- -------- -- -- -------- - -- --------------- - -------- ---------- -
在上面的示例中，我们分别创建了英语（默认语言）和中文的国际化文件，并指定了相应的翻译。
总结
在本文中，我们学习了如何使用 gatsby-source-strapi-localized 包将 Strapi 管理的本地化内容源导入到 Gatsby 网站中。我们还介绍了如何使用 gatsby-plugin-intl 插件进行国际化和本地化。这些工具和技术可用于创建多语言、本地化的 Gatsby 网站。
通过本文的学习，相信你已经掌握了如何使用 gatsby-source-strapi-localized 包和 gatsby-plugin-intl 插件，从而可以实现一个真正的多语言、本地化的 Gatsby 网站，并向全世界的用户提供最佳体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600668f4d9381d61a3540e51