Блог

Я внедрил CMS Sanity в 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(''),
        )
      },
    },
  }
 

Одиннадцать опутывает <p class="bg-blue-500 text-white"></p> , но без содержания.

Я перепробовал все комбинации, какие только мог придумать.

Мой пост в блоге о здравомыслии имеет следующую структуру:

 {
  "_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
 

Есть какие-нибудь советы о том, как заставить его отображать фактический контент?

Я полагаю, что проблема в вашем infoText сериализаторе. В этой функции вы сопоставляете node.bodyInfo , а затем получаете доступ к text свойству для объектов внутри bodyInfo . Однако объекты в 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 свойство из объектов внутри. Затем мы сопоставляем это, чтобы получить наши внутренние строки, а затем выравниваем массив для объединения.