Блог

Как и многие, все, что я хочу сделать, это иметь возможность использовать простой блог gastby с NetlifyCMS. На одну секунду я смог получить изображение, но после этого больше никогда. Я перепробовал бесчисленное количество решений из других сообщений, и я просто ничего не добился. Продолжается уже 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
            }
        })
    })
}

  

Page that displays all blog posts (Not a template)
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
  

templates/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.

Заранее спасибо!!!

Существует несколько источников этой ошибки:

• Проверьте правописание изображений: если вы запрашиваете an abc.jpg и ваше изображение называется def.jpg Gatsby, по умолчанию поле отсутствующего изображения будет преобразовано в строку. То же самое произойдет с отсутствующими изображениями, а также с неправильными путями или типами изображений формата ( jpg , png , и т.д.) .

• Проверьте порядок плагинов, особенно для тех, которые связаны с файловой системой или transformers и sharps.

• Если ваше изображение не является родственным или, другими словами, находится в той же папке, что и файл JSON, соответствующие плагины преобразуют их в строки, поскольку на самом деле они не «знают», где находится файл.

  В противном случае файлы будут преобразованы в файловый узел. Вы можете подтвердить это, выполнив gatsby develop , откройте http://localhost:8000/___graphql и с правой стороны, в документах, просмотрите иерархию узлов. Вы увидите, что на самом деле это строка, но если вы переместите изображения в ту же папку и внесете необходимые изменения, выполните gatsby clean очистку всех кэшированных элементов и переиздание gatsby develop и откроете новое окно http://localhost:8000/___graphql , вы увидите, что теперь элемент фактически является файловым узлом.

Ресурсы:

• https://github.com/gatsbyjs/gatsby/issues/4123
• https://github.com/gatsbyjs/gatsby/issues/13322

Для тех, кто ищет решение, понижение gatsby-remark-relative-images версии до версии 0.3.0 сработало для меня:

 npm i gatsby-remark-relative-images@0.3.0
  

Не забудьте добавить вызов в fmImagesToRelative в onCreateNode gatsby-node.js :

 const {fmImagesToRelative} = require("gatsby-remark-relative-images");

// ...

exports.onCreateNode = ({node, actions, getNode}) => {
    fmImagesToRelative(node); // <- this
    // ...
};
  

В Gatsby-config порядок плагинов здесь имеет значение:

Я решил это, включив gatsby-transformer-sharp gatsby-plugin-sharp и «gatsby-transformer-remark» перед gatsby-source-filesystem

 'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
  resolve: 'gatsby-transformer-remark',
  options: {
    plugins: [
      {
        resolve: 'gatsby-remark-relative-images-v2',
        options: {
          name: 'uploads',
        },
      },
      {
        resolve: 'gatsby-remark-images',
        options: {
          // It's important to specify the maxWidth (in pixels) of
          // the content container as this plugin uses this as the
          // base for generating different widths of each image.
          maxWidth: 2048,
        },
      },
      {
        resolve: 'gatsby-remark-copy-linked-files',
        options: {
          destinationDir: 'static',
        },
      },
    ],
  },
},
{
  // keep as first gatsby-source-filesystem plugin for gatsby image support
  resolve: 'gatsby-source-filesystem',
  options: {
    path: `${__dirname}/static/assets`,
    name: 'uploads',
  },
},