Question

这是我第一次尝试使用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中进行调试，但是没有运气...

以下是相关文件。

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
      }
    }
  }
`

Answer 1

要解析到降价的路径是相对于项目/存储库位置的根的。传递给模板的路径必须是查询的绝对路径，以便能够解析G = { "Alice": ["Bob", "Claire", "Frank"], "Bob": ["Alice"], "Claire": ["Alice", "Dennis", "Esther", "Frank"], "Dennis": ["Claire", "Esther", "George"], "Esther": ["Claire", "Dennis"], "Frank": ["Alice", "Claire", "George"], "George": ["Dennis", "Frank"]} w = {G["Alice"][0]:3, G["Alice"][1]:4, G["Alice"][2]:2, G["Bob"][0]:3, G["Claire"][0]:3, G["Claire"][1]:3, G["Claire"][2]:3, G["Claire"[3]:3, G["Dennis"][0]:3, G["Dennis"][1]:3, G["Dennis"][2]:3, G["Esther"][0]:3, G["Esther"][1]:3, G["Frank"][0]:3, G["Frank"][1]:3, G["Frank"][2]:3, G["George"][0]:3, G["George"][1]:3}处的数据。

shortest_distance = {"Alice":{"Bob":5, "Claire":2, "Frank":4}, "Bob":{"Alice":3}, . . "George":{"Dennis":2, "Frank":4}}

<div id="container">
  <div id="box_1" class="box active"></div>
  <div id="box_2" class="box"></div>
  <div id="box_3" class="box"></div>
</div>

如果您确实希望此博客文章的路径为$path，请更改路径：

blog/test.md

否则将其更改为--- path: test date: 2018-11-05T16:25:21.303Z title: test --- test

Gatsby v2-使用Markdown为页面构建静态HTML时出错

1 个答案: