构建三级分层Sanity.io Schema 实现高效内容管理

完全可以通过Sanity.io实现你需要的Hub→Guide→Chapter三级分层结构，且无需自定义管理页——Sanity自带的Studio管理界面配合合理的Schema设计，就能高效解决章节数量过多时的管理混乱问题，比自定义开发成本低得多。

核心实现思路 #

通过文档引用（Reference）和数组（Array）组合构建层级关联关系，同时通过预览配置、自定义视图优化管理体验。

1. 三级Schema配置示例 #

章节（Chapter）Schema

// schemas/documentTypes/chapter.js
export default {
  name: 'chapter',
  title: '章节',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: '章节标题',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'content',
      title: '章节内容',
      type: 'blockContent' // 使用Sanity默认富文本类型，可自定义扩展
    }
  ],
  preview: {
    select: {
      title: 'title',
      guideTitle: 'parentGuide.title'
    },
    prepare(selection) {
      return {
        title: selection.title,
        subtitle: selection.guideTitle ? `所属指南：${selection.guideTitle}` : ''
      }
    }
  }
}

指南（Guide）Schema

// schemas/documentTypes/guide.js
export default {
  name: 'guide',
  title: '指南',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: '指南标题',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'chapters',
      title: '关联章节',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'chapter' }] }],
      options: {
        layout: 'list' // 以列表形式展示，支持拖拽排序
      }
    }
  ],
  preview: {
    select: {
      title: 'title',
      hubTitle: 'parentHub.title'
    },
    prepare(selection) {
      return {
        title: selection.title,
        subtitle: selection.hubTitle ? `所属Hub：${selection.hubTitle}` : ''
      }
    }
  }
}

Hub Schema

// schemas/documentTypes/hub.js
export default {
  name: 'hub',
  title: 'Hub',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Hub标题',
      type: 'string',
      validation: Rule => Rule.required()
    },
    {
      name: 'guides',
      title: '关联指南',
      type: 'array',
      of: [{ type: 'reference', to: [{ type: 'guide' }] }],
      options: {
        layout: 'list' // 支持拖拽调整指南顺序
      }
    }
  ],
  preview: {
    select: {
      title: 'title'
    }
  }
}

2. 管理体验优化方案 #

• 反向预览标注：在Chapter和Guide的preview配置中显示所属上级内容（比如章节显示所属指南），在文档列表中直接区分层级，避免内容混杂。
• 自定义分组视图：在Sanity Studio中为Chapter添加自定义视图，按所属Guide/Hub分组展示，方便批量管理。
• 拖拽排序：利用Sanity Array类型的默认拖拽功能，快速调整Guide内的章节顺序、Hub内的指南顺序。
• 文档模板：创建Hub+Guide+Chapter的快速创建模板，减少重复操作，提升内容创建效率。

自定义管理页 vs Sanity Studio #

自定义管理页需要从零开发CRUD、权限控制、预览、排序等核心功能，开发周期长、维护成本高；而Sanity Studio已经内置了这些能力，仅需通过Schema配置就能快速构建符合需求的管理界面，同时支持后续的内容API调用、数据迁移等扩展需求，显然更高效。

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