0

我一直对 Sanity 的序列化程序和 11TY 做噩梦。

我通过以下方式使用 BlocksToHTML 配置了 11ty + Sanity：

在 .eleventy.js 上

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

在 serializers.js 上

const blocksToHtml = require('@sanity/block-content-to-html')
const h = blocksToHtml.h


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.map(child => child.text)).flat().join(''),
        )
      },
      prosAndCons: ({ node }) => {

        return h('div.grid.grid-cols-2.#prosCons',

        h('div',
          h('ul',
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[0]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[1]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[2]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[3]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[4]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[5]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[6]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[7]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[8]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[9]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[10]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[11]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[12]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[13]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[14]),
            h('li', h('i.mr-2.fill-current.text-green-500.text-2xl', '✔'), node.pros[15]))),

        h('div',
          h('ul',
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[0]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[1]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[2]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[3]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[4]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[5]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[6]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[7]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[8]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[9]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[10]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[11]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[12]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[13]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[14]),
            h('li', h('i.mr-2.fill-current.text-red-500.text-3xl', '⨯'), node.cons[15]))))
      },

    productTable: ({ node }) => {
      return h('div#page',
      h('div#header',
        h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
      h('div#menu', { style: {'background-color': '#2f2'} },
        h('ul',
          h('li', 'one'),
          h('li', 'two'),
          h('li', 'three'))),
        h('h2', 'content title',  { style: {'background-color': '#f22'} }),
        h('p',
          "so it's just like a templating engine,\n",
          "but easy to use inline with javascript\n"),
        h('p',
          "the intention is for this to be used to create\n",
          "reusable, interactive html widgets. "))
    },
  },

    marks: {
      link: ({ children, mark }) =>
        h(
          'a',
          {
            className: 'pointer underline hover:no-underline',
            href: mark.href,
          },
          children,
        ),
    },
  }

“infoText”代码由@person_v1.32 在我之前的问题（Eleventy (11ty) 中的 Sanity Serializers）中提供。

现在，使用的语法直接来自https://github.com/hyperhype/hyperscript。

因此，“prosAndCons”仅输出前两个值（pro1、pro2 和 con1、con2）。

如果我从 Hyperscript 中提取示例代码，如“productTable”上所示，它也会在“two”之后转义。

似乎是这里的一种模式，我一生都不明白它是什么。

有小费吗？太感谢了。

4

0 回答 0