reactjs - Gatsby (Gatsby)和斯特拉皮(Strapi)实现国际化的最佳途径

Question

在我公司，我们正在使用Gatsby框架和Strapi headless CMS构建静态网站。
我的问题是如何处理i18n？
首先，我知道这是一个棘手的问题，没有一个答案，但是取决于上下文，答案是不同的。因此，我将继续您的研究，希望您能帮助我完成本主题。 :)
最简单的构想，让我们搜索一个插件!
有一个:gatsby-source-strapi-localized
不幸的是，它没有被维护，因此，我将不使用它。 :'(
好吧，第二个，让我们看看Strapi的建议!
Strapi目前没有i18n功能，计划在2020年底在roadmap上使用。
但是有一种解决方法，在字段的末尾使用后缀:
medium article(基于相同的想法，您也可以直接在类型后缀中添加)
因此，现在我们有了字段或类型的后缀，让我们转到第三部分，即Gatsby!
这是一场噩梦。 XD
实际上，有不同的解决方案可以解决该问题，但是我没有找到我的。 :'(
我找到了这个article，关于新的i18n gatsby主题。我下载了该入门工具以尝试了解其工作原理。
据我了解，多亏了 createPage 函数，博客页面自动以两种不同的语言生成。创建了2个mdx文件来存储数据，并将 LocalizedLink 组件用于重定向。
这很有趣，但是并不能很好地解决我的问题。所以，让我们告诉您我的想法:
扰流板警报! :我不熟悉i18n的React软件包，我今天早上才发现它们，这就是为什么也许我看不到答案的原因^^'
第一件事是“如何创建良好的URL？”为此，我必须选择:

在页面的部分中创建2个文件夹，其中一个FR和一个EN，它将添加到我的URL(mySite.org/FR)中

使用 gatsby-plugin-i18n ，它允许您创建index.fr.js和index.en.js来生成mySite.org/fr或mySite.org/en

之后，在每个文件中，我可以自定义查询，以良好的语言询问数据:

allStrapiHomePage {
  edges {
    node {
      mainBanner {
        title_lang
      }
    }
  }
}

或者 :

allStrapiHomePage_lang {
  edges {
    node {
      mainBanner {
        title
      }
    }
  }
}

对于重定向，我可以检查上下文以了解我在哪个页面中。
我不喜欢的事情是，每页有2个文件，仅用于查询，其余页面是相同的:/
因此，问题是:如何通过良好的URL和良好的查询每页生成2个页面？ (您有2个小时的时间____.... XD)
createPage 函数允许您在上下文中传递变量，这可以帮助我进行查询。我也可以修改路径，这可以帮助我获取URL。但是Gatsby已经处理了文件夹 页面 ...我无法修改该过程。
有人有一个想法可以澄清这个话题吗？ :)

Answer 1

我看到这个主题有点流行，而且我从不写答案，让我们解决这个问题!
我不知道它如何与新版本的trapi一起使用，但是我们为stradi 3.0.1提供了解决方案:
每页在trapi中有两种单一类型:

主页

主页_zh

关于

关于_en

...

它们当然具有相同的架构。
在我的gatsby pages文件夹中，我们创建了两个子文件夹:

fr

和

在每个文件夹中，您具有所有页面，但是窍门是:它们仅在这里用于从stradi中获取正确的数据，让我们来看一个示例:
fr/about.js:

import React from "react"
import { graphql } from "gatsby"
import _get from "lodash/get"
import AboutPage from "../../components/pageComponents/About.js"

export default function About({ data }) {
  const BannerAbout = _get(
    data,
    "allStrapiAbout.edges[0].node.Banner.BackgroundImage.childImageSharp.fluid"
  )
  const TitleBannerAbout = _get(
    data,
    "allStrapiAbout.edges[0].node.Banner.Title"
  )
  const DescriptionBannerAbout = _get(
    data,
    "allStrapiAbout.edges[0].node.Banner.Description"
  )

  return (
    <AboutPage
      BannerAbout={BannerAbout}
      TitleBannerAbout={TitleBannerAbout}
      DescriptionBannerAbout={DescriptionBannerAbout}
    />
  )
}

export const query = () => graphql`
  query {
    allStrapiAbout {
      edges {
        node {
          Banner {
            Title
            Description
            BackgroundImage {
              childImageSharp {
                fluid(maxWidth: 1920) {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
              }
            }
          }
        }
      }
    }
  }
`

对于英语部分也有相同的想法:
zh/about.js:

import React from "react"
import { graphql } from "gatsby"
import _get from "lodash/get"
import AboutPage from "../../components/pageComponents/About.js"

export default function About({ data }) {
  const BannerAbout = _get(
    data,
    "allStrapiAboutEn.edges[0].node.Banner.BackgroundImage.childImageSharp.fluid"
  )
  const TitleBannerAbout = _get(
    data,
    "allStrapiAboutEn.edges[0].node.Banner.Title"
  )
  const DescriptionBannerAbout = _get(
    data,
    "allStrapiAboutEn.edges[0].node.Banner.Description"
  )

  return (
    <AboutPage
      BannerAbout={BannerAbout}
      TitleBannerAbout={TitleBannerAbout}
      DescriptionBannerAbout={DescriptionBannerAbout}

    />
  )
}

export const query = () => graphql`
  query {
    allStrapiAboutEn {
      edges {
        node {
          Banner {
            Title
            Description
            BackgroundImage {
              childImageSharp {
                fluid(maxWidth: 1920) {
                  ...GatsbyImageSharpFluid_withWebp_tracedSVG
                }
              }
            }
          }
        }
      }
    }
  }
`

如您所见，他们在调用相同的React组件，这是组件文件夹中整个About页面的组件(当然有很多子组件)。
因此，在那之后，您只需要编写一次带有正确 Prop 的代码即可。
它不是完美的，但是对我有用，而且我们没有重复的逻辑代码:)
更多提示:小心处理图像数组，两种语言之间经常会出现相同的情况，为此使用集合类型而不是将它们上载两次可能会很有趣。
如果其他人有想法，请毫不犹豫地写下您的提示;)
祝大家有美好的一天，不用担心，代码开心!