reactjs - 使用 Contentfuls 富文本 react 渲染创建摘录

Question

我正在弄清楚如何使用 Contentful Rich Text React Renderer 将摘录带入我的网站。

我有点挣扎，这是我第一次使用它。我过去曾使用 MD 进行 contentful，但由于用户的原因，我需要进行丰富的测试。

这是我的查询。

export const query = graphql`
    query($slug: String!) {
        contentfulJobListings(slug: { eq: $slug }) {
            jobTitle
            jobPostedDate(formatString: "MMMM Do, YYYY")
            jobSalaryN
            jobLocation
            jobDescription {
                json
            }
        }

    }
`

这就是我在页面 <div>{documentToReactComponents(props.data.contentfulJobListings.jobDescription.json)}</div> 上生成富文本的方式

在进入帖子之前，我想创建一个摘录来解释一下。

如果有人可以帮助解决这个问题，那就太好了。因为我无所事事。

Answer 1

当我用 GatsbyJS + Contentful 制作我的投资组合网站时，我遇到了和你一样的问题。我没有找到任何关于 Contentful 和摘录的信息，但我知道一个可能是您需要的解决方法。

您需要做的第一件事是安装 react-truncate进入你的项目。安装完成后，像这样包装你的 documentToReactComponents:

import Truncate from 'react-truncate'

<Truncate
  lines={1}
  width={1000} // width being how much you want to truncate your copy
  ellipsis='&hellip;'
>
  { documentToReactComponents(edge.node.description.json) }
</Truncate>

这会将您的文本截断为 1000px 的 width。您可以根据需要更改此值。

希望这对您有所帮助!