2

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

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

我可以更改Layout, Template(gatsby-theme-i18n-react-i18next) 的语言，但我不能更改markdowns(gatsby-theme-i18n) 的语言

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

问题

盖茨比-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`,
  }
},
...

盖茨比-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 (配置) 配置

4

1 回答 1

2

根据i18next 官方文档的模板，您需要在模板查询中提供语言环境：

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由于它没有在查询中作为上下文传递，因此我假设插件通过添加此必需参数来修改 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>
  )
}
于 2021-02-08T06:15:33.283 回答