如何在sanity.io CMS中为图片添加超链接跳转功能

以下两种方案均无需开发完整的自定义图片块，操作成本极低：

• 方案一：扩展内置注解（Annotation）配置
  Sanity Portable Text原生支持给块元素附加自定义注解，你只需要修改富文本的schema配置，允许图片块应用链接类型的注解即可。
  参考配置代码：

  export default defineType({
    name: 'postContent',
    type: 'array',
    of: [
      { type: 'block' },
      {
        type: 'image',
        // 允许图片使用注解标记
        marks: {
          annotations: [{ type: 'externalLink' }]
        }
      }
    ],
    marks: {
      annotations: [
        defineType({
          name: 'externalLink',
          type: 'object',
          title: '跳转链接',
          fields: [
            { name: 'url', type: 'url', title: '目标链接地址' }
          ]
        })
      ]
    }
  })
  

  配置完成后重新启动项目，选中图片时编辑器就会出现链接注解的入口，直接填写跳转地址即可。
• 方案二：新增极简组合对象类型
  如果你不想修改现有富文本的标记配置，可以直接新增一个仅包含两个字段的简单对象类型：
  1. targetImage：图片类型，用于上传要展示的图片
  2. jumpUrl：URL类型，用于填写跳转地址
     把这个对象类型加入富文本的可插入块列表，使用时直接插入该对象，上传图片并填写链接即可。

两种方案都只需要在前端渲染Portable Text时，对应添加注解/组合对象的渲染逻辑，把图片包裹在a标签中输出即可，无需修改编辑器核心交互逻辑，总代码量不超过30行。

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