为什么不能在 Sanity.IO 中正确准备渲染

Question

我正在尝试为 sanity.io 中的文档自定义 prview 部分。为此，我创建了以下文档：

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'author',
    }
  }
}

这在 Studio 中完全符合我的要求。预览窗格中的 title 部分显示文档的标题，subtitle 部分显示作者姓名。

但是，如果我尝试使用 prepare 修改 author 的输出，那么它将不再有效。例如，查看同一文档的以下变体：

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author',
    }
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}

title 预览字段已呈现，但 subtitle 部分未显示任何内容。然而，据我所知——这应该有效。我想知道为什么不。

有什么想法吗？

Answer 1

prepare实际上是预览中调用的函数。您将其作为根对象的单独字段。像这样在 preview 中移动 prepare:

preview: {
  select: {
    title: 'title',
    author: 'author'
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}

为什么不能在 Sanity.IO 中正确准备渲染

Why Doesn't Prepare Render Properly in Sanity.IO

sanity