Eleventy 中的 Sanity 序列化程序 (11ty)

Question

我已经将 Sanity CMS 实施到 Eleventy 中，并且有一个工作的 11ty 过滤器可以将便携式文本转换为 HTML。

我有相当多的自定义块，因此我也传递了序列化程序。但是，我无法使其中一个序列化器工作。

这是我的代码：

在.eleventy.js

    // Portable Text to HTML Filter for Sanity
eleventyConfig.addFilter('sanityToHTML', function(value) {
    return blocksToHtml({
      blocks: value,
      serializers: serializers
    })
  })

上serializers.js

const { h } = require("@sanity/block-content-to-html");

module.exports = {
  types: {
      cta: ({ node }) => {
        return h(
          'a',
          {
            className:
              'bg-yellow-500 text-white',
            href: node.ctaUrl,
          },
          node.ctaText,
        )
      },
      infoText: ({ node }) => {
        return h(
          'p',
          {
            className:
              'bg-blue-500 text-white',
          },
          node.bodyInfo.map(children => children.text).join(''),
        )
      },
    },
  }

Eleventy 正在输出 <p class="bg-blue-500 text-white"></p>，但没有内容。

我已经尝试了所有我能想到的组合。

我的 Sanity 博客 post 具有以下结构：

{
  "_createdAt": "2021-09-14T11:25:05Z",
  "_id": "89ff5403-326b-4db1-8752-04ea1c85f114",
  "_rev": "7dkOKJtWoyCn0kHUhHzZu7",
  "_type": "post",
  "_updatedAt": "2021-09-20T06:38:14Z",
  "body": [
    {
      "_key": "f84e932860bf",
      "_type": "block",
      "children": [
        {
          "_key": "bd29bce1dda1",
          "_type": "span",
          "marks": [],
          "text": ""
        }
      ],
      "markDefs": [
        {
          "_key": "38aa715c6214",
          "_type": "link",
          "href": "........"
        }
      ],
      "style": "normal"
    },
    {
      "_key": "bf5d17f3da91",
      "_type": "cta",
      "ctaText": "test",
      "ctaUrl": ".........."
    },
    {
      "_key": "595873ddfc54",
      "_type": "block",
      "children": [
        {
          "_key": "ba794ddbef68",
          "_type": "span",
          "marks": [],
          "text": ""
        }
      ],
      "markDefs": [
        {
          "_key": "38aa715c6214",
          "_type": "link",
          "href": ".........."
        }
      ],
      "style": "normal"
    },
    {
      "_key": "8acb94638c0c",
      "_type": "infoText",
      "bodyInfo": [
        {
          "_key": "6b6e533e67fd",
          "_type": "block",
          "children": [
            {
              "_key": "3593ad3abdf9",
              "_type": "span",
              "marks": [],
              "text": "test test info"
            }
          ],
          "markDefs": [],
          "style": "normal"
        }
      ]
    },
    .....etc

关于如何让它显示实际内容的任何提示？

Answer 1

我认为问题出在您的 infoText 序列化程序中。在该函数中，您映射 node.bodyInfo，然后访问 bodyInfo 中对象的 text 属性。但是，bodyInfo 中的对象实际上并没有 text 属性.

{
  "_key": "8acb94638c0c",
  "_type": "infoText",
  "bodyInfo": [
    {
      "_key": "6b6e533e67fd",
      "_type": "block",
      "children": [
        {
          "_key": "3593ad3abdf9",
          "_type": "span",
          "marks": [],
          "text": "test test info"
        }
      ],
      "markDefs": [],
      "style": "normal"
    }
  ]
}

您要提取的字符串位于 bodyInfo[].children[].text，而不是 bodyInfo[].text。要解决此问题，您可能需要更新 infoText 序列化程序。

infoText: ({ node }) => {
  return h(
    'p',
    {
      className: 'bg-blue-500 text-white',
    },
    node.bodyInfo.map(({children}) => children.map(child => child.text)).flat().join(''),
  )
}

在这个版本中，我们首先映射 bodyInfo，这是一个数组，然后从其中的对象中解构 children 属性。然后我们映射它以获得我们的内部字符串，然后展平数组以加入。

Eleventy 中的 Sanity 序列化程序 (11ty)

Sanity Serializers in Eleventy (11ty)

sanity

eleventy