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

Posted 2023-03-08

【中文标题】使用 Contentfuls 富文本反应渲染创建摘录

【英文标题】：Creating excerpts using Contentfuls rich text react render

【发布时间】：2020-03-10 19:34:45

【问题描述】：

我正在研究如何使用 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>页面上生成富文本的方式

在开始正文之前，我想创建一个摘录来解释一下。

如果有人能提供帮助，那就太好了。由于我处于松散的结局。

【参考方案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 截断您的文本。您可以根据需要更改此值。

希望这会有所帮助！

【讨论】：

谢谢！没有太多关于这个的帖子，很高兴我找到了这个帖子！