Gatsby: aider à rendre les fichiers yaml plus puissants

Sur les images, si vous utilisez gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp, vous pouvez interroger ces images.

Voir par exemple comment gatsbyjs.org interroge les avatars des auteurs

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

Lors de l'exécution des champs yaml via markdown - vous pouvez créer des sous-nœuds dont vous spécifiez leur type de média comme markdown, puis gatsby-transformer-remark les convertira en html, par exemple https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143

Désolé si c'est de très haut niveau et pas très exploitable. Gatsby s'efforce de faciliter la configuration de pipelines de transformation de données personnalisés. Pour les tâches courantes, les gens peuvent créer des plugins de niveau supérieur qui configurent automatiquement ce genre de choses pour vous, mais je ne sais pas si quelqu'un l'a encore fait pour yaml => markdown => html.

Pour que cela se produise, vous devrez vous plonger dans la documentation de Gatsby et examiner les plugins pour comprendre comment faire ce que vous voulez faire.

merci pour les conseils, je ne pense pas que je sois prêt à consacrer autant de temps à la création d'un plugin gatsby dès maintenant. J'ai ma solution naïve comme ceci:

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

cela peut toujours se produire pendant la phase de construction, donc cela fonctionne pour mes besoins. Je pense que le problème est que graphql vise d'abord à créer des données et à utiliser un modèle similaire pour plusieurs pages. Je suis une structure de « module » comme ceci :
```
pages/
une page/
index.js
_data.yml
les atouts/
img1.png
une autre page/
...

Un moyen simple de le faire serait de compiler les champs de démarques à l'aide de onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data et ajoutez le champ compilé en tant que nouveau champ avec createNodeField .

Vous feriez simplement cela dans votre gatsby-node.js