テンプレートhttps://github.com/netlify-templates/gatsby-starter-netlify-cmsから TOP/HOME ページの注目の画像を有効にするソリューションはありますか?
TOP/HOMEページ(src/pages.index.js)にもそれらの画像を表示したいということでした。
私は2つの方法でそれをやろうとしましたが、失敗します。
方法 1:
以下のようにconfig.ymlから。
- name: "pages"
label: "Pages"
files:
- file: "src/pages/index.md"
label: "Homepage"
name: "homepage"
次に、src/pages/index.md マークダウン ファイルを作成し、js ファイル src/pages/index.js をディレクトリ src/template に移動します。そのマークダウン ファイルをページ コレクションのエントリとして追加しました。しかし、このようなGatsby関連のエラーが発生しました。
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 に書いたテンプレートから src/pages/index.js で同じ方法を試し、 Content コンポーネントを使用しました。
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、gatsby-starter-netlify-cms の問題、および Gatsby の Spectrum Chat に既に問い合わせましたが、正しいパスを取得できませんでした。