reactjs - Gatsby + Netlify CMS:有什么方法可以为 src/pages/index.js 中的每个条目启用特色图像?
问题描述
是否有任何解决方案可以通过模板https://github.com/netlify-templates/gatsby-starter-netlify-cms在 TOP/HOME 页面中启用特色图片?
我的意思是说我希望 TOP/HOME 页面 (src/pages.index.js) 也显示这些图像。
我试图以两种方式做到这一点,但它失败了。
方式一:
从 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。将该降价文件添加为我的页面集合中的条目。但是我遇到了这样的盖茨比相关错误。
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
方式二:
在模板中的 src/pages/index.js 中尝试了相同的方法,gatsby-starter-netlify-cms 在 blog-post.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
*我已经在 gatsby-starter-netlify-cms 和 Gatsby 的 Spectrum Chat 中询问了 Gitter,但找不到正确的路径。
解决方案
对于#1,您的降价文件需要一个模板键来告诉 gatsby 在哪里可以找到用于呈现降价的 js 文件。
对于#2,这些变量未在它们正在使用的范围内定义,您的 linter 正在捕获它,它们将在运行时失败。那些应该从某个地方进口吗?
推荐阅读
- python - 为什么我收到 TypeError: 'int' object is not iterable in my code?
- java - 使用 Java 的 SunMSCAPI/Windows-MY 访问智能卡证书以进行客户端身份验证的 TLS/SSL 连接
- git - 测试以检查是否在 Mac OS High Sierra 上删除了手动 git install
- c# - Ubuntu 18.04 托管 ASP.NET MVC4
- c++ - 有没有合法的方法将 unsigned char 指针转换为 std::byte 指针?
- javascript - 附加的 ajax 请求中断其他已经附加的 ajax 请求(纯 js)
- firebase - React-native ListView 排序数据
- python - 无法在 PyCharm 中键入字母或数字
- windows - 如何在 python Popen 中命名子进程?
- .net - 使用更改密钥反序列化 JSON?