如何从富文本字段中获取内容 Contentful

Question

我正在测试项目中试用它。这是来自 Index.js

const IndexPage = ({data: {posts}}) => {
  return (
  <div>
      <h1>Test Page</h1>
      {posts.edges.map(({node}) => (
        <Card key={node.id} node={node} />
      ))}
  </div>
  )
}

export default IndexPage;

export const query = graphql`
query {
  posts: allContentfulPost {
    edges {
      node {
        id
        title
        slug
        content{
           content
         }
        body{
           raw
         }
      }
    }
  }
}
`

我已将您建议的代码复制到我的模板组件中 card.js。这是我尝试呈现富文本字段的时候。

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>
    let richTextField;

    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>
              </>
            )
          },
        },
    }
    

function Card({ node }) {
    const { body } = node.body
  
    return (
            <article style={{backgroundColor:"red"}}>
               {/* <Img fluid={images[0].FluidObject} alt=""/> */}
               {/* <a href={`/posts/${node.slug}`}>
                   <h2>{node.title}</h2>
               </a>
               <p>
               {node.content.content} 
               </p> */}
               <div>{body && renderRichText(richTextField, options)}</div>
            </article>   
    ) 
  }

export default Card;

但它不会呈现出 richTextField。首先它抱怨 richTextField 未定义，所以我在文件开头添加了 let richTextField。

Answer 1

这样使用：

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>
        </>
      )
    },
  },
}

function BlogPostTemplate({ data }) {
  const { bodyRichText } = data.contentfulBlogPost

  return <div>{bodyRichText && renderRichText(richTextField, options)}</div>
}

最终，options 对象是一堆函数，return 根据您的项目逻辑自定义标记（即：<bold>{text}</bold> 当富文本具有粗体样式时等）所以，你只需要渲染它使用：

renderRichText(richTextField, options)

在您要呈现内容的组件中，最好是在模板中。

有关详细信息，请查看 plugin's docs。

如何从富文本字段中获取内容 Contentful

How to fetch content from rich text field Contentful

richtext

contentful

gatsby