我正在尝试使用支持两种语言的 gatsby 创建一个静态站点,我希望所有内容都由降价文件处理。
我从使用此https://www.gatsbyjs.org/packages/gatsby-plugin-intl/的 plugin-gatsby-intl 开始 - 工作得很好。
但我不知道如何使用降价,我猜是因为 gatsby-plugin-intl 改变了路径。当我尝试访问 localhost:8000/blog 时,它会更改为 localhost:8000/en/blog,并在 graphql 查询返回 null 的模板中引发错误。
我理解这个问题,但我无法理解如何解决它。我想我需要为每个语言制作 2 个降价文件并更改 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