Gatsby: سؤال - كيف تقرأ Markdown من Frontmatter

يسير البرنامج التعليمي خلال هذا ، خاصة الأجزاء 5-7 https://www.gatsbyjs.org/tutorial/

قد ترغب أيضًا في البدء بأحد المبتدئين - تم إعداد العديد منها بالفعل لدعم تخفيض السعر - https://www.gatsbyjs.org/docs/gatsby-starters/

السؤال أكثر دقة ولا يتم تناوله في البرنامج التعليمي ، لذلك سأعيد فتح هذا.

في رأيي لديك خياران:

1. يمكنك فصل محتوى Markdown الخاص بك إلى ملفات منفصلة واستخدام روابط المسار:

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 Source لمعرفة كيفية إنشاء عقدة MarkdownRemark.

مرحبًا KyleAMathews ، شكرًا لك على اقتراحك. لقد قرأتها ولكن كان من الصعب علي أن أفهم تمامًا كيفية القيام بذلك. أنا أستخدم بداية ولكن هذا كان أكثر تعقيدًا. Starter المستخدم: https://github.com/v4iv/gatsby-starter-business

pieh شكرًا جزيلاً لك على إرشادي. أنت محق. اعتقدت أنه سيكون لدي الكثير من الملفات الصغيرة ، لذلك عملت مع الكود أدناه. أقوم بتوثيق هذا هنا حتى إذا كان لدى شخص آخر نفس المشكلة فيمكنه أيضًا رؤية ذلك.

الخطوة 1: قراءة المحتوى

أقرأ المحتوى بشكل طبيعي عبر Graphql. هذا يعطيني تخفيض السعر كسلسلة. ما زلت بحاجة لتحويل ذلك.

الخطوة 2: التحويل إلى HTML

لهذا قررت أن أترك المحتوى كسلسلة حتى نصل إلى المكون الفعلي الذي سيعرض هذا. هناك أقوم بتحويله إلى تخفيض السعر.

أضف ملاحظة للقيام بذلك برمجيًا. قد تكون قادرًا على تجاهل الملاحظة - الإعداد المسبق - الوبر الموصى به:

تثبيت Remark

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: إضافة محتوى في تخفيض السعر

هناك واحد آخر مسكتك صادفته. لم يكن التنسيق مناسبًا عندما كنت أستخدم خطوطًا متعددة مع >- :

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 قد يكون هذا شيئًا https://github.com/gatsbyjs/gatsby/issues/5729#issuecomment -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 قد ينتج عنه صعوبة في تصحيح الأخطاء

amitjindalnshki انها تعمل بشكل جيد ولكن تحطم تماما بلدي عملية الإنشاء الإنتاج منذ لقد قمت بتركيب مكتبة "الرد-flickity مكون":

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) ، آسف كنت أسافر.
لسوء الحظ ليس لدي فكرة عن هذا. حاولت التحقق من الرمز. يبدو أن المترجم فارغًا يأتي من مكتبة الملاحظات.

يبدو أنك تستخدم حلقة في ملف 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 هي أنك تقوم بهذه العمليات في وقت الإنشاء ، وهو أمر رائع لأننا لا نحتاج بعد ذلك إلى شراء محلل Markdown للمستخدم النهائي!

DSchau ألن يتم شحن محلل ترطيب التطبيق؟

blakenoll أحب

هل لدينا أي شيء متاح لنا لسحب جميع المكونات الإضافية / التهيئة التي قمنا بتضمينها في gatsby-config.js لذلك لا نحتاج إلى تكرار جميع الوظائف التي تم إجراؤها خلف الكواليس التي يوفرها لنا تطبيق Gatsby للملاحظة ؟ هذا من شأنه أن يجعل إنشاء حقول العقدة أسهل قليلاً ؛ ولكنه مرهق بشكل لا يصدق عندما تفكر في الحقول المتداخلة والقابلة للتكرار وتنوع المحتوى لكل صفحة.

blakenoll شكرًا جزيلاً على نصيحة المواجهة. مفيدة للغاية وفعلت ما أحتاجه لاستخدام HTML في المادة الأمامية. ومع ذلك ، يبدو أن أسلوبًا عسيرًا لاستخدام Markdown لإنشاء صفحة ويب تحتاج إلى تمرير أجزاء مختلفة من المحتوى إلى أجزاء مختلفة من الصفحة.

هل هناك أي طريقة يمكننا من خلالها تطبيق نوع من وظيفة markdownParser داخل قسم المادة الأمامية من استعلام GraphQL (على غرار الطريقة التي يمكننا بها معالجة الصور) والتي ستحلل سلسلة markdown الواردة في المادة الأمامية وتحويلها إلى HTML؟ لست خبيرًا في GraphQL ... فقط أحاول التفكير.

هذه قضية مهمة IMO b / c إذا كان أحدهم يستخدم Gatsby مع Netifly CMS ، يوفر Netifly خيارًا بأن يكون لدى العديد من حقول المادة الأمامية تقبل Markdown كقيم. ولكن عند الاستعلام عن هذه الحقول ، يتم إرجاعها كعلامة تجارية في سلسلة بدلاً من تحليلها إلى HTML. تعمل حلول amitjindal و blakenoll ، ولكن كما ذكر DSchau ، ليس من الأفضل إرسال تحليل تخفيض السعر إلى المستخدم إذا كان بإمكاننا تجنبه. أي أفكار من شخص أكثر دراية بـ Gatbsy مني؟

skylarweaver أنا بالتأكيد على نفس الصفحة مع يا. على الرغم من أنني أفهم طبيعة إنشاء حقل عقدة يمكن أن يتم تحليل هذه المعلومات ، فإنه يصبح أيضًا غير عملي بعض الشيء مع بيانات CMS التي قد تحتوي على حقول قابلة للتكرار وكمية كبيرة من الاختلافات في أسماء الحقول للتنقيب فيها ؛ علاوة على عدم وجود طريقة واضحة لإعادة استخدام أي / جميع مكونات Gatsby Remark الإضافية في ذلك الوقت.

+1 ما قاله skylarweaver !

amitjindal ربما سؤال غبي ولكن ماذا تفعل "> -" حتى؟ باستخدام بداية netlify cms ويبدو أنه لا يحدث أي فرق على الإطلاق في الإخراج الناتج سواء كان لدي> أو> - أو | أو لا شيء على الإطلاق.

@ nol13 انظر حجم الكتلة ، إنه يتعلق بالأسطر الجديدة.

كيف يمكنني إدراج جدول؟ هذا لا يعمل

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 .

| الشهر | الادخار | الانفاق | | --- | --- | --- | | يناير | 100 دولار | 900 دولار | | يوليو | 750 دولارًا أمريكيًا | 1000 دولار أمريكي | | ديسمبر | 250 دولارًا | 300 دولارًا أمريكيًا | | أبريل | 400 دولار | 700 دولار |

KyleAMathews شكرًا ، هذا النوع من العمل ، ولكن من الواضح أنك تحتاج إما إلى الرد على تكوين المكون الإضافي والملحقات أو الحصول على نتائج مختلفة. أي خطط لدعم التخفيضات السعرية الأمامية؟ ربما حقل frontmattermd مع الخام frontmatter ؟

omeid ليس لدي أي خطط لا - سيكون هذا

لقد أنشأت مكونًا إضافيًا يجب أن يقوم بذلك: omeid ويضيف حقل frontmattermd إلى عقدة MarkdownRemark.

في البداية ، قبل أن أدرك أنه يمكنني فقط إنشاء عقد ملف تخفيض السعر جديدة لاستهلاك ملاحظة محول gatsby ، توصلت إلى حل مبتذل حقًا يتضمن استدعاء محللات تم تصديرها بواسطة وظيفة setFieldsOnGraphQLNodeType الخاصة بـ gatsby-transformer-note ، وتمريرها في وظيفة جديدة تم إنشاء عقدة تخفيض السعر داخل محلل آخر. سمح هذا بالاستعلام عن أي حقل في عقدة MarkdownRemark باستخدام تعداد حقل مثل يُستخدم لوظيفة المجموعة ، والتي أحببتها حقًا ، ولكن شعرت أن كثيرًا من الاختراق يستخدم فعليًا لأي شيء. لقد حفظتها هنا للأجيال القادمة.

مرحبا WhiteAbeLincoln حاولت التثبيت والاختبار:
npm i gatsby-transformer-remark-frontmatter npm ERR! code ENOVERSIONS npm ERR! No valid versions available for gatsby-transformer-remark-frontmatter

عذرًا ، أدركت أنه لم يتم النشر حتى الآن. سأقوم بنشره بمجرد أن أخرج من العمل وأعلمك بذلك.

- ابي وايت

في 17 حزيران (يونيو) 2019 ، الساعة 22:53 ، كتب broeker [email protected] :

مرحبا WhiteAbeLincoln حاولت التثبيت والاختبار:
npm أنا غاتسبي-المحولات-الملاحظة-المادة الأمامية npm خطأ! ENOVERSIONS رمز npm خطأ! لا توجد إصدارات صالحة متاحة لـ gatsby-transformer-note-frontmatter

-
أنت تتلقى هذا لأنه تم ذكرك.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بكتم صوت الموضوع.

WhiteAbeLincoln جربت gatsby-transformer-note-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
  });
}
};

أنا مهتم بإنشاء مكون إضافي لتحليل علامات YAML المخصصة لتحقيق ما سبق دون استخدام createNodeField (بنفس طريقة تحليل عناوين URL للصور بدقة).
هل يمكن لأي شخص أن يوجهني إلى الكود حيث يتم تحليل عناوين URL للصور لمعرفة مثال على كيفية إجراء ذلك حاليًا بدقة؟

👋 بالنسبة لأولئك الذين يستخدمون MDX ، قمت بإنشاء مكون إضافي لإضافة دعم الواجهة الأمامية https://www.gatsbyjs.org/packages/gatsby-plugin-mdx-frontmatter/

zslabs ، غالبًا لا ترى حلًا تم نشره "منذ 9 ساعات"! سأعطيها تدور! عمل جيد.

لقد كنت أعاني من هذا منذ أن أردت استخدام بنية بيانات أكثر تعقيدًا لإحدى صفحاتي.
في المقدمة ، كان لدي مجموعة من الأقسام ، مع عدد قليل من الحقول مثل العنوان والصورة المميزة ، ثم في كل منها كان لدي جسم مصنوع من تخفيض السعر.
لم يكن استخدام 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")
}

لقد حللت هذا بشكل مختلف قليلا.

هذا لا يعمل تماما بالنسبة لي. أولاً ، تلقيت خطأ برفض defaultValue: true للوسيطة from - يجب أن تكون سلسلة. تغيير ذلك إلى 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-note ": إذا حاولت هذه الطريقة؟