什么是 Headless CMS？
Headless CMS（无头内容管理系统）是一种全新的内容管理系统，它通过提供 RESTful API 或 GraphQL 接口将内容从 CMS 内部分离。这种方法在前端开发中很常见，它使开发人员可以从头开始构建自定义的前端解决方案，并从中减轻了与 CMS 的前五个关注点：安全性、维护、备份、功能和性能。Headless CMS 允许客户制定规则，从而在没有头部的情况下声明其内容和数据结构。这使得 Headless CMS 的内容更具有可重用性、更富有表现力，并且可以在更新内容时更具灵活性。
Sanity.io 简介
Sanity.io 是一种面向现代应用程序的无头 CMS，它可以管理任何类型的内容，包括文本、视频、图像、音频、URL、地图等，而且允许客户创建其自定义数据结构。在集成了 Sanity.io 后，内容托管在全球 CDN 上并且与您的前端解决方案完全集成。它提供了许多新特性，支持用户管理、团队协作、自定义域名等等。
什么是 Sanity Studio？
Sanity 提供了一个名为 Sanity Studio 的带有现代 UI 的图形界面来帮助管理员管理内容。谷歌钥匙和 OAuth 等身份验证和权限机制使得创建凭证和规则管理变得更加容易，而自定义插件扩展了返回的数据，以增强管理员的工作效率，一定程度上简化了工作流程。其中，Sanity Studio 还提供了自定义 Schema 和可扩展的输入控件等额外的高级特性，以满足各种具体的应用场景。
Sanity.io 的 Headless CMS 新特性
Incremental publishing（增量发布）
你可能会有发布定期的博客文章或者较为稳定的页面的需求，但是如果系统中除了文章以外还有一些其他数据也需要同时推送，那么就可能会存在耗时较长、需要等待所有资源都被推送完才可以进行下一步操作等问题。Sanity.io 的 Incremental publishing 功能可以大大提高此类耗时长、依赖多种资源情况下的发布效率。具体地，Incremental publishing 的实现方式是根据时间线记录和跟踪已经发布的资源，而非每次发布都检查所有资源。这样一来，我们在每次主动发布内容时，程序可以快速判断出上一次发布后哪些资源被添加、更新或者删除了，并且只对这些有变化的资源进行处理，从而实现增量式的发布。
Sanity Webhooks
Webhooks 是一种广泛使用的技术，它使得在特定事件触发的时候发送 HTTP 请求成为了可能。在 Sanity Studio 中使用 Webhooks ，我们可以向远程应用程序发送 HTTP POST 请求，将 CMS 中的数据更新、新数据公开发布或删除时的通知推送到远端应用中（例如 React、Gatsby 等）。在实际开发中，我们常常需要在 Sanity.io 更新数据时，自动触发我们的远程程序更新数据或进行其他的业务逻辑。使用 Webhooks 可以方便地实现这一需求，以提高数据的时效性和单位时间处理能力的提升。
Portable Text
如果您正在寻找使用最新的技术来描述您的内容，那么 Portable Text 可能是您要找的。Portable Text 是一个描述内容的标记语言，可以适用于任何格式化文本内容的过程中。由于对与数据的结构相对比较抽象，因此它可以应用于任何类型的结构化文本。这使得您可以将数据导出作为可重用的数据结构，以便用于其他前端应用程序的渲染（例如 React 和 Vue），从而更容易保持一致的用户体验。
Sanity.io 中的 Image Asset 优化
在使用 Sanity.io 进行头像、照片、图标等图像存储时，需要循环加载和缓存图像的协议是一种新的协议，即 Sanity.io 提供的 Image Asset。它除了支持像基本图像大小和宽高比外的配置外，还加入了一些新技术，并内置了 CDN。一旦您将图像上传到 Sanity，它将生成一个<img> 标签（更多用于 srcset 等标签的配置）来访问它的 CDN。
如何使用 Sanity.io？
基本配置
1.首先您需要在 Sanity.io 上完成注册，并创建一个项目。
2.选择应用程序后，您需要创建一个 Schema ，其包括您的数据类型和其关系等元数据。
3.您可以使用 Sanity Studio 的 UI 来添加或修改内容。或者，您还可以使用 Sanity API 来进行 CRUD 操作。
示例代码
在这里，我们提供了一个用 Sanity.io 实施 Headless CMS 的实例代码。其中包括代码环境配置、数据结构定义和组件设计等方面。
环境配置
-- -------------------- ---- ------- - -- ------ --- --- ------- -- ----------- - ----- ------ ---- - ---- ------ ------ -- ------ ----- - -- ------ ------- --- ------ ------- ------
数据结构定义
-- -------------------- ---- -------
-- ---------
------ ------- -
----- ----------
------ -----
----- -----------
------- -
-
----- --------
------ -----
----- ---------
----------- ---- -- ----------------
--
-
----- --------------
------ -----
----- --------
--- -- ----- ------- ---
--
-
----- --------
------ -----
----- ---------
----------- ---- -- ----------------
--------------- ------
--
-
----- --------
------ -----
----- --------
-------- -
-------- -----
--
----------- ---- -- ----------------
--
--
-组件设计
-- -------------------- ---- -------
-- --------
------ -------- ------------ -
----- -
----- - ------ ----------- --
------
---------
---------
- - -----
------ -
---------- ------------- --------------------------
-----
---- -------------------- - ----------
------
-------------
------------------
-------
------------ - ----
--------------- -- -
----------------------
--------------------------- - ----
--
-------------------
--
------
---- -------------------- - --------------------
------
------------
-
-总结
在移动互联网的大环境下，无头 CMS 的出现带来了新的开发模式，尤其是在新型应用场景中或是在对数据互通要求更高的业务中与传统 CMS 相比有着比较大的优势。而 Sanity.io 则在 Headless CMS 领域取得了重要进展。它支持各种类型的文本数据和图像数据，并提供了强大的项目管理和启用简单的 API 通信等特性。通过本文我也希望您能对 Sanity.io 中的 Headless CMS 新特性有更详细的了解，在实际开发中合理地应用使用，从而降低开发复杂度和提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490173348841e9894e415a6