首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用gatsby-plugin-intl和gatsby markdown创建多语言静态站点?

如何使用gatsby-plugin-intl和gatsby markdown创建多语言静态站点?
EN

Stack Overflow用户
提问于 2020-04-16 05:22:03
回答 1查看 512关注 0票数 0

我正在尝试使用gatsby创建一个支持两种语言的静态网站,我的愿望是所有的内容都将由markdown文件处理。

我开始使用这个https://www.gatsbyjs.org/packages/gatsby-plugin-intl/ -work插件--gatsby-intl。

但是我不知道如何使用markdown,我猜是因为gatsby-plugin-intl改变了路径。当我尝试转到localhost:8000/blog时,它更改为localhost:8000/en/blog,并在模板中抛出一个错误,即graphql查询返回null。

我理解这个问题,但我不能理解如何解决它。我想我需要为每个lang创建两个markdown文件,并更改gatsby-node.js以正确管理路径,但不确定如何操作。我在网上找到的唯一信息是https://hiddentao.com/archives/2019/05/07/building-a-multilingual-static-site-with-gatsby,但遵循他的步骤后,我就不工作了

将会感谢所有的帮助

我的gatsby-node.js:

代码语言:javascript
复制
const path = require(`path`)

exports.createPages = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions

  const blogPostTemplate = path.resolve(`src/templates/post.js`)

  const result = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }


  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    console.log("path:")
    console.log(node.frontmatter.path)
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    })
  })
}

我的模板:

代码语言:javascript
复制
// src/templates/post.js
import React from "react"
import { graphql } from "gatsby"

export default function Template({
  // this prop will be injected by the GraphQL query below.
    data, }) 
    {
    console.log(data)
    const { markdownRemark } = data // data.markdownRemark holds your post data
    const { frontmatter, html } = markdownRemark
    return (
      <div>
          <h1>{frontmatter.title}</h1>
      </div>
    )
  }

  //$path which is a strings
  export const pageQuery = graphql`
    query ($path: String!) {
      markdownRemark(frontmatter: { path: { eq: $path } }) {
        html
        frontmatter {
          path
          title
        }
      }
    }
  `
  // )
  // .then(res => {
  //   console.log("result")
  //   // console.log(pageQuery.data)
  // })

和我的blog.md:

代码语言:javascript
复制
---
path: "/blog"
date: "2019-05-04"
title: "My first blog post"
---


this is the my markdown
EN

回答 1

Stack Overflow用户

发布于 2020-12-25 11:25:46

代码语言:javascript
复制
    {
      resolve: `gatsby-plugin-intl`,
      options: {
        path: `${__dirname}/src/locales`,
        languages: [`en-us`, `fr`, `pt-br`],
        defaultLanguage: `en-us`,
        redirect: false,
      },
    },

您可以将redirect更改为false。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61238818

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档