错误的富文本列表并合并到其他字符串 - React 网站

Posted 2023-03-08

【中文标题】错误的富文本列表并合并到其他字符串 - React 网站

【英文标题】：Bad rich text listing and merge to other strings - React website

【发布时间】：2022-01-21 05:55:35

【问题描述】：

我在内容模型中有普通字符串类型，但最后一种是富文本。

我将添加一张卡片，其中包含帖子的名称、标题、日期和简短的帖子文本。在这种情况下，我重置了富文本格式，使其表现得像普通文本。

问题是在列出所有帖子时，正常字符串会按需要显示，但富文本与每个帖子重复。我希望每个人的帖子公告都不同。

我已经查看并尝试了所有已知的方法，但都没有达到预期的结果。

从视觉上看，列表如下所示：

此页面的代码如下所示：

import React from "react"
import  graphql  from 'gatsby'
import  BLOCKS, MARKS  from "@contentful/rich-text-types"
import  renderRichText  from "gatsby-source-contentful/rich-text"

import Layout from "../components/base/layout"

import 
  PageWrapper,
  BlogCardWrapper,
  BlogCardElement,
  ThumbnailImage,
  ContentInlineWrapper,
  PreContentParagraph,
  ReadMoreParagraph,
  BlogTitleHeader,
  BlogDateParagraph,
 from "../styles/aktualnosci.style"

import  Headers  from "../utils/data/headersData"
import H1 from "../components/headers/h1"

const AktualnosciPage = ( data ) => 
  
  const articles = data.allContentfulArtykul.edges
  const post = articles[0].node.content
  const option = 
    renderNode: 
      [BLOCKS.EMBEDDED_ASSET]: node => 
          return <img/>
      ,
      [BLOCKS.HEADING_1]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
      [BLOCKS.HEADING_5]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
      [BLOCKS.PARAGRAPH]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
      [BLOCKS.QUOTE]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
      [BLOCKS.UL_LIST]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
      [BLOCKS.LIST_ITEM]: (node, children) => 
          return <p style=padding: '0', margin: '0', display: 'inline-block'>children</p>
      ,
    ,
    renderMark: 
      [MARKS.BOLD]: (node, children) => 
          return <p style=fontWeight: '100'>children</p>
      ,
    
  
  const output = renderRichText(post, option)

  return (
    <Layout>
      <PageWrapper>
        <H1 name= Headers.Aktualnosci />
        <BlogCardWrapper>
          articles.reverse().map((node) => 
            return (
              <div key=node.slug>
                <a href="/aktualnosci/" + node.slug>
                  <BlogCardElement>
                    <ThumbnailImage
                      className="j10_dfg4gvBDG"
                      src=node.thumbnailPhoto.fluid.src
                      srcSet=node.thumbnailPhoto.fluid.srcSet
                    />
                    <ContentInlineWrapper>
                      <BlogTitleHeader>node.title</BlogTitleHeader>
                      <PreContentParagraph>output</PreContentParagraph>
                      <BlogDateParagraph>node.createdAt</BlogDateParagraph>
                    </ContentInlineWrapper>
                    <ReadMoreParagraph className="j5_dfg4gvBDG">Czytaj więcej <span style=color: '#BF1E2D', fontSize: '11px'>&#10148;</span></ReadMoreParagraph>
                  </BlogCardElement>
                </a>
              </div>
            )
          )
        </BlogCardWrapper>
      </PageWrapper>
    </Layout>
  )


export const query = graphql`
    query 
      allContentfulArtykul 
        edges 
          node 
            id
            thumbnailPhoto 
              fluid 
                src
                srcSet
              
            
            title
            slug
            content 
              raw
              references 
                ... on ContentfulAsset 
                  __typename
                  contentful_id
                  fixed(width: 200) 
                    src
                    srcSet
                  
                
              
            
            createdAt(formatString: "YYYY-MM-DD")
          
        
      
    
`

export default AktualnosciPage

非常感谢您的帮助

【参考方案1】：

经过长时间的搜索，我找到了一个解决方案

首先，您必须将与富文本相关的所有内容移至列表

你需要做的第二件事是把它变成一个固定的帖子路径

const post = node.content

最后，我们用适当的参数在目的地使用整个函数

<PreContentParagraph>renderRichText(post, option)</PreContentParagraph>