Reactjs 盖茨比&x2B；Netlify CMS：有没有办法在src/pages/index.js中为每个条目启用特色图像？

是否有任何解决方案可以从模板中启用顶部/主页中的特色图像

我的意思是我希望TOP/HOME页面（src/pages.index.js）也能显示这些图像

我试着用两种方法来做，但都失败了

方式1： 从config.yml开始，如下所示

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

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

然后创建一个src/pages/index.md标记文件，并将js文件src/pages/index.js移动到src/template目录。 将该标记文件添加为“我的页面”集合中的条目。 但我犯了一个与盖茨比有关的错误，就像这样

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： gatsby starter netlify cms使用内容组件在blog-post.js中写道，在templae的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")
          }
        }
      }
    }
  }
`

*我已经询问过盖茨比starter netlify cms和盖茨比频谱聊天中的Gitter问题，但无法找到正确的路径。

对于#1，您的标记文件需要一个模板密钥，告诉盖茨比在哪里找到用于呈现标记的js文件

对于#2，这些变量未在其使用的范围内定义，您的linter正在捕获它，并且它们将在运行时失败。这些应该从什么地方进口吗