Gatsby v2 - 使用 markdown 为页面构建静态 HTML 时出错失败
Gatsby v2 - error building static HTML for pages failed using markdown
这是我第一次尝试使用 Gatsby v2。我有一个由 netlify cms 创建的 test.md 文件,它位于 blog 文件夹中,正如您在上面的文件系统中看到的那样。
我也可以像上面那样在浏览器中使用 GraphiQL 查询数据。
我得到了一个博客文章列表(1),它是一个 link 但没有生成可供访问的页面。当我 运行 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: 无法读取 属性 'frontmatter' of null
我查看了所有 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",
},
},
],
}
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
})
})
})
}
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
}
}
}
`
解析为您的 markdown 的路径是相对于您的 project/repository 位置的根目录的。传递给模板的路径必须是查询能够解析 $path
.
处数据的绝对路径
blog/test.md
---
path: test
date: 2018-11-05T16:25:21.303Z
title: test
---
test
如果您真的希望此博客的路径为 /test
post,请更改路径:
---
path: /test
date: 2018-11-05T16:25:21.303Z
title: test
---
test
否则改为path: /blog/test
这是我第一次尝试使用 Gatsby v2。我有一个由 netlify cms 创建的 test.md 文件,它位于 blog 文件夹中,正如您在上面的文件系统中看到的那样。
我也可以像上面那样在浏览器中使用 GraphiQL 查询数据。
我得到了一个博客文章列表(1),它是一个 link 但没有生成可供访问的页面。当我 运行 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: 无法读取 属性 'frontmatter' of null
我查看了所有 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",
},
},
],
}
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
})
})
})
}
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
}
}
}
`
解析为您的 markdown 的路径是相对于您的 project/repository 位置的根目录的。传递给模板的路径必须是查询能够解析 $path
.
blog/test.md
---
path: test
date: 2018-11-05T16:25:21.303Z
title: test
---
test
如果您真的希望此博客的路径为 /test
post,请更改路径:
---
path: /test
date: 2018-11-05T16:25:21.303Z
title: test
---
test
否则改为path: /blog/test