Gatsby 主题 i18n 降价在切换时不会改变语言

Question

我正在使用两个插件，gatsby-theme-i18n 和 gatsby-theme-i18n-react-i18next

我认为gatsby-theme-i18n-react-i18next 工作正常。但是gatsby-theme-i18n对于markdown文件不起作用，可能我理解得不够好

我可以更改 Layout、Template (gatsby-theme-i18n-react-i18next) 的语言，但我无法更改 markdowns (gatsby-theme-i18n) 的语言

我在 en // th 之间切换以更改语言

gatsby-config.js

...
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `products`,
    path: `${__dirname}/src/products/`,
  },
},
{
  resolve: `gatsby-plugin-mdx`,
  options: {
    extensions: [`.md`, `.mdx`],
  }
},
{
  resolve: `gatsby-theme-i18n`,
  options: {
    configPath: require.resolve(`./i18n/config.json`),
    defaultLang: `en`,
  }
},
...

gatsby-node.js

const path = require('path')
exports.createPages = async ({ actions: { createPage }, graphql, reporter }) => {
  const productTemplate = path.resolve('src/templates/Product.js')
  const result = await graphql(`{
    product: allFile( filter: {
      sourceInstanceName: { eq: "products" } 
      ext: { eq: ".md" } 
    } ) {
      nodes {
        childMdx {
          frontmatter {
            slug
          }
        }
      }
    }
  }`)
  if (result.errors) {
    reporter.panicOnBuild(result.errors)
    return
  }
  result.data.product.nodes.forEach(({ childMdx: { frontmatter: { slug } } }) => {
    createPage({
      path: slug,
      component: productTemplate,
      context: {
        slug: slug,
      },
    })
  })

}

布局组件（切换语言）

import { LocalizedLink } from 'gatsby-theme-i18n'
export default function Layout({ children, slug }){
  return (
    ...
    <LocalizedLink to={slug} language="en">en</LocalizedLink>{'//'}
    <LocalizedLink to={slug} language="th">th</LocalizedLink>
    ...
  )
}

保存降价的模板

import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { LocalizedLink } from 'gatsby-theme-i18n'
import { useTranslation } from 'react-i18next'
import React from 'react'
import Layout from '../components/Layout'
export default function Product({ data: { mdx: { body, frontmatter } }, pageContext }){
  const { t } = useTranslation()
  return (
    <Layout slug={frontmatter.slug}>
      <h3>{frontmatter.title}</h3>
      <MDXRenderer>{body}</MDXRenderer>
      <LocalizedLink to="/">{t('back-to-menu')}</LocalizedLink>
    </Layout>
  )
}
export const dataquery = graphql`
  query {
    mdx {
      body
      frontmatter {
        slug
        title
      }
    }
  }
`

翻译数据文件（markdown）

./i18n (配置)

Answer 1

根据template of the i18next official documentation，您需要在模板查询中提供语言环境：

export const query = graphql`
  query($locale: String!, $slug: String!) {
    mdx(
      fields: { locale: { eq: $locale } }
      frontmatter: { slug: { eq: $slug } }
    ) {
      frontmatter {
        slug
        title
      }
      body
    }
  }
`

注意：如果代码中断，请去掉 ($locale: String!) 的感叹号。

由于它没有在 gatsby-node.js query, 中作为上下文传递，我假设插件通过添加此必需参数来修改 GraphQL 节点（因为感叹号位于：$locale: String!），允许您在语言变化。

另外，在这个配置中，你需要在你的<Layout>中提供<MDXProvider>组件：

const Layout = ({ children }) => {
  const { t } = useTranslation()
  return (
    <React.Fragment>
      <header>
        <LocalizedLink to="/">{t("home")}</LocalizedLink>
      </header>
      <main>
        <MDXProvider components={components}>{children}</MDXProvider>
      </main>
    </React.Fragment>
  )
}