Gatsby：从 contentful 动态加载 i18n 内容

Question

我们有一个使用 Gatsby 且内容丰富的静态站点。现在我们想要支持多语言，并使用来自 contentful 的本地化内容。我能够填充 graghql 查询：

query frontpageTeaser($lang: String) {
    contentfulFrontpage(node_locale: { eq: "zh-CN" }) {
      myArticalContent
      ...
    }
  }

此查询可以从 contentful 加载中文内容，如果更改为 node_locale: { eq: "en-US" }，则可以加载英文内容。

现在的问题是：我们要支持语言切换，这样切换语言的时候graphql会加载相应的本地化内容。

我们正在使用 gatsby-plugin-react-i18next，它有这个很棒的功能：

Support multi-language url routes in a single page component. You don’t have to create separate pages such as pages/en/index.js or pages/es/index.js.

像http://localhost:8000/zh-CN/这样的页面确实从本地加载中文/locales/zh-CN/translation.json，但是切换语言时如何加载本地化内容？

Graphql 似乎提供 page query，所以我添加了 gatsby-node.js:

exports.createPages = async function ({ actions, graphql }) {
  actions.createPage({
    path: '/zh-CN/',
    component: require.resolve(`./src/pages/index.js`),
    context: { lang: 'zh-CN' },
  })
}

并在页面上使用：

export const query = graphql`
  query frontpageTeaser($lang: String) {
    contentfulFrontpage(node_locale: { eq: $lang }) {
      myArticalContent
    }
  } 
`

但它总是 returns en。请帮忙:)。谢谢。

Answer 1

这可能是一个复杂的开关。有一个示例项目已经用另一个CMS + Gatsby顺利完成了，here。

代码库中具体需要指出的地方：

您使用的语言环境的配置，here
动态 link 取决于活动区域，here
让您的整个应用了解活动语言环境的上下文，here
实际在高阶组件中实现语言环境上下文提供程序 Layout、here
gatsby-node.js 中还有一些魔法可以更新您一直在做的事情！你可以发现，here.

希望对您有所帮助:)

Answer 2

在获得更好的解决方案之前，这个有效：

// @todo gatsby plugin https://www.gatsbyjs.org/packages/gatsby-plugin-react-i18next/
// this plugin provides current language `context.i18n.language`, which not know how to pass it to graphql page query.
// This snippet moves it one-level up to `context.locale`.
// @todo need to explore a better solution.
exports.onCreatePage = ({ page, actions }) => {
  const { createPage, deletePage } = actions

  if (!page.context.locale) {
    const language = page.context.i18n.language
    const locale = language === 'en' ? 'en-US' : language
    deletePage(page)

    createPage({
      ...page,
      context: {
        ...page.context,
        locale,
      }
    })
  }
}

Gatsby：从 contentful 动态加载 i18n 内容

Gatsby: load i18n content dynamically from contentful

contentful

graphql

gatsby