内容获取丰富的文本字段内容

Question

我正在为我的个人网站建立一个博客，我选择满足感作为一个无头的CMS。但是，我成功地使用此查询访问了这些字段：

    const query = `
    {
      blogCollection {
        items{
            title
            slug
            cover{
                url
                title
            }
        }
      } 
    }
    `

但我不知道如何获得我丰富的文本的内容以及渲染在我的网站。

我的博客类型如下：

​

​

JSON预览：

{
  "name": "Blog",
  "description": "",
  "displayField": "title",
  "fields": [
    {
      "id": "title",
      "name": "Title",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "slug",
      "name": "slug",
      "type": "Symbol",
      "localized": false,
      "required": true,
      "validations": [
        {
          "unique": true
        }
      ],
      "disabled": false,
      "omitted": false
    },
    {
      "id": "cover",
      "name": "Cover",
      "type": "Link",
      "localized": false,
      "required": false,
      "validations": [],
      "disabled": false,
      "omitted": false,
      "linkType": "Asset"
    },
    {
      "id": "content",
      "name": "content",
      "type": "RichText",
      "localized": false,
      "required": true,
      "validations": [
        {
          "enabledMarks": [
            "bold",
            "italic",
            "underline",
            "code"
          ],
          "message": "Only bold, italic, underline, and code marks are allowed"
        },
        {
          "enabledNodeTypes": [
            "heading-3",
            "heading-4",
            "heading-5",
            "heading-6",
            "ordered-list",
            "unordered-list",
            "hr",
            "blockquote",
            "embedded-entry-block",
            "embedded-asset-block",
            "table",
            "hyperlink",
            "entry-hyperlink",
            "asset-hyperlink",
            "embedded-entry-inline",
            "heading-1",
            "heading-2"
          ],
          "message": "Only heading 3, heading 4, heading 5, heading 6, ordered list, unordered list, horizontal rule, quote, block entry, asset, table, link to Url, link to entry, link to asset, inline entry, heading 1, and heading 2 nodes are allowed"
        },
        {
          "nodes": {}
        }
      ],
      "disabled": false,
      "omitted": false
    }
  ],
  "sys": {
    "space": {
      "sys": {
        "type": "Link",
        "linkType": "Space",
        "id": "3oa8py5argun"
      }
    },
    "id": "blog",
    "type": "ContentType",
    "createdAt": "2022-10-17T15:18:25.241Z",
    "updatedAt": "2022-10-17T15:18:25.744Z",
    "environment": {
      "sys": {
        "id": "master",
        "type": "Link",
        "linkType": "Environment"
      }
    },
    "publishedVersion": 1,
    "publishedAt": "2022-10-17T15:18:25.744Z",
    "firstPublishedAt": "2022-10-17T15:18:25.744Z",
    "createdBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    },
    "updatedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    },
    "publishedCounter": 1,
    "version": 2,
    "publishedBy": {
      "sys": {
        "type": "Link",
        "linkType": "User",
        "id": "5TAfaCaLZgOEcEh6haDIYA"
      }
    }
  }
}

我如何调整我的Query，使我可以得到我的丰富的文本，如何正确地在我的页面呈现它？

我用的是NextJS

Answer 1

由于您使用的是富文本，因此要获取GraphQL查询的内容，应该如下所示：

{
  blogCollection {
    items {
      title
      slug
      cover {
        title
        description
        url
      }
      content {
        json
      }
    }
  }
}

json在content中将以JSON对象的形式返回富文本。然后，您可以使用富文本呈现来呈现站点上的内容。

以下是可能有用的Next.js和内容入门指南：https://www.contentful.com/nextjs-starter-guide/