Gatsby: प्रश्न - फ्रंटमैटर से मार्कडाउन कैसे पढ़ें

ट्यूटोरियल इसके माध्यम से चलता है, विशेष रूप से भागों 5-7 https://www.gatsbyjs.org/tutorial/

आप शुरुआत में से किसी एक के साथ भी शुरू करना चाह सकते हैं - जिनमें से कई में पहले से ही सेटअप का मार्कडाउन समर्थन है - https://www.gatsbyjs.org/docs/gatsby-starter/

प्रश्न अधिक बारीक है और ट्यूटोरियल द्वारा कवर नहीं किया गया है, इसलिए मैं इसे फिर से खोलूंगा।

मेरी राय में आपके पास 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 माध्यम से जोड़ना। यह अधिक शामिल है। आपको शायद सामग्री के स्रोत को ब्राउज़ करने की आवश्यकता होगी प्लगइन देखें कि कैसे MarkdownR एन्क्रिप्शन नोड बनाने के लिए।

हाय @KyleAMathews आपके सुझाव के लिए धन्यवाद। मैंने उन्हें पढ़ा था लेकिन इस बारे में पूरी तरह से समझ पाना मेरे लिए कठिन था। मैं एक स्टार्टर का उपयोग कर रहा हूं लेकिन यह अधिक शामिल था। स्टार्टर का उपयोग किया जाता है: https://github.com/v4iv/gatsby-starter-business

@ डफ मुझे मार्गदर्शन देने के लिए बहुत बहुत धन्यवाद। तुम सही हो। मुझे लगा कि मेरे पास बहुत सारी छोटी फाइलें होंगी, इसलिए मुझे नीचे दिए गए कोड के साथ काम करना पड़ा। मैं यहां यह दस्तावेज दे रहा हूं ताकि अगर किसी और को भी यही समस्या हो तो वे भी इसे देख सकें।

चरण 1: सामग्री पढ़ना

मैं ग्राफ़िकल के माध्यम से सामान्य रूप से सामग्री पढ़ रहा हूं। यह मुझे एक स्ट्रिंग के रूप में मार्कडाउन देता है। मुझे अभी भी इसे बदलने की जरूरत है।

चरण 2: HTML में बदलना

इसके लिए मैंने कंटेंट को स्ट्रिंग से तब तक जाने देने का फैसला किया जब तक हम वास्तविक घटक तक नहीं पहुँच जाते जो इसे प्रदर्शित करने वाला है। वहां मैंने इसे मार्कडाउन में बदल दिया।

इस प्रोग्राम को करने के लिए टिप्पणी जोड़ें। आप टिप्पणी-प्रीसेट-लिंट-अनुशंसित को अनदेखा करने में सक्षम हो सकते हैं:

रिमार्क स्थापित करें

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 यह कुछ ऐसा हो सकता है जिसका हम सीधे gatsby- ट्रांसफार्मर-टिप्पणी में समर्थन करते हैं, लेकिन इस बीच, आप एक प्लगइन बना सकते हैं जो आपके लिए ऐसा करता है जैसे 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 मई डिबग कीड़े के लिए कड़ी मेहनत के परिणाम

@amitjindal @nshki यह अच्छी तरह से काम कर रहा है, लेकिन जब से मैंने "प्रतिक्रिया-झिलमिलाहट-घटक" पुस्तकालय स्थापित किया है, पूरी तरह से मेरी उत्पादन प्रक्रिया को दुर्घटनाग्रस्त कर रहा है:

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)

लाइब्रेरी को काम न करने वाले पुस्तकालय से बाहर करने की कोशिश ( @see https://github.com/gatsbyjs/gatsby/issues/7599)

हाय डेविड (@comxd), क्षमा करें मैं यात्रा कर रहा था।
दुर्भाग्य से इसमें मेरी कोई अंतर्दृष्टि नहीं है। मैंने कोड में जांच करने की कोशिश की। अशक्त पर संकलक टिप्पणी पुस्तकालय से आ रहा है।

आप अपनी gatsby-node.js फ़ाइल में एक लूप का उपयोग कर रहे हैं।
यह कुछ ऐसी सामग्री से संबंधित हो सकता है जो मार्कडाउन या खराब खाली नहीं है और आप इसे संसाधित करने का प्रयास कर रहे हैं। उस में कुछ कंसोल.लॉग स्टेटमेंट डालने की कोशिश करें और देखें कि क्या आपको एक पैटर्न मिलता है जहां कुछ खाली हो रहा है।

यह पूरी तरह से बंद हो सकता है, लेकिन क्या आप नीचे दिए गए मार्कडाउन घटक की तरह नहीं बना सकते हैं जिसे आप अपने टेम्प्लेट में उपयोग कर सकते हैं कहीं भी मार्कडाउन को 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 निश्चित रूप से पूरी तरह से बंद नहीं है! यह एक उचित दृष्टिकोण है।

उस ने कहा, गैट्सबी का एक बड़ा लाभ यह है कि आप उन कार्यों का निर्माण समय पर करते हैं, जो अच्छा है क्योंकि तब हमें अंतिम उपयोगकर्ता को मार्कडाउन पार्सर की खरीदारी करने की आवश्यकता नहीं है!

@DSchau मार्कडाउन पार्सर वास्तव में उपयोगकर्ता को एप-हाइड्रेटेड होने पर नीचे नहीं भेजा जाएगा?

@blakenoll सोच से बाहर का प्यार!

क्या हमारे पास हमारे पास उपलब्ध सभी टिप्पणी प्लगइन्स / कॉन्फ़िगरेशन में से कुछ भी उपलब्ध हैं, जिन्हें हमने gatsby-config.js भीतर शामिल किया है, इसलिए हमें पर्दे के पीछे की गई सभी कार्यक्षमता की नकल करने की आवश्यकता नहीं है, Gatsby के कार्यान्वयन का कार्यान्वयन हमें प्रदान कर रहा है। ? यह नोड क्षेत्रों को थोड़ा आसान बनाता है; लेकिन अविश्वसनीय रूप से बोझिल जब आप नेस्टेड, दोहराने योग्य क्षेत्रों और प्रति पृष्ठ सामग्री की भिन्नता के बारे में सोचते हैं।

@blakenoll अपने तसलीम टिप के लिए बहुत बहुत धन्यवाद। सुपर मददगार है और मुझे फ्रंटमैटर में HTML का उपयोग करने की आवश्यकता है। उस ने कहा, मार्कडाउन का उपयोग करने के लिए एक वेब पेज बनाने के लिए एक भद्दा दृष्टिकोण लगता है जिसे पेज के विभिन्न हिस्सों में सामग्री के विभिन्न टुकड़ों को पारित करने की आवश्यकता होती है।

क्या कोई तरीका है कि हम किसी तरह के markdownParser फ़ंक्शन को अपनी ग्राफकलाइन क्वेरी के अग्र भाग (जिस तरह से हम छवियों में हेरफेर कर सकते हैं) के भीतर लागू कर सकते हैं जो फ्रंटमैटर में आने वाले मार्कडाउन स्ट्रिंग को पार्स करेगा और इसे HTML में बदल देगा? रेखांकन विशेषज्ञ नहीं ... सिर्फ सोचने की कोशिश कर रहा है।

यह एक महत्वपूर्ण मुद्दा है IMO b / c अगर कोई नेट्सीली सीएमएस के साथ Gatsby का उपयोग कर रहा है, तो Netifly विभिन्न फ्रंटमीटर क्षेत्रों को मार्कडाउन को मान के रूप में स्वीकार करने का विकल्प प्रदान करता है। लेकिन जब उन फ़ील्ड को क्वेरी करते हैं, तो उन्हें HTML के लिए पार्स किए गए के बजाय एक स्ट्रिंग में मार्कडाउन के रूप में लौटा दिया जाता है। @amitjindal और @blakenoll के समाधान काम करते हैं, लेकिन जैसा कि @DSchau ने उल्लेख किया है, यह उपयोगकर्ता के लिए

@skylarweaver मैं निश्चित रूप से हां के साथ एक ही पृष्ठ पर हूं। जब मैं एक नोड फ़ील्ड बनाने की प्रकृति को समझता हूं, जिसमें यह जानकारी पार्स हो सकती है, तो यह सीएमएस डेटा के साथ थोड़ा सा अनपेक्षित भी हो सकता है जिसमें दोहराए जाने वाले फ़ील्ड और फ़ील्ड नामों की बड़ी मात्रा में बदलाव हो सकते हैं; उस समय किसी भी / सभी गैट्सबी रीमार्क प्लगइन्स को फिर से उपयोग करने का एक स्पष्ट तरीका नहीं होने के शीर्ष पर।

+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|

यह उत्पन्न करता है:
परीक्षा

यह मार्कडाउन प्रारूप में वास्तविक सामग्री है।

| महीना | बचत | खर्च | | --- | --- | --- | | जनवरी | $ 100 | $ 900 | | जुलाई | $ 750 | $ 1000 | | दिसंबर | $ 250 | $ 300 | | अप्रैल | $ 400 | $ 700 |

@KyleAMathews धन्यवाद, उस तरह का काम, लेकिन जाहिर है कि आपको या तो टिप्पणी प्लगइन कॉन्फ़िगरेशन और प्लगइन्स का जवाब देने की आवश्यकता है या आपको अलग-अलग परिणाम मिलते हैं। मार्कडाउन फ्रंटमैटर का समर्थन करने की कोई योजना? शायद एक frontmattermd कच्चे के साथ साथ क्षेत्र frontmatter ?

@ मेरे पास कोई योजना नहीं है - यह समुदाय के साथ किसी को बनाने और साझा करने के लिए एक महान प्लगइन होगा!

मैंने एक प्लगइन बनाया जो यह करना चाहिए: गैट्सबी-ट्रांसफॉर्मर-कमेंट-फ्रंटमैटर । यह मेरे परीक्षण से काम करने लगता है, और मैं इसे एक परियोजना में उपयोग करने की योजना बना रहा हूं जो मैं एक ग्राहक के लिए कर रहा हूं, लेकिन मैं इसकी सराहना करूंगा यदि आप लोग एक नज़र डालेंगे और मुझे बताएंगे कि क्या ऐसा कुछ है जो गलत दिखता है , क्योंकि यह मेरी पहली बार एक gatsby प्लगइन लेखन है। यह मार्ग @omid द्वारा सुझाया गया है और frontmattermd फ़ील्ड जोड़ता है।

प्रारंभ में, इससे पहले कि मुझे एहसास हुआ कि मैं उपभोग करने के लिए gatsby- ट्रांसफॉर्मर-टिप्पणी के लिए बस नए मार्कडाउन फ़ाइल नोड्स बना सकता हूं, मैं वास्तव में हैकी समाधान के साथ आया, जिसमें गैट्सबी-ट्रांसफॉर्मर-टिप्पणी के setFieldsGraphQLNodeType फ़ंक्शन द्वारा निर्यात किए गए रिज़ॉल्वर को कॉल करना और एक नया पास करना शामिल है एक और रिवाल्वर के भीतर बनाया गया मार्कडाउन नोड। यह मार्कडाउनमार्क नोड पर किसी भी क्षेत्र को क्वेरी करने की अनुमति देता है जैसे कि एक फ़ील्ड एनम का उपयोग समूह फ़ंक्शन के लिए किया जाता है, जिसे मैं वास्तव में पसंद करता था, लेकिन यह महसूस किया कि वास्तव में किसी भी चीज़ के लिए उपयोग करने के लिए हैक की तरह। मैंने इसे यहाँ पोस्टीरिटी के लिए सहेजा है।

हाय @WhiteAbeLincoln मैं स्थापित करने और परीक्षण करने की कोशिश की:
npm i gatsby-transformer-remark-frontmatter npm ERR! code ENOVERSIONS npm ERR! No valid versions available for gatsby-transformer-remark-frontmatter

क्षमा करें, मुझे एहसास हुआ कि अभी तक npm पर प्रकाशित नहीं हुआ है। एक बार काम से हटने के बाद मैं इसे प्रकाशित कर दूंगा और आपको बता दूंगा।

- अबे सफेद

17 जून 2019 को, 22:53 बजे, broeker सूचनाएं @github.com ने लिखा:

हाय @WhiteAbeLincoln मैं स्थापित करने और परीक्षण करने की कोशिश की:
npm i gatsby- ट्रांसफॉर्मर-टिप्पणी-फ्रंट-फ्रंट npm ERR! कोड एनवीआर ईआरआर! Gatsby- ट्रांसफॉर्मर-टिप्पणी-फ्रंटमैटर के लिए कोई मान्य संस्करण उपलब्ध नहीं है

-
आप इसे प्राप्त कर रहे हैं क्योंकि आपका उल्लेख किया गया था।
इस ईमेल का उत्तर सीधे दें, इसे GitHub पर देखें, या थ्रेड को म्यूट करें।

@HiteAbeLincoln मैंने गैट्सबी-ट्रांसफॉर्मर-टिप्पणी-फ्रंटमेटर की कोशिश की, लेकिन इसने मुझे एक त्रुटि दी।

त्रुटि # 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 (उसी तरह तेज पार्स इमेज URL) का उपयोग किए बिना ऊपर प्राप्त करने के लिए कस्टम YAML टैग पार्स करने के लिए एक प्लगइन बनाने में दिलचस्पी रखता हूं।
क्या कोई मुझे उस कोड की ओर संकेत कर सकता है जहां छवि URL को इस बात का उदाहरण देखने के लिए पार्स किया गया है कि वर्तमान में यह कैसे तेज है?

👋 MDX का उपयोग करने वालों के लिए, मैंने frontmatter समर्थन को जोड़ने के लिए एक प्लगइन बनाया https://www.gatsbyjs.org/packages/gatsby-plugin-mdx-frontmatter/

@zslabs , यह अक्सर आप एक समाधान "9 घंटे पहले" पोस्ट देखा नहीं है! मैं इसे एक स्पिन दे दूँगा! अच्छा काम।

जब से मैं अपने पृष्ठों में से एक के लिए एक अधिक जटिल डेटा संरचना का उपयोग करना चाहता था, तब से मैं इससे जूझ रहा हूं।
फ्रंटमैटर में मेरे पास कुछ खंड थे, जैसे कुछ फ़ील्ड जैसे शीर्षक और चित्रित छवि, और फिर प्रत्येक पर मेरे पास एक शरीर था, जो मार्काडाउन से बना था।
CreateNodeField का उपयोग करना मेरे लिए ऐसा नहीं कर रहा था क्योंकि मुझे उन्हें तार्किक रूप से लिंक करने में समस्या थी क्योंकि वे अपने स्वयं के क्षेत्र में बनाए गए हैं, मौजूदा फ्रंटमैटर संरचना में संलग्न नहीं हैं।
मैंने createFieldExtension का उपयोग करते हुए समाप्त किया, ताकि जब मेरा अनुभाग। किसी व्यक्ति को समझा जाए, तो वह 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") },
      },
    }
  ]
}

अगर मुझे इस विधि को आज़माने के लिए "गैट्सबी-ट्रांसफॉर्मर-कमेंट" के लिए 'अमान्य प्लगइन विकल्प' मिलते हैं?