Sanity 学习笔记

Sanity 在 CMS 各方面对比中表现都非常不错,加上非常慷慨的 Free Plan,成为众多独立开发者的首选,需要注意的是 Sanity 不是个完全开源的 CMS,它只有 Studio 是开源的。

Sanity 也在官网放出了与其他竞品的比较信息,点击查看, 比如 Payload , Strapi, Ghost 等

学习路径

学习 Sanity 最好的资料就是 Sanity 官方的这个教程,从 Schema 的编写,到 Input 组件的定制,到Structure 的定制,GROQ 的语法介绍,最后集成到 Nextjs 项目中请求并显示数据,然后部署运行,没有比这个教程更好的教程了!

Sanity Course

Studio

Studio 是 Sanity CMS 的后台管理系统,它既可以独立部署运行,也可以集成到 Nextjs 项目中,通过 /studio 或者 /admin 就可以进入后台,要知道,没有几个 CMS 是可以直接在 Vercel 上运行的,这点非常关键,虽然使用起来有点慢,另外 Playload 3.0 也可以支持嵌入,不过目前还在 Beta 版本。

Studio 界面的很多模块你都是可以定制的,因为它支持 Plugins 扩展。例如,加个 Media 插件,你就可以管理所有图片等媒体文件;加个 Unsplash 插件,你就可以上传 Unsplash 图片。

Sanity studio

同时 Sanity 也有自己官方的组件库,Sanity UI,可以用来适配定制 Studio 里面的内容。

Schema

Schema 即定义数据结构,类似在使用 Prisma 或者 Drizzle 的时候需要先定义 Table 的结构,基本数据类型都支持。

不同的是,Sanity Schema 还可以定义这个数据类型在 Studio 中编辑时是什么界面。例如,如果某个字段是枚举值,可以控制它都有什么值,是下拉选择还是 Radio 选择。

Sanity schema

GROQ

GROQ 刚开始上手 Sanity,最难的可能就是怎么写 GROQ 查询语句,它是由 Sanity 开源的查询语言,跟 SQL 完全不同,所以初次体验的话,会感觉很陌生。

但毕竟不是做什么异常复杂的系统,掌握 Query、Filter、Projection 等就 OK 了,可以收藏 Cheatsheet 使用时速查。

Sanity GROQ

Typegen

Typegen 默认情况下查询出来的结果就是一个个 JSON 串,不是某个类型的,现在工程都是 TS 类型安全的,于是 Sanity 就出了个 Typegen,还处于 Beta 阶段 (确认存在 Bug )。

这个 Typegen 还是很好用的,定义好 Schema 和 Query,执行 Typegen,会自动生成 types.ts,所有数据结构都有了。

Sanity Typegen

Content lack

Content lake 是 Sanity 用来保存和管理数据的,可以当做是 DB + Storage。

Sanity 的厉害之处就在于你不用搞懂 Content lake 是如何保存和管理数据的,它会给你提供 API,你只需要给它数据,然后,你就可以在任何客户端查询到这个数据。

Sanity content lake

Migration

跟 Schema 打交道免不了会发生 Schema 变化,Sanity 也支持 Migration,通过定义 Migration 文件,然后执行即刻。

这块比较复杂,我试了一个将 Schema 的某个 Field 重命名的操作,流程是 OK 的,建议先在 Dev 数据库中测试后再上线。详情参考 Sanity 的 Schema 内容迁移指南

Sanity migration

Dataset import/export

Santity dataset 是支持数据库导入导出的,导出时可以控制是否导出媒体资源文件。这样的话,你就不会被Sanity 绑定了,你随时可以将数据库导出,并导入到你其他的 CMS 中。

Sanity dataset

Localization

Sanity Localization Sanity 是支持站点国际化的。它分为 2 种,国际化整个 Document 或者国际化Document 中的某个 Field,例如导航站中某个工具在多语言下大部分字段都是一样的,只有工具介绍字段需要国际化,那么就选择国际化 Field。如何高效翻译,我还要研究下。

Sanity localization

Portable text

Sanity Presenting Portable Text 如果你的内容是富文本内容,那么 Sanity 提供了 Portable text 用于保存富文本内容。这个格式首次接触会感觉很奇怪,又是新知识,而且如何在前端展示这个 Portable text 呢?Sanity 自然也提供了各种库来显示它,只不是又是新知识,学习曲线真的是陡!

Sanity portable text

其他

Sanity 还支持很多其他的功能,例如 Visual editing,可视化编辑,这个功能很强大,但是我目前用不上。

Sanity 比较难,主要是它新增加了很多知识点,Schema、Studio、Plugin、GROQ等等,每个还都不那么好上手,对于新人,很容易遇到挫败而拒绝它。

Tips: 由于我购买了 Mkdirs ,需要学习其中的 Sanity CMS 的代码和内容管理,所以先记录摘要下来,后续自己再逐步补充更新此文档,也会对比其与之前用过的 Strapi 之间到底哪个更加适合我。

当前文档大部分内容来源于: