是否有任何解决方案可以从模板启用TOP/HOME页面中的特色图像https://github.com/netlify-templates/gatsby-starter-netlify-cms？
我的意思是说我希望TOP/HOME页面(src/pages.index.js(也能显示这些图像。
我试过两种方法，但都失败了。
方式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目录中。在我的页面集合中添加了该标记文件作为条目。但我犯了这样一个与盖茨比有关的错误。
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从templae开始在src/pages/index.js中尝试了同样的方法，使用Content组件在blog-pst.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> </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，盖茨比入门版netlify cms和盖茨比的Spectrum Chat中的问题，但无法找到正确的路径。
对于#1，您的markdown文件需要一个模板键来告诉gatsby在哪里可以找到用于渲染markdown的js文件。
对于#2，这些变量没有在它们正在使用的范围中定义，您的linter正在捕获它，它们将在运行时失败。这些应该从哪里进口吗？