使用 Contentfuls 富文本反应渲染创建摘录

Question

我正在研究如何使用 Contentful Rich Text React Renderer 将摘录引入我的网站。

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

这是我的查询。

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>

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

希望这可以帮助！