方法1：

从config.yml，如下所示。

  - name: "pages"
    label: "Pages"
    files:
      - file: "src/pages/index.md"
      label: "Homepage"
      name: "homepage"

然后创建一个src / pages / index.md markdown文件，并将js文件src / pages / index.js移至目录src / template。将该markdown文件添加为我的页面集中的条目。但是我遇到了与盖茨比相关的错误。

Your site's "gatsby-node.js" created a page with a component that doesn't exist

{ path: '/',
  tags: null,
  component: '/Users/class/gatsby-netlify-blog/src/templates/null.js',
  context: { id: 'bb87bb60-04a6-51ea-8524-c7b2332a2fdb' } }
error See the documentation for createPage https://www.gatsbyjs.org/docs/bound-action-creators/#createPage

方法2：

使用Content组件，在templae中的gatsby-starter-netlify-cms中，对模板中的src / pages / index.js进行了相同的尝试。

import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby'
import Layout from '../components/Layout'
import Content, { HTMLContent } from '../components/Content'

export default class IndexPage extends React.Component {
  render() {
    const { data } = this.props
    const { edges: posts } = data.allMarkdownRemark
    const FeaturedImg = {
      content,
      contentComponent,
    }
    const PostContent = contentComponent || Content

    return (
      <Layout>
        <FeaturedImg
          content={post.html}
          contentComponent={HTMLContent}
        />
        <section className="section">
          <div className="container">
            <div className="content">
              <h1 className="has-text-weight-bold is-size-2">Latest Stories</h1>
            </div>
            {posts
              .map(({ node: post }) => (
                <div
                  className="content"
                  style={{ border: '1px solid #eaecee', padding: '2em 4em' }}
                  key={post.id}
                >
                  <p>
                    <Link className="has-text-primary" to={post.fields.slug}>
                      {post.frontmatter.title}
                    </Link>
                    <span> &nbsp; </span>
                    <small>{post.frontmatter.date}</small>
                  </p>
                  <PostContent content={content} />
                  <p>
                    {post.excerpt}
                    <br />
                    <br />
                    <Link className="button is-small" to={post.fields.slug}>
                      Keep Reading →
                    </Link>
                  </p>
                </div>
              ))}
          </div>
        </section>
      </Layout>
    )
  }
}

IndexPage.propTypes = {
  content: PropTypes.node.isRequired,
  contentComponent: PropTypes.func,
  data: PropTypes.shape({
    allMarkdownRemark: PropTypes.shape({
      edges: PropTypes.array,
    }),
  }),
}

export const pageQuery = graphql`
  query IndexQuery {
    allMarkdownRemark(
      sort: { order: DESC, fields: [frontmatter___date] },
      filter: { frontmatter: { templateKey: { eq: "blog-post" } }}
    ) {
      edges {
        node {
          excerpt(pruneLength: 400)
          id
          fields {
            slug
          }
          frontmatter {
            title
            templateKey
            date(formatString: "MMMM DD, YYYY")
          }
        }
      }
    }
  }
`

但是，再次在下面出现了这样的错误。

ERROR  Failed to compile with 1 errors                                                                                                                                                                    11:23:51

 error  in ./src/pages/index.js

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/class/gatsby-netlify-blog/src/pages/index.js
  12:7   error  'content' is not defined           no-undef
  13:7   error  'contentComponent' is not defined  no-undef
  15:25  error  'contentComponent' is not defined  no-undef
  20:20  error  'post' is not defined              no-undef
  42:41  error  'content' is not defined           no-undef

✖ 5 problems (5 errors, 0 warnings)


 @ ./.cache/sync-requires.js 19:50-112
 @ ./.cache/app.js
 @ multi ./node_modules/react-hot-loader/patch.js (webpack)-hot-middleware/client.js?path=http://localhost:8000/__webpack_hmr&reload=true&overlay=false ./.cache/app

*我已经问过Gitter，问题在gatsby-starter-netlify-cms和Gatsby的Spectrum Chat中，但找不到正确的路径。

Answer 1

对于＃1，您的markdown文件需要模板密钥来告诉gatsby在哪里找到用于呈现markdown的js文件。

对于＃2，这些变量未在使用范围内定义，您的linter正在捕获它，它们将在运行时失败。那些应该从某个地方进口吗？

Gatsby + Netlify CMS：是否为src / pages / index.js中的每个条目启用特色图像？

方法1：

方法2：

1 个答案: