Eleventy使用Sanity Serializers时infoText块无内容如何解决？

你当前的infoText序列化逻辑存在字段取值错误：从你提供的Sanity数据结构可以看到，infoText下的bodyInfo是标准的Portable Text块数组，每个数组元素是_type: block的对象，text属性并不直接在block层级，而是存储在block下属的children数组的span元素中。你原有代码尝试直接取block的text属性，该属性不存在，因此返回空值。

根据你的需求选择以下任意一种修改方式即可：

方案1：仅提取纯文本内容 #

如果你不需要保留bodyInfo内的富文本格式，只需要输出纯文本，修改serializers.js中的infoText序列化逻辑如下：

infoText: ({ node }) => {
  // 逐层遍历块、子元素，收集所有文本内容
  const content = node.bodyInfo
    .flatMap(block => block.children.map(span => span.text))
    .join('')
  return h(
    'p',
    {
      className: 'bg-blue-500 text-white',
    },
    content
  )
}

方案2：保留bodyInfo的富文本格式 #

如果你的bodyInfo中可能存在粗体、链接、列表等富文本内容，可以直接复用Portable Text的转换逻辑处理bodyInfo：

// 注意需要先在serializers.js顶部引入blocksToHtml依赖
const blocksToHtml = require('@sanity/block-content-to-html')
const { h } = require("@sanity/block-content-to-html");

// 其他代码不变，仅修改infoText部分
infoText: ({ node }) => {
  const richContent = blocksToHtml({
    blocks: node.bodyInfo,
    serializers: module.exports // 复用当前所有序列化规则
  })
  // 注意：如果bodyInfo包含块级元素，不要用p标签包裹（p标签不能嵌套块级元素，会被浏览器自动截断），这里换成div
  return h(
    'div',
    {
      className: 'bg-blue-500 text-white',
    },
    h('div', { dangerouslySetInnerHTML: { __html: richContent } })
  )
}

内容的提问来源于stack exchange，提问作者batz