【发布时间】：2021-02-17 16:41:33
【问题描述】：
像许多人一样，我想做的只是能够通过 NetlifyCMS 使用一个简单的 gastby 博客。有一秒钟，我能够得到一个图像，但在那之后再也没有出现过。我已经尝试了其他帖子的无数解决方案，但我一无所获。现在持续 3 天。
我得到了共同点：
Field "image" must not have a selection since type "String" has no subfields
有人可以看看我的代码，看看我是否遗漏了什么？
config.yml
backend:
name: github
branch: development
repo: removedforworkreasons
media_folder: static/img
public_folder: /img
collections:
- name: blog
label: Blog
folder: src/posts
create: true
fields:
- { name: path, label: Path }
- { name: date, label: Date, widget: date }
- { name: title, label: Title }
- { name: description, label: Description }
- { name: image, label: Image, widget: image }
- { name: body, label: Body, widget: markdown }
gatsby-config.js
module.exports = {
siteMetadata: {
title: `removedforwork`,
description: `removedforwork`,
author: `removed`,
},
plugins: [
`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-plugin-remove-serviceworker`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `img`,
path: `${__dirname}/static/img`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/posts`,
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-relative-images`,
options: {
// [Optional] The root of "media_folder" in your config.yml
// Defaults to "static"
staticFolderName: "static",
},
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
],
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
},
},
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/,
},
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
`gatsby-plugin-netlify-cms`,
`gatsby-plugin-netlify`,
],
}
gatsby-node.js（还不如扔进去）
const path = require('path')
module.exports.onCreateNode = ({ node, actions }) => {
const { createNodeField } = actions
if (node.internal.type === "MarkdownRemark") {
const slug = path.basename(node.fileAbsolutePath, '.md')
createNodeField({
node,
name: 'slug',
value: slug
})
}
}
module.exports.createPages = async ({ graphql, actions}) => {
const { createPage } = actions
const blogTemplate = path.resolve('./src/templates/blog.js')
const res = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
res.data.allMarkdownRemark.edges.forEach((edge) => {
createPage({
component: blogTemplate,
path: `/blog/${edge.node.fields.slug}`,
context: {
slug: edge.node.fields.slug
}
})
})
}
显示所有博客文章的页面（不是模板） pages/blog.js
import React from "react"
import { Link, graphql, useStaticQuery } from "gatsby"
import Layout from "../components/layout/layout"
import Img from 'gatsby-image'
const Blog = () => {
const data = useStaticQuery(graphql`
query {
allMarkdownRemark {
edges {
node {
frontmatter {
title
date
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
fields {
slug
}
}
}
}
}
`)
return (
<>
<Layout>
<main className="main">
<div className="articles">
<h1 className="articles__title">Articles</h1>
<section className="articles__list">
{data.allMarkdownRemark.edges.map(edge => {
return (
<a className="articles__article">
<div className="articles__article-artwork">
<figure className="articles__article-artwork-wrapper">
<Img fluid={edge.node.frontmatter.image.childImageSharp.fluid} />
</figure>
</div>
<h2 className="articles__article-title">
<Link to={`/blog/${edge.node.fields.slug}`}>
{edge.node.frontmatter.title}
</Link>
</h2>
<Link>
<p>{edge.node.frontmatter.date}</p>
</Link>
<div className="articles__article-description">
<p></p>
</div>
<span className="articles__article-more">Read more...</span>
</a>
)
})}
</section>
</div>
</main>
</Layout>
</>
)
}
export default Blog
模板/blog.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout/layout"
import Img from 'gatsby-image'
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
frontmatter {
title
date
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
html
}
}
`
const Blog = props => {
return (
<Layout>
<main className="main">
<div className="article-page">
<header className="article-page__header">
<div className="article-page__header-inner">
<h1 className="article-page__title">
{props.data.markdownRemark.frontmatter.title}
</h1>
</div>
</header>
<Img fluid={props.data.markdownRemark.frontmatter.image.childImageSharp.fluid} />
<p>{props.data.markdownRemark.frontmatter.date}</p>
<section className="article-page">
<div className="articles-page__inner">
<div
className="article-page__content"
dangerouslySetInnerHTML={{
__html: props.data.markdownRemark.html,
}}
></div>
</div>
</section>
</div>
</main>
</Layout>
)
}
export default Blog
这对我来说是残酷的。我想我只需要另一双眼睛来指出我所做的一些愚蠢的事情，但似乎是 gatsby 和 netlifycms 的常见问题。
提前致谢！！！
【问题讨论】：
标签： gatsby netlify-cms gatsby-image