0

我对 Gatsby 和 Netlify CMS 网站有一个奇怪的问题。

我正在使用gatsby-remark-relative-images从 Netlify CMS 获取的图像与gatsby-image. 它对于直接位于 frontmatter 内部的图像小部件非常有效。但是，它不适用于列表小部件内的图像小部件。对于直接在 frontmatter 内部的图像，我可以使用 Gatsby's 查询childImageSharp。但是，列表小部件内的图像只返回一个字符串数组，这些字符串是图像的相对路径。

这是我的代码。

配置.yml

backend:
  name: github
  repo: my/repo
media_folder: static/assets
public_folder: /assets
publish_mode: editorial_workflow
collections:
  - name: 'projects'
    label: 'Projects'
    folder: 'src/pages/projects'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: category-type, label: Media Type, widget: select, options: ['Web', 'Mobile'] }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: thumbnail-subtitle, label: Thumbnail Subtitle, widget: string }
      - { name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }
      -   name: app-links
          label: App or Website Links
          widget: list
          required: false
          fields:
            - name: app-link
              label: App or Website Link
              widget: object
              fields:
                - { name: url, label: URL, wdget: string }
                - { name: link-type, label: Media Type, widget: select, options: ['iOS', 'Android', 'Web'] }
      - { name: github-link, label: Github Link, widget: string, required: false }
      - { name: about, label: About this project, widget: markdown }
      - { name: technologies, label: Technologies, widget: list, field: { name: technology, label: Technology Name, widget: string } }
      - { name: extra-images, label: Extra Images, widget: list, required: false, field: { name: image, label: Image, widget: image } }

  - name: 'blog'
    label: 'Blog'
    folder: 'src/pages/blog'
    create: true
    fields:
      - { name: title, label: Title }
      - { name: priority, label: Priority, widget: number, default: 0, valueType: int }
      - { name: thumbnail, label: Thumbnail Image, widget: image }
      - { name: url, label: URL }
      - { name: date, label: Date, widget: datetime }
      - { name: intro, label: Intro, widget: markdown }

盖茨比-config.js

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#F9F9F9`,
        theme_color: `#1F1F1F`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`,
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/assets`,
        name: 'media',
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `articles`,
        path: `${__dirname}/src/pages/blog`,
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `projects`,
        path: `${__dirname}/src/pages/projects`,
      }
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-relative-images`,
            options: {
              name: `media`,
            }, 
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWith: 960
            }
          }
        ],
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-netlify-cms`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-styled-components`
  ],
}

盖茨比-node.js

const { fmImagesToRelative } = require('gatsby-remark-relative-images')
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
  fmImagesToRelative(node)

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

name: thumbnail但是，我可以使用 正确查询childImageSharp，name: main-images并name: extra-images返回一个字符串数组，但我无法使用 进行查询childImageSharp。

我现在已经在这个问题上花费了相当长的时间。任何帮助将不胜感激。

4

1 回答 1

0

我自己想通了。这是由小部件的名称引起的。显然，它不与连字符一起使用。

当我将小部件更改为使用驼峰式语法而不是连字符时，它终于开始工作了。

# Before:
{ name: main-images, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }

# After
{ name: mainImages, label: Main Images, widget: list, field: { name: image, label: Image, widget: image } }
于 2019-12-11T06:24:49.670 回答