Sanity 学习笔记

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 之间到底哪个更加适合我。

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

Read more

郑州互联网薪资统计及 AI 时代的现状

郑州互联网薪资统计及 AI 时代的现状

22 年郑州前端薪资真实统计(200+份样本) 22 年我在郑州前端大群里面统计了一波郑州互联网薪资,当时以为只是开始,想着后面会有更多的企业来到郑州,情况会越来越好,而现在回头来看,没想到那时才是顶峰。 当时在群里面收集到 200+ 位投票,匿名填写自己的薪资情况,当时跟大家特意强调了要保证数据的真实性,也找群员验证过,基本真实性可信: * 🐣 3-6k 占比不少,主要是郑州的工资水平低,对于刚出来的,在小公司的这个薪资也正常,实习生 or 小作坊 * 🐰 6-12k 的占大多数,涵盖了郑州本土大多数互联网公司的薪资范畴,大多数的常规业务开发 * 🐵 12-20k 主要集中在本土大公司、一线城市在郑州的研发团队、外包公司,核心业务开发人员 🦄 20k+ 高学历 or 有大厂经验,主要为本土大公司或者一线公司在郑州的带队 leader ,能力较强,一般承担一些管理角色。 25年:职场寒冬来袭,状况还在持续恶化 一线公司研发部门的撤离 这也是我最在意的一条: 之前有一些一线城市的研发交付部门会在郑州有成立研发交付中心,从疫情之后,

RAG不是万能的,附常见误解与澄清

RAG不是万能的,附常见误解与澄清

能给人理清目前 AI 在生产落地的问题,是一件难能可贵的事情,AI 在生产落地会有哪些阻碍的讲解,讲干货的真的是很少,至少我自己曾经在这个问题上困惑了很久。 因为之前我在 AI 电商团队,做具体的 AI Sass 落地的时候,团队经常会沟通做到生产级可用的 AI,需要哪些东西,大概的门槛还是了解到一些的,我的能力也顶多在应用层面去做一些工作量的定制与代码衔接,涉及到模型层面,一概歇菜,很多人估计只是想着,写一个 Prompt ,就是真正的拥抱 AI 了。 当我看到自媒体里面铺天盖地的在讲 AI 如何帮助企业提效,如果重塑行业的时候,有种很复杂的感觉,他们真的懂 AI 吗,甚至他们真的懂软件吗? 基本上现在大家接触到的方式就几种: * 割韭菜卖课,讲概念,前景,这些基本上都是拿别人的产品来给自己做嫁衣,自己顶多是个工具的使用者和营销者,比如用 Midjourney,Kimi,豆包,海螺什么的,告诉大家用了就能提效,获得流量,

Shopify 构建商城页面的几种方式

Shopify 构建商城页面的几种方式

当用户需要对 Shopify 商城页面有自定义的需求时,一般会选择: 1、直接使用官方商城的 theme 来构建,可以使用,但是免费模板较少,只有 13 个。 2、使用第三方 theme 来构建,也有很多的模板可以选择,比如 envato 上有数百个 shopify 的模板,这是个非常大的市场。 3、完全自定义开发,自由度最高 当用户对 Shopify 商城页面,有完全自定义的需求,通常是常规主题无法满足需求,推荐使用 Shopify Hydrogen 的官方方案,开发人员可以对商城进行完全的页面级别的自定义。 而对于开发人员来说,官方的 Shopify Liquid 开发起来的效率和体验,是不如 Shopify Hydrogen 来的舒服,而且使用 Shopify Hydrogen ,还可以对性能有提升,

Meepo 要找一份远程前端(全栈)开发的工作

Meepo 要找一份远程前端(全栈)开发的工作

为什么找远程岗位 我一直是比较喜欢远程合作的方式,基本上从事远程开发的团队,都是奔着做事去的,大家能筛选到一起,为一个目标而努力,是一件很难得的事情,远程协作的方式,在自由度和产出之间能保持非常好的平衡,没有必要在通勤以及办公室的无效沟通上浪费太多的时间。 技术特点如何 前端: React + TypeScript 生态体系,常规的网页开发,浏览器插件,Electron 客户端开发都 OK,对各种前端技术方案有一定的沉淀和实践。 后端: Nextjs + Nestjs 开发全栈站点及后端 API 服务 个人特点 即插即用,对于大多数的前端场景和技术方案,都有所涉及。 多年的开发经验,对企业自有产品开发,大客户定制,以及独立开发,有一定的观察和沉淀。 拥抱 AI,对当下比较热门的 AI 技术有一定的了解和沉淀。 喜欢分享和交流,对技术和业务,以及营销都感兴趣。 之前接触的一些业务形态 公司层面: 主要是国内客服领域,涉及到全流程客服,IM,音视频等