Gatsby: yaml 파일을 더 강력하게 만드는 데 도움

이미지에서 gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp를 사용하면 이러한 이미지를 쿼리할 수 있습니다.

예를 들어 gatsbyjs.org가 작성자 아바타를 쿼리하는 방법을 참조하세요.

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ 블로그/저자.yaml

마크다운을 통해 yaml 필드를 실행할 때 — 미디어 유형을 마크다운으로 지정하는 하위 노드를 생성할 수 있습니다. 그러면 gatsby-transformer-remark가 이를 html로 변환합니다(예: https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e1405e2a8). /gatsby-source-contentful/src/normalize.js#L143

그것이 매우 높은 수준이고 실행 가능하지 않은 경우 죄송합니다. Gatsby는 사용자 지정 데이터 변환 파이프라인을 쉽게 설정하는 데 중점을 둡니다. 일반적인 작업의 경우 사람들은 이와 같은 것을 자동으로 설정하는 고급 플러그인을 만들 수 있지만 아직 yaml => markdown => html에 대해 아는 사람이 없습니다.

이렇게 하려면 Gatsby의 문서를 살펴보고 플러그인을 살펴보고 원하는 작업을 수행하는 방법을 이해해야 합니다.

조언에 감사드립니다. 저는 지금 본질적으로 gatsby 플러그인을 만드는 데 그렇게 많은 시간을 할애할 준비가 되어 있지 않다고 생각합니다. 다음과 같은 순진한 솔루션이 있습니다.

import data from './_data.yaml'
import markdownIt from 'markdown-it'
const md = markdownIt({
  html: true,
  linkify: true
})
const loadedData = data.map(item => ({
  ...item,
  image: item.image && require(item.image),
  description: md.render(item.description)
}))

이것은 빌드 단계에서 여전히 발생할 수 있으므로 내 목적에 맞게 작동합니다. 문제는 graphql이 먼저 데이터를 빌드하고 여러 페이지에 유사한 템플릿을 사용하는 것을 목표로 한다는 것입니다. 다음과 같은 '모듈' 구조를 따르고 있습니다.
```
페이지/
한 페이지/
index.js
_data.yml
자산/
img1.png
다른 페이지/
...

이를 수행하는 간단한 방법은 onCreateNode를 사용하여 마크다운 필드를 컴파일하는 것입니다. https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data 하고 컴파일된 필드를 createNodeField 있는 새 필드로 추가합니다.

당신은 당신의 gatsby-node.js에서 그렇게 할 것입니다.