Gatsby: helfen, yaml-Dateien leistungsfähiger zu machen

Wenn Sie bei Bildern gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp verwenden, können Sie diese Bilder abfragen.

Sehen Sie zum Beispiel, wie gatsbyjs.org Autoren-Avatare abfragt

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

Beim Ausführen von Yaml-Feldern durch Markdown können Sie Unterknoten erstellen, deren Medientyp Sie als Markdown angeben, und dann konvertiert gatsby-transformer-remark sie in HTML, z. B. https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/ /gatsby-source-contentful/src/normalize.js#L143

Tut mir leid, wenn das sehr hochrangig und nicht sehr umsetzbar ist. Gatsby konzentriert sich darauf, die Einrichtung benutzerdefinierter Datentransformationspipelines zu vereinfachen. Für allgemeine Aufgaben können die Leute Plugins auf höherer Ebene erstellen, die solche Dinge automatisch für Sie einrichten, aber ich weiß nicht, dass noch jemand für yaml => markdown => html hat.

Um dies zu erreichen, müssen Sie in die Dokumentation von Gatsby eintauchen und sich die Plugins ansehen, um zu verstehen, wie Sie das tun, was Sie tun möchten.

danke für den Rat, ich glaube nicht, dass ich bereit bin, so viel Zeit in die Erstellung eines Gatsby-Plugins zu investieren. Ich habe meine naive Lösung wie folgt:

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

Dies kann immer noch während der Build-Phase passieren, so dass es für meine Zwecke funktioniert. Ich denke, das Problem ist, dass graphql darauf abzielt, zuerst Daten zu erstellen und eine ähnliche Vorlage für mehrere Seiten zu verwenden. Ich folge einer 'Modul'-Struktur wie folgt:
```
Seiten/
eine Seite/
index.js
_data.yml
Vermögenswerte/
img1.png
eine andere Seite/
...

Eine einfache Möglichkeit, dies zu tun, besteht darin, die Markdown-Felder mit onCreateNode zu kompilieren. https://www.gatsbyjs.org/tutorial/part-four/#programmically -creating-pages-from-data und fügen Sie das kompilierte Feld als neues Feld mit createNodeField .

Das machst du einfach in deiner gatsby-node.js