reactjs - 切换时 Gatsby 主题 i18n Markdown 不会改变语言

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 主题 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>
    ...
  )
}

保持 Markdown 的模板

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! )，允许您在语言更改时呈现每个帖子。
另外，在这个配置中，你需要提供 <MDXProvider>您的 <Layout> 中的组件:

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>
  )
}