Question

我正在使用Contentful的Rich-Text Field类型来构建页面，我拥有的Embedded_Blocks之一是我正在用来构建表的Markdown字段类型：

降价字段类型：

| Title | Title | 
| ---------- | ---------- | 
| Cell | Cell |

我可以检索Rich-Text数据并像这样构建我的Embedded_Blocks：

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
   const fields = node.data.target.fields;
   switch (node.data.target.sys.contentType.sys.id) {
      case 'video':
          const url = (fields.url['en-US']);
          return <Video url={url}/>

      // This is how I'm currently trying to convert Markdown to HTML
      ///////////////////////////////////////////////////////////////
      case 'markdown':
          const markdown = (fields.markdown['en-US']);
          console.log('markdown', markdown);
          return <div dangerouslySetInnerHTML={{ __html: markdown }} />
      default:
          return <div>Fallback</div>
   }
},

我遇到的问题是，它只是返回一个字符串，这是因为我在将markdown传递给dangerouslySetInnerHTML={{ __html: markdown }}之前没有将其转换为HTML。

如何将Markdown转换为HTML，以便可以使用dangerouslySetInnerHTML={{ __html: markdown }}进行渲染？

Answer 1

在盖茨比内部执行此操作的最合适方法是在盖茨比onCreateNode生命周期挂钩内创建子节点。该钩子仅在nodejs进程中被调用，并在下载Contentful条目时运行一次markdown解析。

这应该使您入门-它基于盖茨比gatsby-transformer-remark内的代码

请注意，这是伪代码-当然，您必须对其进行测试。

// gatsby-node.js

var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')

const processor = remark()
  .use(recommended)
  .use(html)

export async function onCreateNode({ actions, node, loadNodeContent}) {
  if (!/RichText/.test(node.internal.type)) {
    return
  }

  const markdown = // somehow load the raw markdown from the node - I haven't studied RichText nodes yet

  const html = processor.process(markdown)

  const markdownNode = {
    id: createNodeId(`${node.id} >>> MarkdownRemark`),
    children: [],
    parent: node.id,
    internal: {
      content: data.content,
      type: `MarkdownRemark`,
    },
  }

  actions.createNode(markdownNode)
  actions.createParentChildLink({ parent: node, child: markdownNode })
}

供参考，here is where Contentful creates the Rich Text nodes inside Gatsby:

Answer 2

我使用react-markdown软件包实现了解决方案

npm i react-markdown 
//using version "^5.0.2",

从您的问题中，我可以看到您能够以字符串形式获得降价内容。使用上面的包像这样解析markdown内容：

import ReactMarkdownWithHtml from "react-markdown/with-html";

替换：

return <div dangerouslySetInnerHTML={{ __html: markdown }} />

具有：

return <ReactMarkdownWithHtml children={markdown} allowDangerousHtml />

这是他们的github页面 react-markdown

您可以使用此包或任何其他在Gatsby中解析markdown的React包来解析您的markdown字符串。

Answer 3

使用“micromark”对我有用...

我刚刚在 package.json 中添加了依赖
在 gatsby.config.js 中我添加了包：

const micromark = require('micromark');

我用它来转换节点：

{ 解析：'@contentful/gatsby-transformer-contentful-richtext', 选项： { 渲染选项：{ 渲染节点：{

         [BLOCKS.EMBEDDED_ENTRY]:
           (node) => {
             const LANG = 'en-US';
             const ENTRY_TYPES = {
               BUTTON: 'elementbutton',
               TIP: 'elementtip',
               QUOTE: 'elementquote',
               IMAGE_COLUMN: 'elementimagecolumn',
             };
             const type = node.data.target.sys.contentType.sys.id;
             const { fields } = node.data.target;

             switch (type) {
               case ENTRY_TYPES.QUOTE: {
                 const text = fields.text[LANG];
                 return `
                   <div class="${ENTRY_TYPES.QUOTE}">
                     ${micromark(text)}
                   </div>
                 `;
               }
               default:
                 return '';
             }
           },
       },
     },
   },
 },

使用Gatsby将Richdown组件中的Markdown转换为HTML

3 个答案: