graphql - GraphQL 的多语言支持

Question

我正在尝试使用 GatsbyJS 静态站点生成器来重写我的站点。 用户可以通过 UI 更改语言。 有几个文件夹包含本地化文本数据:

- src - 数据 - zh - 文本1.json - 文本2.json ... -德 - 文本1.json - 文本2.json ... - es - 文本1.json - 文本2.json ...

如何根据当前语言获取数据？ GraphQL 查询应该是什么样子？

Answer 1

您可以使用社区gatsby-plugin-i18n .

您可以找到使用 markdownRemark 配置的示例:

// Add to gatsby-config.js
plugins: [
  {
      resolve: 'gatsby-plugin-i18n',
      options: {        
        langKeyDefault: 'en',
        useLangKeyLayout: false,
        markdownRemark: {
          postPage: 'src/templates/blog-post.js',
          query: `
          {
            allMarkdownRemark {
                edges {
                  node {
                    fields {
                      slug,
                      langKey,
                    }
                  }
                }
             }
          }
          `
        }
      }
    }
]

您可能希望根据 langKey 值过滤 graphql 查询:

allMarkdownRemark(filter: { fields: { langKey: { eq: "en" } } }) {
  edges {
    node {
      fields {
        slug,
        langKey,
        #your data
      }
    }
  }
}

查看showcase资源也可以帮助您。