这是我第一次尝试使用 Gatsby v2。我有一个由 netlify cms 创建的 test.md 文件,正如您在上面的文件系统中看到的那样,它位于 blog 文件夹中。
我也可以如上所述在浏览器中使用 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:无法读取 null 的属性“frontmatter”
我已经查看了所有 github 问题并尝试在 VSCode 中进行调试,但没有运气......
以下是相关文件。
盖茨比-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",
},
},
],
}
页面/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
}
}
}
}
}
`
盖茨比-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
})
})
})
}
模板/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
}
}
}
`