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/ blog / author.yaml

マークダウンを介してyamlフィールドを実行する場合—メディアタイプをマークダウンとして指定するサブノードを作成すると、gatsby-transformer-remarkがそれらをhtmlに変換します（例： https ：

それが超高レベルであまり実用的でない場合は申し訳ありません。 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が最初にデータを構築し、複数のページに同様のテンプレートを使用することを目的としていることだと思います。 私は次のような「モジュール」構造に従っています：
`` `
ページ/
1ページ/
index.js
_data.yml
資産/
img1.png
別のページ/
..。

これを行う簡単な方法は、onCreateNodeを使用してマークダウンフィールドをコンパイルすることです。 https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-dataそして、コンパイルされたフィールドをcreateNodeField新しいフィールドとして追加します。

あなたはあなたのgatsby-node.jsでそれをするでしょう