Question

我们有一个使用Gatsby的静态网站，内容丰富。现在，我们要支持多语言，内容来自本地化。我可以填充graghql查询：

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

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

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

我们正在使用gatsby-plugin-react-i18next，它具有以下强大功能：

在单个页面组件中支持多语言url路由。您无需创建单独的页面，例如pages / en / index.js或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
    }
  } 
`

但是它总是返回en。请帮助：）。谢谢。

Answer 1

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

要在代码库中指出的特定位置：

配置您使用的语言环境here
取决于活动语言环境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,
      }
    })
  }
}

盖茨比：从内容动态加载i18n内容

2 个答案: