使用 Gatsby 和 Strapi 实现国际化的最佳方式

Posted 2023-03-08

【中文标题】使用 Gatsby 和 Strapi 实现国际化的最佳方式

【英文标题】：Best way for internationalization with Gatsby and Strapi

【发布时间】：2020-11-27 19:48:51

【问题描述】：

在我的公司，我们正在使用 Gatsby 框架和 Strapi 无头 CMS 构建一个静态网站。

我的问题是如何处理 i18n？

首先，我知道这是一个困难的问题，没有一个答案，而是根据上下文的不同答案。所以，我会继续我的研究，我希望你能帮助我结束这个话题。 :)

第一个思路，最简单的，我们来搜索一个插件！

有一个：gatsby-source-strapi-localized

不幸的是，它没有维护，所以，我不会使用它。 :'(

好的，第二件事，让我们看看 Strapi 的建议！

Strapi 目前没有 i18n 功能，计划于 2020 年底在roadmap 上发布。

但是有一种解决方法，在字段末尾使用后缀： medium article（同理，你也可以直接给你的Types添加后缀）

所以，现在我们有了字段或类型的后缀，让我们进入第三部分，盖茨比！

这是一场噩梦。呵呵

实际上，有不同的解决方案可以解决这个问题，但我没有找到我的解决方案。 :'(

我发现了这个article，关于新的 i18n 盖茨比主题。我下载了启动器以尝试了解它是如何工作的。 我的理解是，由于 createPage 功能，博客页面会以 2 种不同的语言自动生成。创建了 2 个 mdx 文件来存储数据，LocalizedLink 组件用于重定向。

这很有趣，但它不适合我的问题。所以，让我们告诉你我的想法：

剧透警告！ : 我不熟悉 i18n 的 React 包，我今天早上才发现它们，这就是为什么我看不到答案的原因^^'

第一件事是“如何创建好的网址？”为此，我必须做出选择：

在我的页面部分创建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个文件，只用于查询，页面的其余部分都是一样的：/

所以，问题是：我怎样才能为每页生成 2 个页面，其中包含良好的 URL 和良好的查询？（你有 2 小时 è__é....XD）

createPage 函数允许您在上下文中传递变量，这可以帮助我进行查询。我也可以修改路径，这可以帮助我获取 URL。但是文件夹 pages 已经被 Gatsby 处理了……我无法修改进程。

有人想澄清这个话题吗？ :)

【问题讨论】：

我们也有这个问题。我们一解决就写在这里。

@IlyasAssainov 有什么解决办法吗？

如果不想在 /pages 中创建多个 lang 页面，则需要走 gatsby-node 路线并自己创建页面。这也是所有 i18n 插件的功能。

【参考方案1】：

我看到这个话题有点热门，我从来不写答案，让我们修复它！

我不知道它如何与新版本的strapi一起工作，但有我们针对strapi 3.0.1的解决方案：

每个页面在strapi中有两种单一类型：

首页 Homepage_En 关于 About_En ...

当然，它们具有相同的架构。

在我的 gatsby pages 文件夹中，我们创建了两个子文件夹：

法国 zh

在每个文件夹中，您都有所有页面，但是，诀窍是：它们在这里只是为了从strapi 中获取正确的数据，让我们看一个示例：

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 页面的组件（当然还有很多子组件），位于 components 文件夹中。 p>

因此，在那之后，您只需编写一次代码，并使用正确的道具。

它并不完美，但它对我有用，而且我们没有重复的逻辑代码:)

还有一个提示：小心你的图片数组，两种语言之间经常有相同的，使用集合类型而不是上传两次可能会很有趣。

如果其他人有想法，请不要犹豫，写下你的建议；）

祝大家有美好的一天，别担心，代码快乐！

【讨论】：

我正要尝试这种模式来处理语言，你能告诉我如何切换语言吗？谢谢

嗨@FarhanFarooq，你是什么意思？使用该模式，您将拥有myUrl.com/fr 和myUrl.com/en 这是您的问题吗？