Gatsby & Netlify - 通过 cloudinary 添加多个图像答案

【问题标题】：Gatsby & Netlify - adding multiple images via cloudinaryGatsby & Netlify - 通过 cloudinary 添加多个图像
【发布时间】：2020-08-08 04:45:41
【问题描述】：

我有一个通过 github 存储库连接的 Netlify/Gatsby 测试站点设置。我的目标是在 Netlify CMS 中上传多个图像。我为此实现了 cloudinary 插件。当我创建一个包含内容的新页面时，这在 Netlify CMS 中有效，我可以通过 cloudinary 插件选择多个图像。一旦我发布，它会自动创建一个包含所有内容的降价文件。生成的markdown文件示例：

path: /blog/first-post
date: 2020-04-20T17:20:52.595Z
title: First blog post!
media:
  - >-
    https://res.cloudinary.com/dzmtikrn1/image/upload/v1587474425/IMG_20180715_141255_vux692.jpg
  - >-
    https://res.cloudinary.com/dzmtikrn1/image/upload/v1587474426/IMG-20180713-WA0003_fimfc4.jpg
---
test 2

现在使用 graphQL，我想查询此媒体数据，但查询时它不存在。我用一张图片试过了，效果很好，但是一旦我添加了多张就不行了。

我的 config.yml 的一部分：

media_library:
  name: cloudinary
  config:
    cloud_name: 
    api_key: 

collections:
  - name: blog
    label: Blog
    folder: blog
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: datetime }
      - { name: title, label: Title }
      - { name: body, label: Body, widget: markdown }
      - label: "Media"
        name: "media"
        widget: "image"
        allow_multiple: true
        media_library:
          config:
            multiple: true

是降价的格式还是我遗漏了什么？

【问题讨论】：

标签： markdown gatsby cloudinary netlify

【解决方案1】：

试着像这样包装它

- {
          label: Media,
          name: media,
          widget: image,
          allow_multiple: true,
          media_library: { name: cloudinary, output_filename_only: true },
        }

然后在您的 GraphQl 查询中只包含 media

export const pageQuery = graphql`
  query IndexPageTemplate {
    markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        title
        media
        image {
          childImageSharp {
            fluid(maxWidth: 2048, quality: 100) {
              ...GatsbyImageSharpFluid
            }
          }
        }     
  }
`;

【讨论】：