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中的1000px截断文本。您可以根据需要更改此值。

希望这会有所帮助！

使用Contentfuls RTF创建摘要以响应渲染

1 个答案: