这是我第一次尝试使用Gatsby v2 . 我有一个test.md文件,它是由netlify cms创建的,就像你在上面的文件系统中看到的那样在博客文件夹中 .
我也可以在浏览器中使用GraphiQL查询数据,如上所述 .
我得到一个博客帖子列表(1),这是一个链接,但没有生成的页面去 . 当我运行 gatsby build
时出现错误 .
错误为页面构建静态HTML失败
6 | }) {
7 | const { markdownRemark } = data // data.markdownRemark holds our post data
> 8 | const { frontmatter, html } = markdownRemark
| ^
9 | return (
10 | <div className="blog-post-container">
11 | <div className="blog-post">
WebpackError: TypeError: Cannot read property 'frontmatter' of null
我看了很多github问题并尝试在VSCode中调试但没有运气......
这是相关文件 .
gatsby-config.js
module.exports = {
siteMetadata: {
title: `simco-cms`,
},
plugins: [
`gatsby-plugin-netlify-cms`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/blog`,
name: "markdown-pages",
},
},
],
}
pages/index.js
import React from "react"
import { graphql } from "gatsby"
import PostLink from "../components/postLink"
const IndexPage = ({
data: {
allMarkdownRemark: { edges },
},
}) => {
const Posts = edges
.filter(edge => !!edge.node.frontmatter.date)
.map(edge => <PostLink key={edge.node.id} post={edge.node} />)
return <div>{Posts}</div>
}
export default IndexPage
export const pageQuery = graphql`
query {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {
node {
id
excerpt(pruneLength: 250)
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
}
}
`
gatsby-node.js
const path = require("path")
exports.createPages = ({ actions, graphql }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve(`src/templates/blogTemplate.js`)
return graphql(`
{
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1000
) {
edges {
node {
frontmatter {
path
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors)
}
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.frontmatter.path,
component: blogPostTemplate,
context: {}, // additional data can be passed via context
})
})
})
}
templates/blogTemplate.js
import React from "react"
import { graphql } from "gatsby"
export default function Template({
data, // this prop will be injected by the GraphQL query below.
}) {
const { markdownRemark } = data // data.markdownRemark holds our post data
const { frontmatter, html } = markdownRemark
return (
<div className="blog-post-container">
<div className="blog-post">
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div
className="blog-post-content"
dangerouslySetInnerHTML={{ __html: html }}
/>
</div>
</div>
)
}
export const pageQuery = graphql`
query($path: String!) {
markdownRemark(frontmatter: { path: { eq: $path } }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
path
title
}
}
}
`
1 回答
解析为markdown的路径是相对于项目/存储库位置的根 . 传递给模板的路径必须是查询能够在
$path
处解析数据的绝对路径 .blog/test.md
如果你真的希望你的路径是
/test
这篇博文,那么改变路径:否则将其更改为
path: /blog/test