我目前正在尝试将 yaml 文件中的绝对路径解析为相对路径，以便可以使用 gatsby 中的 graphql 进行查询。绝对路径由netlify-cms提供。
当相同的路径放在md文件中并使用gatsby-remark-relative-images将其转换为相对路径时，完全没有问题，但同样不适用于yaml。
图片文件放在static/img/中，cms提供的路径为/img/xxx.jpg
src/data/pages/index.yaml
page: index
slider:
- image: /img/1_new.jpg
url: ""
- image: /img/2_new.jpg
url: ""
- image: /img/3_new.jpg
url: ""
gatsby-config.js
module.exports = {
// ...
plugins: [
// ...
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/data`,
name: 'data',
},
},
{
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/assets/images`,
name: 'images',
},
},
{
resolve: 'gatsby-plugin-react-svg',
options: {
rule: {
include: /\.inline\.svg$/,
},
},
},
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-transformer-yaml-plus`,
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-relative-images',
options: {
name: 'uploads',
},
},
{
resolve: 'gatsby-remark-images',
options: {
maxWidth: 2048, // must specify max width container
},
},
{
resolve: `gatsby-remark-responsive-iframe`,
options: {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
{
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
},
},
`gatsby-remark-smartypants`,
`gatsby-remark-widows`,
],
},
},
{
resolve: 'gatsby-plugin-netlify-cms',
options: {
modulePath: `${__dirname}/src/cms/cms.js`,
},
},
'gatsby-plugin-netlify', // make sure to keep it last in the array
],
// for avoiding CORS while developing Netlify Functions locally
// read more: https://www.gatsbyjs.org/docs/api-proxy/#advanced-proxying
developMiddleware: app => {
app.use(
'/.netlify/functions/',
proxy({
target: 'http://localhost:9000',
pathRewrite: {
'/.netlify/functions/': ``,
},
})
)
},
}
此外，这里是将节点中的绝对路径转换为相对路径
gatsby-node.js
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
fmImagesToRelative(node) // convert image paths for gatsby images
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
最后，这里是定义 netlify-cms 配置的地方
static/admin/config.yml
backend:
name: git-gateway
branch: master
media_folder: static/img
public_folder: /img
collections:
- label: "Data"
name: "data"
files:
- name: "index"
label: "Index"
file: "src/data/pages/index.yml"
fields:
- {label: "Page", name: "page", widget: hidden, default: "index"}
- label: "Slider"
name: "slider"
widget: list
fields:
- {label: "Image", name: "image", widget: image}
- {label: "Url", name: "url", widget: string, required: false}
错误消息
ERROR
GraphQL Error Field "image" must not have a selection since type "String" has no subfields.
file: /home/gaara/JS/iconic-starter-netlify-cms/src/pages/index.js
1 |
2 | query IndexPage {
3 | pagesYaml(page: { eq: "index" }) {
4 | id
5 | slider {
6 | desktop {
> 7 | image {
| ^
8 | childImageSharp {
9 | fluid(maxWidth: 2000, quality: 90) {
10 | aspectRatio
11 | presentationWidth
12 | src
13 | srcSet
14 | sizes
15 | }
16 | }
17 | }
⠙ extract queries from components
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
我已经确保所有图像都存在于 static/img/ 文件夹中。我还多次尝试重新启动服务器，以避免图像未加载问题。 netlify-cms 给出的图像路径应保留为 /img/xxx.jpg 因为有很多其他 Markdown 文件使用它并且解析路径没有问题。
请问我是否有任何配置问题是我做错或遗漏的，导致 gatsby-remark-relative-images 无法解析文件路径？
请您参考如下方法:
gatsby-remark-relative-images 是一个插件，仅适用于 gatsby-transformer-remark 处理的 Markdown 文件。
最近的 graphql 架构自定义更新允许独立于文件类型的新解决方案。您可以在此处浏览有关该主题的官方文档:Customize the Graphql Schema (gatsby docs)
我们会自定义 graphql 模式，以便图像字段 (slider.desktop.image在您的情况下)改为解析为图像文件节点。
请注意，下面的节点类型只是松散的示例，您应该转到 graphiql 端点(即 localhost:8000/graphiql)来查找正确的类型名称。
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes, createFieldExtension } = actions
createFieldExtension({
name: 'fileByStaticPath',
extend: () => ({
resolve: (src, args, ctx, info) => {
// look up original string value
const { fieldName } = info
const partialPath = src[fieldName]
// TODOS
// - join path to create the correct image file path
// - query the file node with `context.nodeModel.runQuery`
// - return the file node if exists
}
})
})
const typeDefs = `
type YamlSliderDesktop @infer {
image: File @fileByStaticPath
}
type YamlSlider @infer {
desktop: YamlSliderDesktop
}
type PagesYaml implements Node @infer {
slider: YamlSlider
}
`
createTypes(typeDefs)
}
我发现自己经常这样做，所以我为它编写了一个插件:gatsby-schema-field-absolute-path (github) .
我还在我的博客 ( byderek.com ) 上对此进行了更深入的讨论，但实际上，没有什么是你在 Gatsby 官方文档中找不到的，只是用不同的语言进行了解释。
希望对你有帮助!
