盖茨比源内容正文

Question

我使用gatsby source contentful从contentful获取我的博客文章。我想把body设置为富文本或json，但graphql允许我使用的唯一选项是raw，它会给我返回一堆对象和我不想要的文本。

Answer 1

raw对象为新"功能"。gatsby-source-contentful最新版本新增。根据文档:

注意注意，以前版本的Gatsby Contentful源插件使用了json字段。这被raw取代了您可以更灵活地呈现和修复性能问题。

,"flexibility"Contentful所指的是自定义组件的return语句输出的能力，该组件将解析raw响应。理想情况下，您应该拥有如下内容:

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)

上面的代码片段允许您为每个MARKS和BLOCKS条目定制响应，如果需要，添加适当的样式，并将其包装在您可能需要的任何结构中。上面的组件将允许您解析原始响应并返回正确的组件。

您可以查看本答案中提供的Contentful文档和gatsby-source-contentful插件文档以了解更多详细信息。

Answer 2

步骤1。确保您已经使用

导入了gatsby-source-contentful

npm install gatsby-source-contentful

步骤2。将此添加到您的imports中:

import { renderRichText } from "gatsby-source-contentful/rich-text"

步骤3。你的查询应该像这样

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

步骤4。返回{renderRichText (props.data.contentfulBlogPost.body)}

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

}

我希望这对你有帮助，这是我对堆栈溢出的第一个回答，我相信基于你提出问题的方式，我们正在遵循相同的训练营。

https://www.youtube.com/watch?v=8t0vNu2fCCM& t = 590 s&ab_channel = AndrewMead

如果你愿意合作，互相学习，请给我留言。

这可能也有帮助:https://www.gatsbyjs.com/plugins/gatsby-source-contentful/#query-rich-text-content-and-references

---

添加另一个解决方案:

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

添加对原始数据的引用

const Blog = (props) => {
const options = {
renderNode: {
"embedded-asset-block": (node) => {
const alt = "test"
const url = props.data.contentfulBlogPost.body.references[0].fixed.src
return <img src={url} alt={alt}/>
}
}
}

最后在渲染部分:

<div>{renderRichText(props.data.contentfulBlogPost.body, options)}</div>