0

我试图在我的博客中集成内容丰富的文本，并且它只能使用粗体、段落和斜体。我不能让图像和嵌入的东西出现。

首先我有这个组件：

const Content = ({ content }) => {
  return (
    <div className="content-body-contentful">
      {documentToReactComponents(content)}
    </div>
  )
}

然后，在帖子页面中，我导入该组件并像这样传递数据：

<Content content={article.fields.body} />

这个问题有答案吗？

4

2 回答 2

0

嗨@user13680445，内容丰富的 Richtext 字段总是返回类似这样的内容，至少作为 Graphql 响应

"richTextResponse": {
  // JSON structure of the Rich Text field
  "json": {
    # ...
  }
  // all referenced assets/entries
  "links": {
    # ...
  }
}

在链接字段中，您将获得嵌入 Richtext 中的所有资产和条目

在这里，我在 Typescript 中有一个如何添加资产的示例

    export const renderOptions = (links: Links): Options => {
      const assetMap = getAssets(links.assets.block);
      const entryMap = getEntries(links.entries.block);
    
      return {
        renderNode: {
          [BLOCKS.HEADING_1]: renderHeading,
          [BLOCKS.PARAGRAPH]: renderParagraph,
          [BLOCKS.EMBEDDED_ENTRY]: renderEntry(entryMap),
          [BLOCKS.EMBEDDED_ASSET]: renderAsset(assetMap),
        },
      };
    };
    
const renderAsset =
  (assetMap: Map<string, ContentfulImage>): NodeRenderer =>
  (node) => {
    const asset = assetMap.get(node.data.target.sys.id);
    if (!asset) {
      return <></>;
    }
    switch (asset.contentType) {
      case "video/mp4":
        return (
          <VideoAsset
            url={asset.url}
            width={asset.width}
            height={asset.height}
          />
        );
      case "image/png":
      case "image/jpeg":
        return (
          <ImageAsset
            url={asset.url}
            width={600}
            height={450}
            description={asset.description}
            quality={75}
          />
        );
      default:
        return "Nothing to see here...";
    }
  };

然后您可以像这样调用该函数：

{documentToReactComponents(json, renderOptions(links))}

这是一种基本的方法，但目前 Contentful 没有更好的方法来做到这一点。

在那里，我们得到了与 nodeType 中的 sys.id 和资产链接中的 sys.id 匹配的资产数据，例如：

富文本对象

{
  "nodeType": "embedded-asset-block",
  "content": [],
  "data": {
    "target": {
      "sys": {
        "id": "2DdSHQJA8zoumehPzqWZrs",
        "type": "Link",
        "linkType": "Asset"
      }
    }
  }
}

链接对象

"links": {
  "assets": {
    "block": [
      {
        "sys": {
          "id": "2DdSHQJA8zoumehPzqWZrs"
        },
        "fileName": "GOPR0511.JPG",
        "url": "https://images.ctfassets.net/",
        "title": "GOPR0511"
      }
    ]
  }
}

我们基于 sys.id 连接两者，在这种情况下，是2DdSHQJA8zoumehPzqWZrs

于 2021-10-22T05:31:33.843 回答
-1

下面是通过 Contentful 将图像与 Next.js 一起使用的示例。您可以类似地实现其余项目。

import Image from 'next/image'

const renderProps = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: node => {
            let { description, file } = node.data.target.fields

            return (
                <picture>
                    <Image src={file.url} alt={description} />
                </picture>
            )
        },
    },
}
const Content = ({ content }) => {
    return <div className="content-body-contentful">{documentToReactComponents(content, renderProps)}</div>
}
于 2021-01-28T06:50:41.533 回答