我目前正在尝试将 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: ""
盖茨比-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/': ``,
},
})
)
},
}
此外,这里是将节点中的绝对路径转换为相对路径的地方
盖茨比-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 配置的地方
静态/管理员/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
因为有很多其他降价文件使用它并且解析路径没有问题。
我可以知道是否有任何配置问题我做错或错过导致gatsby-remark-relative-images
无法解析文件路径?