如何解决内容呈现长文本
我正在研究如何呈现标准长文本,但遇到了问题。
请看一下我的查询,它在 graphQL playground 中运行时有效。
{
allContentfulArticle {
nodes {
title
slug
para {
para
}
}
}
}
这是我的 article.js 文件
import React from "react"
import { graphql } from "gatsby"
const Article = props => (
<div>
<header>
<h1>{props.data.site.siteMetadata.title}</h1>
</header>
<main>
<h1>{props.data.contentfulArticle.title}</h1>
</main>
<footer>
<p>{props.data.site.siteMetadata.author}</p>
</footer>
</div>
)
export default Article
export const query = graphql`
query Article($id: String) {
site {
siteMetadata {
title
description
author
}
}
contentfulArticle(id: { eq: $id }) {
title
subtitle
slug
para {
para
}
}
}
`
奇怪的是,我可以轻松渲染 title
,这是一种类似的内容类型 - 只是很短。
我可以看到我的 title
、slug
和其他元数据字段显示在 localhost 上,但看不到 para
段落。
解决方法
尽管您的 GraphQL 查询看起来很完美,但您并未呈现长文本字段。只需使用:
import React from "react"
import { graphql } from "gatsby"
const Article = props => (
<div>
<header>
<h1>{props.data.site.siteMetadata.title}</h1>
</header>
<main>
<h1>{props.data.contentfulArticle.title}</h1>
</main>
<p>Your long text is: {props.data.contentfulArticle.para.para}</p>
<footer>
<p>{props.data.site.siteMetadata.author}</p>
</footer>
</div>
)
export default Article
export const query = graphql`
query Article($id: String) {
site {
siteMetadata {
title
description
author
}
}
contentfulArticle(id: { eq: $id }) {
title
subtitle
slug
para {
para
}
}
}
`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。