更新

这是我的gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Winston Fan's Blog`,
    description:
      "This is my personal blog websit for my hobby projects, collection of my knowledge etc.",
  },
  plugins: [
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sass",
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/static/img`,
        name: "uploads",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/pages`,
        name: "pages",
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        path: `${__dirname}/src/img`,
        name: "images",
      },
    },
    {
      resolve: `gatsby-plugin-env-variables`,
      options: {
        allowList: ["NETLIFY_FUNCTION_URL_BASE", "NETLIFY_FUNCTION_ADD_SUBSCRIPTION", "NETLIFY_FUNCTION_UPDATE_SUBSCRIPTION"]
      },
    },
    "gatsby-plugin-sharp",
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "gatsby-remark-relative-images",
            options: {
              name: "uploads",
              plugins: [
                {
                  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",
            },
          },
        ],
      },
    },
    {
      resolve: "gatsby-plugin-purgecss", // purges all unused/unreferenced css rules
      options: {
        develop: true, // Activates purging in npm run develop
        purgeOnly: ["/all.sass"], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `AskWinston`,
        short_name: `HeyWinston`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FAE042`,
        display: `standalone`,
        icon: `src/img/wf-logo512.png`,
      },
    },
    {
      resolve: `gatsby-plugin-offline`,
      options: {
        appendScript: `src/sw.js`,
      },
    },
    {
      resolve: "gatsby-plugin-netlify-cms",
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    "gatsby-plugin-netlify" // make sure to keep it last in the array
  ],
};

更新2

我的config.yml：

backend:
  name: git-gateway
  branch: master
  repo: franva/askwinston

  commit_messages:
    create: 'Create {{collection}} “{{slug}}”'
    update: 'Update {{collection}} “{{slug}}”'
    delete: 'Delete {{collection}} “{{slug}}”'
    uploadMedia: '[skip ci] Upload “{{path}}”'
    deleteMedia: '[skip ci] Delete “{{path}}”'

media_folder: "static/img"
public_folder: "/img"
publish_mode: editorial_workflow
local_backend: true

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text", required: false}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean", required: false}
      - {label: "Featured Image", name: "featuredimage", widget: image, required: false}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    create: true
    files:
      - file: "src/pages/index.md"
        label: "Landing Page"
        name: "index"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "index-page"}
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Subheading, name: subheading, widget: string}
          - {label: Mainpitch, name: mainpitch, widget: object, fields: [{label: Description, name: description, widget: text}]}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
      - file: "src/pages/about/index.md"
        label: "About"
        name: "about"
        fields:
          - {label: "Template Key", name: "templateKey", widget: "hidden", default: "about-page"}
          - {label: "Title", name: "title", widget: "string"}
          - {label: "Body", name: "body", widget: "markdown"}

Answer 1

假设用于公共映像的Netlify输出正确，并且所有映像均已从/static/img复制到/public/img文件夹，则应使用/img/name_of_image.jpg将这些映像指向Netlifiy Admin Portal （请注意初始斜杠）。

此外，如果您使用降价配置系统，则应安装gatsby-transformer-remark插件。在这种情况下：

{
  resolve: `gatsby-transformer-remark`,
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          maxWidth: 800,
        },
      },
    ],
  },
},

然后，您可以使用./name_of_image.png指向这些图像。

提供新信息后：media_folder和public_folder的路径应类似于：

media_folder: static/assets
public_folder: /assets

由于/static is compiled within the same internal structure to the public folder中的所有内容，如果您创建类似/static/assets的文件夹结构，则CMS仍可访问资产的路径。此外，这会将所有上传的媒体输出到/static文件夹中，而不会影响网站的其余部分。

总而言之，您的资产应位于/static文件夹下，以确保它们在公共编译文件夹中的可用性路径。当然，您可以根据需要/所需的结构来调整它们，但它们应保持路径和静态文件夹结构的相对性。

来自Netlify CMS documentation：

媒体文件夹

此设置为必需。

media_folder选项指定上传的文件夹路径相对于仓库的基础，应该保存文件。
media_folder: "static/images/uploads"

公共文件夹

此设置为必需。

public_folder选项指定文件夹路径，相对于构建站点的基础，该路径将访问媒体库上载的文件。对于由[file]或[image]小部件控制的字段，通过将该路径添加到所选文件的文件名之前来生成字段的值。默认值为media_folder，带有/的开头（如果尚未包含的话）。
public_folder: "/images/uploads"
基于上述设置，如果用户使用名为avatar的图像小部件字段上载并选择名为philosoraptor.png的图像，则该图像将保存到/static/images/uploads/philosoraptor.png的存储库中，并将文件的头像字段设置为/images/uploads/philosoraptor.png。

Netlify CMS + Gatsby：如何在管理门户的Markdown编辑器中从html代码引用图像

更新

更新2

1 个答案: