从富文本字段中获取内容

编程问答 2022-05-30

问题描述

我正在按照 this 文档从 Contentful 呈现富文本。

到目前为止，我已经安装了 gatsby-source-contentful，现在我正在使用 graphQL 查询查询富文本内容，然后再添加到我的模板中。

问题：我无法查询 references 字段。

据我所知，最近有一个 breaking change 需要查询 raw 子字段...但不幸的是我无法查询 {{1} 中的任何子字段}}。

我不确定可能是什么问题。

查询

raw

错误信息

enter image description here

解决方法

references 代表 reference content model，这是一种从另一个条目中检索数据的方法，将它们一个一个地添加到主条目中。该指南假设您遵循了完全相同的结构，但这不是必需的。如果您没有 reference 内容模型，请不要查询它。 GraphQL 游乐场 (localhost:8000/___graphql) 将向您展示所有可用的可查询字段。

此外，该指南在 ContentfulAsset 上使用 GraphQL 片段，而不是在 ContentfulArticle 上，再次假设您已为文章添加了资产条目，如果它不可用或者你没有它。您只需要为您的用例和您自己的字段自定义查询。

{
  allContentfulArticle {
    edges {
      node {
        content {
          raw
        }
      }
    }
  }
}

通过上面的查询，您应该能够从富文本模型中收集所有原始数据。但是，您需要在 Gatsby 项目中添加一个转换器，它将为每种类型的富文本（粗体文本、嵌入的条目、链接、代码等）呈现和解析正确的组件。

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>,[BLOCKS.EMBEDDED_ASSET]: node => {
      return (
        <>
          <h2>Embedded Asset</h2>
          <pre>
            <code>{JSON.stringify(node,null,2)}</code>
          </pre>
        </>
      )
    },}

   renderRichText(node.bodyRichText,options)

更多详细信息 here 和 gatsby-source-contentful docs。

content-management-systemcontentfulgatsbyjavascriptrichtextrichtextrichtextrichtext