在完成了一些教程之后，我正在使用 Gatsby + Netlify CMS 创建我的第一个站点。但现在我从这个模板Gatsby-London开始。这个模板如何不与 Netlify CMS 集成。我使用它，我得到了它。我所做的唯一一件事就是评论了与缩略图相关的所有内容，因为它会产生一些我将在之后解决的问题，而且我删除了所有博客文章，我只留下了一篇文章。但其他一切都很好。
上传到 Netlify 后，我发现图像存在一些问题。我上传的图片。他们没有反应。但是模板附带的所有原始帖子都是响应式的。此外，我在那篇帖子中添加了一张我没有响应的图片。经过阅读和研究，我发现是引用路径有问题，需要使用相对路径。
所以我按照Issy的教程博客的步骤，它还不起作用，同样的问题。它不会转换图像。然后我尝试使用另一个插件（gatsby-plugin-netlify-cms-paths），但一切都是一样的。
当我使用检查工具检查时，我发现该图像未包含所有 gatsby 类以使图像响应：
<!-- some html -->
<div class="post-content-body">
<p>
<a class="gatsby-resp-image-link" href="/static/b833f68b610104a59dcc9d3be77f6170/3acf0/cody-davis-259003-unsplash.jpg" style="display: block" target="_blank" rel="noopener">
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; max-width: 1360px; margin-left: auto; margin-right: auto;">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 66.76470588235294%; position: rela ....SOME GENERATED CODE... ">
<img class="gatsby-resp-image-image" style="width: 100%; height: 100%; margin: 0; verti ....SOME GENERATED CODE..." sizes="(max-width: 1360px) 100vw, 1360px">
</span>
</span>
</a>
</p>
<p>
<img src="/assets/como-conseguir-gatitos-y-gatitas-sociables.jpg" alt="Gatito" title="Feliz">
</p>
</div>
<!-- some html -->
第一个<p>是使用 gatsby-image 生成的，因为此图像位于 .md 文件所在的同一文件夹中。第二个<p>是存储在 Netlify CMS 文件夹中的图像static/img
如果有人知道是哪个问题？以及如何解决。我检查了很多来源，但在我的项目中任何东西都有效。
另外，如果您可以检查这是我在GitHub中的存储库
这是我的 gatsby 配置：
const urljoin = require("url-join")
const siteConfig = require("./siteConfig")
var netlifyCmsPaths = {
resolve: `gatsby-plugin-netlify-cms-paths`,
options: {
cmsConfig: `/static/admin/config.yml`,
},
}
module.exports = {
siteMetadata: {
title: siteConfig.name,
author: siteConfig.author,
description: siteConfig.description,
siteUrl: urljoin(siteConfig.url, siteConfig.prefix),
social: {
twitter: siteConfig.twitter,
},
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/static/assets`,
name: "images",
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/blog`,
name: `blog`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/content/assets`,
name: `assets`,
},
},
netlifyCmsPaths,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
netlifyCmsPaths,
{
resolve: `gatsby-remark-relative-images`,
options: {
name: "images",
},
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1360,
// withWebp: true,
// showCaptions: true,
// quality: 75,
// wrapperStyle: `margin: 7vw 0;`,
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
],
},
},
{
resolve: `gatsby-plugin-postcss`,
options: {
postCssPlugins: [
require("postcss-easy-import")(),
require("postcss-custom-properties")({ preserve: false }),
require("postcss-color-function")(),
require("autoprefixer")({ browsers: ["last 2 versions"] }),
],
},
},
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true, // Print removed selectors and processed file names
// develop: true, // Enable while using `gatsby develop`
// tailwind: true, // Enable tailwindcss support
// whitelist: ['whitelist'], // Don't remove this selector
// ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
// purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
},
},
{
resolve: `gatsby-plugin-google-analytics`,
options: {
//trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
`gatsby-plugin-feed`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: siteConfig.name,
short_name: siteConfig.shortName,
start_url: siteConfig.prefix,
background_color: `#ffffff`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `content/assets/gatsby-icon.png`,
},
},
`gatsby-plugin-netlify`,
`gatsby-plugin-offline`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-netlify-cms`,
],
}
盖茨比-node.js
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
const { fmImagesToRelative } = require('gatsby-remark-relative-images');
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
const blogPost = path.resolve(`./src/templates/blog-post.js`)
return graphql(
`
{
allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`
).then(result => {
if (result.errors) {
throw result.errors
}
// Create blog posts pages.
const posts = result.data.allMarkdownRemark.edges
posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
const next = index === 0 ? null : posts[index - 1].node
createPage({
path: post.node.fields.slug,
component: blogPost,
context: {
slug: post.node.fields.slug,
previous,
next,
},
})
})
return null
})
}
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,
})
}
}
配置.yml
# name: test-repo
name: git-gateway
branch: master # Branch to update (optional; defaults to master)
media_folder: static/assets
public_folder: assets
collections:
- name: blog
label: Blog
folder: content/blog
create: true
slug: "{{slug}}"
fields:
- { name: "title", label: "Title", widget: "string" }
- { name: date, label: Date, widget: "string" }
- { name: description, label: Description, widget: "string" }
# - { name: thumbnail, label: Thumbnail, widget: image }
- {label: "Body", name: "body", widget: "markdown"}