Gatsby: ajuda a tornar os arquivos yaml mais poderosos

Nas imagens, se você usar gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp / gatsby-plugin-sharp, poderá consultar essas imagens.

Veja, por exemplo, como gatsbyjs.org consulta avatares de autor

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ blog / author.yaml

Ao executar campos yaml por meio de markdown - você pode criar subnós que especificam seu tipo de mídia como markdown e, em seguida, gatsby-transformer -note irá convertê-los em html, por exemplo, https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84fages5e2a/pack /gatsby-source-contentful/src/normalize.js#L143

Desculpe se isso é de alto nível e não muito acionável. Gatsby está focado em facilitar a configuração de pipelines de transformação de dados personalizados. Para tarefas comuns, as pessoas podem criar plug-ins de nível superior que configuram coisas assim para você automaticamente, mas não sei se alguém ainda fez para yaml => markdown => html.

Para que isso aconteça, você precisará mergulhar nos documentos de Gatsby e examinar os plug-ins para entender como fazer o que deseja.

obrigado pelo conselho, não acho que estou pronto para dedicar tanto tempo essencialmente para fazer um plugin gatsby agora. Eu tenho minha solução ingênua como esta:

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)
}))

isso ainda pode acontecer durante o estágio de construção, portanto, funciona para meus propósitos. Acho que o problema é que o graphql tem como objetivo primeiro construir dados e usar um modelo semelhante para várias páginas. Estou seguindo uma estrutura de 'módulo' assim:
`` `
Páginas/
uma página/
index.js
_data.yml
ativos/
img1.png
outra página/
...

Uma maneira simples de fazer isso seria compilar os campos de redução usando onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data e adicione o campo compilado como um novo campo com createNodeField .

Você apenas faria isso em seu gatsby-node.js