Gatsby: 質問-frontmatterからMarkdownを読み取る方法

チュートリアルでは、これ、特にパート5〜7について説明しますhttps://www.gatsbyjs.org/tutorial/

スターターの1つから始めることもできます—その多くはすでにマークダウンサポートがセットアップされています— https://www.gatsbyjs.org/docs/gatsby-starters/

質問はより微妙で、チュートリアルではカバーされていないので、これを再開します。

私の意見では、2つの選択肢があります。

1. マークダウンコンテンツを分離してファイルを分離し、パスリンクを使用できます。

Separate file - let's call it `someContent.md`
```md
### This is the actual content in **MarkDown** format.

- This is the first row
- This is second row
- This is third row
```
and reference that file in your main file (by relative path):
```md
halfBlocks:
  - title: This is first title
    content: "./someContent.md"
```
then in query you could
```
halfBlocks {
  content {
    childMarkdownRemark {
      html
    }
}
```

1. 他のアプローチは、これをプログラムで処理することです-フロントマターフィールドのマークダウンノードを作成し、 createNodeField介してそれらを追加します。 これはもっと複雑です。 おそらく、Contentfulソースプラグインを参照して、MarkdownRemarkノードを作成する方法を確認する必要があります。

こんにちは@KyleAMathewsあなたの提案をありがとう。 私はそれらを読みましたが、これをどうやって行うかを完全に理解するのは困難でした。 私はスターターを使用していますが、これはもっと複雑でした。 使用したスターター： https ：

@piehご案内ありがとうございます。 あなたが正しいです。 小さなファイルが多すぎると思ったので、以下のコードでこれを機能させました。 私はここでこれを文書化しているので、他の誰かが同じ問題を抱えている場合、彼らもこれを見ることができます。

ステップ1：コンテンツを読む

私は通常Graphqlを介してコンテンツを読んでいます。 これにより、マークダウンが文字列として表示されます。 私はまだそれを変換する必要があります。

ステップ2：HTMLへの変換

このために、これを表示する実際のコンポーネントに到達するまで、コンテンツを文字列として許可することにしました。 そこで私はそれをマークダウンに変換します。

これをプログラムで行うためのコメントを追加します。 remark-preset-lint-recommendedを無視できる場合があります。

インストール備考

yarn add remark remark-preset-lint-recommended remark-html

インポート

import remark from 'remark';
import recommended from 'remark-preset-lint-recommended';
import remarkHtml from 'remark-html';

レンダリング
レンダリング部分の後半で、 contentが文字列として読み取られたマークダウンであると想定します。

content = remark()
      .use(recommended)
      .use(remarkHtml)
      .processSync(content).toString();

これで、コンテンツをHTMLとして再解釈できるようになりました。

ステップ3：マークダウンにコンテンツを追加する

私が遭遇したもう1つの落とし穴があります。 >-複数行を使用していたとき、フォーマットが適切ではありません

content: >-
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

しかし、パイプ記号|すると、うまく機能します。

content: |
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

今のところ私はこれを閉じています。 よろしければ、お気軽に再開してください。

ありがとう！

フロントマター（正確にはタイトルと抜粋）にもマークダウンを使用したいと思いますが、デフォルトでサポートされているはずです。

gatsby-transformer-remarkが、たとえばtitle.mdがマークダウンフィールドであることを理解できるように、命名規則があると便利です。

@omeid @ thorn0これは、gatsby-transformer-remarkで直接サポートされているものかもしれませんが、それまでの間、 https ： 。 -395701042およびcreateNodeField

すでにクローズされた問題についてコメントして申し訳ありませんが、皆さんが参照した内容に従って、自分のgatsby-node.jsで使用したスニペットを共有したいと思いました。

// Need to `yarn add remark remark-html`, then include the following code in
// gatsby-node.js.
const remark = require('remark');
const remarkHTML = require('remark-html');

exports.onCreateNode = ({ node }) => {
  // Conditionals, etc. can be used here, but I omitted those just for example's sake.
  const markdown = node.frontmatter.my_field;
  node.frontmatter.my_field = remark()
    .use(remarkHTML)
    .processSync(markdown)
    .toString();
  return node;
};

それで、 createNodeFieldを使用せずにそうしても大丈夫ですか？ よくわかりません。

@ thorn0活用createNodeFieldの代わりにnode.frontmatter.my_field =変異ので、 nodeかもしれデバッグバグにハードでの結果

@amitjindal @nshki正常に動作していますが、「react-flickity-component」ライブラリをインストールしたため、本番ビルドプロセスが完全にクラッシュします。

success delete html and css files from previous builds — 0.626 s
success open and validate gatsby-config — 0.018 s
success copy gatsby files — 0.075 s
success onPreBootstrap — 2.782 s
error UNHANDLED EXCEPTION


  TypeError: Cannot set property 'Compiler' of null

  - index.js:16 plugin
    [blog]/[remark-html]/index.js:16:17

  - index.js:271 Function.use
    [blog]/[unified]/index.js:271:25

  - gatsby-node.js:63 exports.onCreateNode.postscriptumsMarkdown.forEach.postscr    iptum
    /home/projects/blog/gatsby-node.js:63:12

  - Array.forEach

  - gatsby-node.js:61 Object.exports.onCreateNode
    /home/projects/blog/gatsby-node.js:61:29

  - api-runner-node.js:110 runAPI
    [blog]/[gatsby]/dist/utils/api-runner-node.js:110:36

  - api-runner-node.js:187 
    [blog]/[gatsby]/dist/utils/api-runner-node.js:187:33

  - map.js:27 
    [blog]/[async]/internal/map.js:27:9

  - eachOfLimit.js:66 replenish
    [blog]/[async]/internal/eachOfLimit.js:66:17

  - eachOfLimit.js:50 iterateeCallback
    [blog]/[async]/internal/eachOfLimit.js:50:17

  - onlyOnce.js:12 module.exports
    [blog]/[async]/internal/onlyOnce.js:12:16

  - map.js:29 
    [blog]/[async]/internal/map.js:29:13

  - util.js:16 tryCatcher
    [blog]/[bluebird]/js/release/util.js:16:23

  - nodeify.js:23 Promise.successAdapter
    [blog]/[bluebird]/js/release/nodeify.js:23:30

  - promise.js:566 Promise.module.exports.Promise._settlePromise
    [blog]/[bluebird]/js/release/promise.js:566:21

  - promise.js:606 Promise.module.exports.Promise._settlePromiseCtx
    [blog]/[bluebird]/js/release/promise.js:606:10


Waiting for the debugger to disconnect...

Process finished with exit code 130 (interrupted by signal 2: SIGINT)

Webpackからライブラリを除外しようとしていますが機能しません（ @see https://github.com/gatsbyjs/gatsby/issues/7599）

こんにちはデビッド（@comxd）、申し訳ありませんが私は旅行していました。
残念ながら、私にはこれについての洞察がありません。 コードをチェックインしてみました。 nullのコンパイラは、リマークライブラリから取得されているようです。

gatsby-node.jsファイルでループを使用しているようです。
それは、マークダウンではない、またはさらに悪いことに空ではなく、あなたがそれを処理しようとしているいくつかのコンテンツに関連している可能性があります。 その中にいくつかのconsole.logステートメントを入れてみて、空の何かがこれを引き起こしているパターンを見つけるかどうかを確認してください。

これは完全にオフである可能性がありますが、以下のようなマークダウンコンポーネントを作成して、マークダウンをHTMLに変換する必要がある場所でテンプレートで使用することはできません。

import React from 'react'
import PropTypes from 'prop-types'
import showdown from 'showdown'

const converter = new showdown.Converter()

const MarkdownContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: converter.makeHtml(content) }} />
)

MarkdownContent.propTypes = {
  content: PropTypes.string,
  className: PropTypes.string,
}


export default MarkdownContent

@blakenollは間違いなく完全にオフではありません！ それは合理的なアプローチです。

とはいえ、Gatsbyの大きな利点の1つは、ビルド時にこれらの操作を実行できることです。これは、エンドユーザーにMarkdownパーサーを購入する必要がないため便利です。

@DSchauアプリが再水和されたときに、Markdownパーサーが実際にユーザーに出荷されませんか？

@blakenoll独創的な考え方が大好きです！

gatsby-config.jsに含まれているすべてのリマークプラグイン/構成をプルインするために利用できるものはありますか？ギャツビーのリマークの実装が提供している舞台裏で行われたすべての機能を複製する必要はありません？ これにより、ノードフィールドの生成が少し簡単になります。 しかし、ネストされた繰り返し可能なフィールドとページごとのコンテンツのバリエーションについて考えると、非常に面倒です。

@blakenoll対決のヒントをありがとう。 非常に役に立ち、フロントマターでHTMLを使用するために必要なことを実行しました。 とはいえ、Markdownを使用して、ページのさまざまな部分にさまざまなコンテンツを渡す必要があるWebページを作成するための不格好なアプローチのようです。

ある種のmarkdownParser関数をgraphQLクエリのfrontmatterセクション内に適用して（画像を操作する方法と同様に）、frontmatter内の着信マークダウン文字列を解析してHTMLに変換する方法はありますか？ graphQLの専門家ではありません...ただ考えようとしているだけです。

これは、Netifly CMSでGatsbyを使用している場合、IMO b / cの重要な問題です。Netiflyには、さまざまなフロントマターフィールドにMarkdownを値として受け入れるオプションがあります。 ただし、これらのフィールドをクエリすると、HTMLに解析されるのではなく、文字列でマークダウンとして返されます。 @amitjindalと@blakenollのソリューションは機能しますが、 @ DSchauが述べたように、回避できるのであれば、勧めできません。 私よりGatbsyに精通している人からの考えはありますか？

@skylarweaver私は間違いなくあなたと同じページにいます。 この情報を解析できるノードフィールドを作成する性質は理解していますが、繰り返し可能なフィールドと、ふるいにかけるフィールド名のバリエーションが多いCMSデータでは少し扱いに​​くくなります。 その時点でGatsbyRemarkプラグインの一部またはすべてを再利用する明確な方法がないことに加えて。

@skylarweaverが言ったことを+1して

@amitjindalばかげた質問かもしれませんが、 ">-"は何をしますか？ netlify cmsスターターを使用すると、>、>-、|があるか、まったくないかにかかわらず、生成される出力にまったく違いがないようです。

@を参照してくださいブロックスカラーを、それは改行についてです。

どうすればテーブルを挿入できますか？ これは動作しません

content: |
        |   |   |   |   |   |
        |---|---|---|---|---|
        |   |   |   |   |   |
        |   |   |   |   |   |
        |   |   |   |   |   |

@ qnguyen12 https://jmalarcon.github.io/markdowntables/のようなツールを使用して、変換を支援してみます。

はい、テーブルではなくソースとしてレンダリングすることを意味します
例えば：

text: |
        test   
        ### This is the actual content in **MarkDown** format.  
        |Month|Savings|Spending|
        |--- |--- |--- |
        |January|$100|$900|
        |July|$750|$1000|
        |December|$250|$300|
        |April|$400|$700|

それは生成します：
テスト

これは、 MarkDown形式の実際のコンテンツです。

|月|節約|支出| | --- | --- | --- | | 1月| $ 100 | $ 900 | | 7月| $ 750 | $ 1000 | | 12月| $ 250 | $ 300 | | 4月| $ 400 | $ 700 |

@KyleAMathewsありがとう、その種の作業ですが、明らかに、 frontmattermdフィールドと生のfrontmatter ？

@omeidいいえ、計画はありません—これは、誰かが作成してコミュニティと共有するための優れたプラグインになります。

これを行うプラグインを作成しました： gatsby-transformer-remark-frontmatter 。 私のテストからはうまくいくようで、私がクライアントのために行っているプロジェクトでそれを使用することを計画していますが、皆さんが見て、間違っているように見えるものがあるかどうか教えていただければ幸いです、gatsbyプラグインを書くのは初めてなので。 @omeidによって提案されたルートを取り、MarkdownRemarkノードにfrontmattermdフィールドを追加します。

当初、gatsby-transformer-remarkが消費する新しいマークダウンファイルノードを作成できることに気付く前に、gatsby-transformer-remarkのsetFieldsOnGraphQLNodeType関数によってエクスポートされたリゾルバーを呼び出し、新しい別のリゾルバー内に作成されたマークダウンノード。 これにより、グループ関数に使用されるようなフィールドenumを使用してMarkdownRemarkノード上の任意のフィールドをクエリできるようになりました。これは私が本当に気に入ったものですが、実際に何かに使用するのはハックのように感じました。 後世のためにここに保存しました。

こんにちは@WhiteAbeLincoln私はインストールしてテストしようとしました：
npm i gatsby-transformer-remark-frontmatter npm ERR! code ENOVERSIONS npm ERR! No valid versions available for gatsby-transformer-remark-frontmatter

申し訳ありませんが、まだnpmに公開していないことに気付きました。 仕事を終えたら公開しますのでお知らせします。

—阿部ホワイト

2019年6月17日には、午前22時53で、broeker [email protected]書きました：

こんにちは@WhiteAbeLincoln私はインストールしてテストしようとしました：
npm i gatsby-transformer-remark-frontmatter npm ERR！ コードENOVERSIONSnpm ERR！ gatsby-transformer-remark-frontmatterに使用できる有効なバージョンはありません

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

@WhiteAbeLincoln gatsby-transformer-remark- frontmatterを試しましたが、エラーが発生しました。

エラー＃11325

サイトの「gatsby-node.js」が、存在しないコンポーネントを含むページを作成しました。

このエラーが発生しますか？

これは元々、 @ obeidによってリポジトリの問題ログで報告され

たぶん私はそれを正しく使用していません。 だから、いくつかの助けに感謝します。

@nshkiの回答の上に構築し、ノードの変更について@piehのコメントを付けます。 これは私にとって完全に機能します：

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
  const my_field = node.frontmatter.my_field;

  if (my_field) {
    const value = remark()
      .use(remarkHTML)
      .processSync(my_field)
      .toString();

    // new node at:
    // fields {
    //   my_field_html
    // }
    createNodeField({
      name: `my_field_html`,
      node,
      value
    });
  }
};

編集： my_field => my_field_html

@aziaziazi配列にネストされたフィールドに対して同じことを行うにはどうすればよいですか？

---
pressEventsList:
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/01.jpg'
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/02.jpg'
---

各pressEventsList[i].bodyを変換する必要があります。

@alexeychikk pressEventListを探してから、コンテンツをマッピングして結果の配列を作成すると思います。

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
const pressEventList = node.frontmatter.pressEventList;

if (pressEventList) {
  const value = pressEventList.map(event =>
     remark()
    .use(remarkHTML)
    .processSync(event.body)
    .toString()
  )

  createNodeField({
    name: `pressEventList`,
    node,
    value
  });
}
};

createNodeFieldを使用せずに上記を実現するためにカスタムYAMLタグを解析するプラグインを作成することに興味があります（シャープが画像のURLを解析するのと同じ方法）。
誰かが私に画像のURLが解析されるコードを教えて、これが現在シャープでどのように行われているかの例を見ることができますか？

👋MDXを使用している人のために、frontmatterサポートを追加するプラグインを作成しましたhttps://www.gatsbyjs.org/packages/gatsby-plugin-mdx-frontmatter/

@zslabs 、「9時間前」に解決策が投稿されることは

ページの1つにもっと複雑なデータ構造を使用したかったので、これに苦労してきました。
フロントマターには、タイトルや注目の画像などのいくつかのフィールドを含む一連のセクションがあり、それぞれにマークダウンで作成されたボディがありました。
createNodeFieldを使用しても、既存のフロントマター構造に追加されていない独自のフィールドで作成されているため、論理的にリンクするのに問題があったため、それはできませんでした。
最終的にcreateFieldExtensionを使用して、section.bodyが照会されたときに、HTMLで返されるようにしました。
これが良い解決策ではない場合は、誰かが私を訂正してください、それは私にとってはうまくいくようですが、私はそれがこれについて行く間違った方法だとそのしつこい感じを持っています。

私のフロントマター構造は次のようになります。

templateKey: project-entry
date: 2020-06-22T13:16:57.702Z
featuredproject: true
title: Project title
description: Description for listing the project on other pages
featuredimage: Image for listing the project on other pages
featuredpost: false
sections:
  - heading: Section heading
    standout: false
    intro: >-
      Introduction to be displayed separately to body
    body: >-
       ## section title
       * bullet point
       * bullet point
       Some other text here

そして、gatsby-node.jsで使用したコード

exports.createSchemaCustomization = ({actions}) => {
  const { createTypes, createFieldExtension} = actions

  createFieldExtension({
    name: 'toHTML',
    extend:() => ({
        resolve(source) {
          return remark().use(remarkHTML).processSync(source.body).toString()
        }
      })
  })
  const typeDefs = `
  type MarkdownRemark implements Node {
    frontmatter: Frontmatter
  }
  type Frontmatter <strong i="14">@infer</strong> {
    sections: [section]
  }
  type section <strong i="15">@infer</strong> {
    body: String <strong i="16">@toHTML</strong>
  }
  `
  createTypes(typeDefs)
}

興味のある人のために、カスタムYAMLタイプを使用して解決し、次のように任意のフィールドをマークダウンとして解析できるようにしました。

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

これを行うには、カスタムタイプを作成してから、灰白質のYAMLパーサーをオーバーライドします。

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

私はこれを少し違う方法で解決しました。 @mdというフィールド拡張を作成し、それをフロントマタータイプ定義で使用し、フィールドの名前を変更して、目的の抽象化を実現しました。

exports.createSchemaCustomization = ({ actions }) => {
  actions.createFieldExtension({
    name: "md",
    args: {
      from: {
        type: "String!",
        defaultValue: true,
      },
    },

    extend() {
      return {
        args: {
          from: "String!",
        },
        resolve(source, args) {
          const fieldValue = source[args.from]
          return convertToHTML(fieldValue)
        },
      }
    },
  })
  const typeDefs = `
    type MarkdownRemark implements Node <strong i="7">@infer</strong> {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      markdownField: String! <strong i="8">@md</strong>
    }
  `
  actions.createTypes(typeDefs)
}

使用例は次のとおりです。

...
frontmatter {
        title: markdownField(from: "title")
        subtitle: markdownField(from: "subtitle")
}

私はこれを少し違う方法で解決しました。

これは私にはうまくいきません。 最初に、引数fromのdefaultValue: trueを拒否するエラーが発生します。これは文字列である必要があります。 これをdefaultValue: ''に変更すると、次のエラーが発生します。

Encountered an error parsing the provided GraphQL type definitions:
Argument "from" of required type "String!" was not provided.

  1 |
  2 |     type MarkdownRemark implements Node <strong i="11">@infer</strong> {
  3 |       frontmatter: Frontmatter
  4 |     }
  5 |     type Frontmatter {
> 6 |       markdownField: String! <strong i="12">@md</strong>
    |                              ^
  7 |     }

これを解決する方法がわかりません。

興味のある人のために、カスタムYAMLタイプを使用して解決し、次のように任意のフィールドをマークダウンとして解析できるようにしました。

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

これを行うには、カスタムタイプを作成してから、灰白質のYAMLパーサーをオーバーライドします。

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

この方法を試してみると、「gatsby-transformer-remark」のプラグインオプションが無効になります。