在 Gatsby v4 中从 CMS 渲染富文本答案

【问题标题】：Rendering Rich Text from CMS in Gatsby v4在 Gatsby v4 中从 CMS 渲染富文本
【发布时间】：2022-08-04 14:00:05
【问题描述】：

我试图在我的 Gatsby v4 中为我的网站呈现富文本，但我无法找到有关如何呈现数据的任何信息。我已经阅读了有关添加块的信息，但我不知道应该包括什么或如何去做。我真的只需要在富文本中呈现链接、标题和正文。有人可以帮我完成这个吗？

这是我的组件代码 sn-p。到目前为止，数据都在页面中正确地通过查询。我只是想让文字放在上面写着“TEXT GOES HERE\”的地方

import React from \"react\"
import { useStaticQuery, graphql } from \"gatsby\"
import { GatsbyImage } from \"gatsby-plugin-image\"
import {renderRichText} from \"gatsby-source-contentful/rich-text\"
import {BLOCKS, MARKS} from \"@contentful/rich-text-types\"
import * as aboutStyles from \"../styles/about.module.scss\"

const query = graphql`
{
  contentfulAbout {
    about
    bioImage {
      title
      url
      gatsbyImageData(
        layout: FULL_WIDTH
        placeholder: BLURRED
        resizingBehavior: SCALE
        width: 1000
      )
    }
    aboutText {
      raw
    }
  }
}
`

const AboutSection = () => {
  const data = useStaticQuery(query);
  const contentfulAbout = data.contentfulAbout
  return (
    <div className={aboutStyles.parent}>
      <section className={aboutStyles.container}>
          <div className={aboutStyles.image}>
            <GatsbyImage className={aboutStyles.bioImage} image={contentfulAbout.bioImage.gatsbyImageData} alt={contentfulAbout.bioImage.title} />
          </div>
          <div className={aboutStyles.text}>
            <h2>{contentfulAbout.about}</h2>
            <p>TEXT GOES HERE</p>
          </div>
      </section>
    </div>
  )
}

标签： reactjs content-management-system gatsby rich-text-editor

【解决方案1】：

这个想法是使用暴露的 BLOCKS 和 MARKS 来完全自定义从 Contentful 获取的数据，例如：

import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const Bold = ({ children }) => <span className="bold">{children}</span>
const Text = ({ children }) => <p className="align-center">{children}</p>

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    },
  },
}

renderRichText(node.bodyRichText, options)

来源：https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/

通过这种方式，您可以在获取MARKS.BOLD 时使用您自己的自定义输出来渲染带有“粗体”className 的span。

在上面的 sn-p 中，缺少“标准”组件的实现，但这个想法依赖于相同的事实。使用 renderRichText 接受两个参数：

第一个：您的富文本节点（在您的情况下为aboutText）
第二个参数：options 与您的自定义输出

应用于您的代码，它应该如下所示：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import { BLOCKS, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"
import * as aboutStyles from "../styles/about.module.scss"

const options = {
  renderMark: {
    [MARKS.BOLD]: text => <strong>{text}</strong>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <p>{children}</p>,
  },
}


const query = graphql`
{
  contentfulAbout {
    about
    bioImage {
      title
      url
      gatsbyImageData(
        layout: FULL_WIDTH
        placeholder: BLURRED
        resizingBehavior: SCALE
        width: 1000
      )
    }
    aboutText {
      raw
    }
  }
}
`

const AboutSection = () => {
  const data = useStaticQuery(query);
  const contentfulAbout = data.contentfulAbout
  return (
    <div className={aboutStyles.parent}>
      <section className={aboutStyles.container}>
          <div className={aboutStyles.image}>
            <GatsbyImage className={aboutStyles.bioImage} image={contentfulAbout.bioImage.gatsbyImageData} alt={contentfulAbout.bioImage.title} />
          </div>
          <div className={aboutStyles.text}>
            <h2>{contentfulAbout.about}</h2>
            <p>{renderRichText(contentfulAbout.aboutText, options)}</p>
          </div>
      </section>
    </div>
  )
}

当然，它可能需要一些调整。请注意，我已经简化了输出，因此可以根据需要/需要对其进行自定义。

其他资源：

https://www.contentful.com/developers/docs/concepts/rich-text/

【讨论】：

谢谢你！不幸的是，当我添加此代码时，我现在收到此错误：“JSON.parse：JSON 数据的第 1 行第 1 列的意外字符”。还有什么我需要添加到代码中的吗？
抱歉，根据文档 (contentful.com/developers/docs/tutorials/general/…)，您不需要使用 raw，直接使用 aboutText
如果问题已解决，请考虑接受答案以关闭问题