我正在尝试使用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:
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
})
})
}我的模板:
// 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:
---
path: "/blog"
date: "2019-05-04"
title: "My first blog post"
---
this is the my markdown发布于 2020-12-25 11:25:46
{
resolve: `gatsby-plugin-intl`,
options: {
path: `${__dirname}/src/locales`,
languages: [`en-us`, `fr`, `pt-br`],
defaultLanguage: `en-us`,
redirect: false,
},
},您可以将redirect更改为false。
https://stackoverflow.com/questions/61238818
复制相似问题