1

我正在尝试使用 2019 年的教程创建一个博客，该教程使用contentful-plugin但我看到 gastby 已经更新了他们的文档，所以我不能做我在视频中看到的，我的问题是，我不太了解下面的文档。

当我开始使用http://localhost:8000/___graphql 之前查询时


query {
  allContentfulBlogPost (
    filter: {node_locale: {eq: "en-US"}}
    sort: {
      fields: publishedDate,
      order: DESC
    }
  ) {
    edges {
      node {
        title node_locale
        slug
        publishedDate(formatString: "MMMM Do, YYYY")
        body {
          json
        }
          
          
        
        
      }
    }
  }
}

现在我在 Contentful 文档上看到了 Note: Be aware that previous versions of the Gatsby Contentful source plugin used a json field. This got replaced with raw to give you more flexibility in rendering and to fix performance issues.

query {
  allContentfulBlogPost {
    edges {
      node {
        bodyRichText {
          raw
          references {
            ... on ContentfulAsset {
              contentful_id
              fixed(width: 1600) {
                width
                height
                src
                srcSet
              }
            }
            ... on ContentfulBlogPost {
              contentful_id
              title
              slug
            }
          }
        }
      }
    }
  }
}

在 graphql 上我没有这个bodyRichText，我只有body { raw }但使用这个，比如：

export const query = graphql`
    query($slug: String!) {
        contentfulBlogPost(slug: {eq: $slug}) {
            title
            publishedDate(formatString: "MMMM Do, YYYY")
            body {
                raw
            }
        }


    }


`

const Blog = (props) => {
    return (
        <Layout>
            <h1>{props.data.contentfulBlogPost.title}</h1>
            <p>{props.data.contentfulBlogPost.publishedDate}</p>
            {documentToReactComponents(props.data.contentfulBlogPost.body.raw)}
        </Layout>
    )
}

export default Blog

不工作所以我错过了一些东西，但我找不到它是什么。

4

1 回答 1

1

正如您所说，body现在不赞成使用raw，以便在从 Contentful 采购时创建自定义输出时为我们提供更大的灵活性。

这个想法，给出如下查询：

query {
  allContentfulBlogPost {
    edges {
      node {
        bodyRichText {
          raw
          references {
            ... on ContentfulAsset {
              contentful_id
              fixed(width: 1600) {
                width
                height
                src
                srcSet
              }
            }
            ... on ContentfulBlogPost {
              contentful_id
              title
              slug
            }
          }
        }
      }
    }
  }
}

如果您没有该bodyRichText节点，请在 中检查它们的可用性localhost:8000/___graphql。输出应该完全相同。

获得响应对象和引用后，想法是使用 Contentful 支持的Richtext React Renderer：

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)

使用这些连接器的想法是自定义输出。使用：

{documentToReactComponents(props.data.contentfulBlogPost.body.raw)}

永远不会产生预期的输出。也许您正在寻找：

<div dangerouslySetInnerHTML={{__html: props.data.contentfulBlogPost.body.raw}} />;

因为它是原始内容。

于 2021-03-14T15:28:51.183 回答