Skip to content
标签
cms
headless-cms
strapi
devops
字数
1328 字
阅读时间
6 分钟

什么是 "Headless" (无头)? ​

在计算机领域,“无头”(Headless)通常指代没有图形用户界面(GUI)的软件。

  • 无头浏览器 (Headless Browser): 指没有图形界面的浏览器,可以通过编程接口模拟用户交互,常用于自动化测试、网络爬虫、页面截图等。
  • 无头 UI (Headless UI): 指不提供可视化界面、只提供功能和逻辑的 UI 组件库。

这个概念的核心在于前后端分离:将“头”(前端/表现层)与“身体”(后端/内容层)分离开。

传统 CMS 的背景与局限 ​

在理解 Headless CMS 之前,我们先回顾一下传统的 CMS (Content Management System,内容管理系统)。

典型的例子如 WordPress,它通常包含两大部分:

  1. 内容管理后台: 用于创建、存储和管理网站内容(如文章、图片、媒体资源)。
  2. UI 展示前端: 一个集成的网站界面,用于向用户展示内容,通常支持主题和插件来自定义外观。

传统 CMS 的局限性 ​

  1. 内容模型固化: 内容大多围绕着“网页”构建,如文章、页面、媒体等,难以灵活扩展到其他内容类型(例如:APP 的配置、IoT 设备的数据)。
  2. 分发渠道单一: 内容与前端展示紧密耦合,主要为网页设计。如果想将同样的内容发布到手机 App、小程序、智能手表等多个平台,通常需要复杂的改造或为每个渠道单独维护内容。

为了解决这些问题,Headless CMS 应运而生。

Headless CMS 概述 ​

Headless CMS 是一种只负责内容管理的后端系统。它将内容通过 API(如 RESTful API 或 GraphQL)提供给任何需要的前端应用,而不关心内容最终如何展示。

它剥离了传统 CMS 的“头”(前端展示层),只保留了“身体”(内容仓库和管理后台)。

优势与劣势 ​

优势 ​

  • 灵活性: 你可以自由定义内容的数据模型,不受限于传统的“文章”、“页面”模式。
  • 全渠道发布: “一次创建,随处发布”。同一份内容可以轻松地分发到网站、App、小程序、数字标牌等任何前端。
  • 技术栈自由: 前端开发者可以使用任何他们喜欢的技术栈(如 React, Vue, Svelte, Swift, Kotlin)来构建用户体验。

劣势 ​

  • 需要自建前端: 最大的“缺点”是你需要自己从零开始构建或集成前端展示层,这带来了额外的工作量。

Headless CMS 工作流程示例 ​

以下内容转载自腾讯云社区文章 headless cms,无头CMS?,它以一个名为【微言码道】的网站为例,清晰地展示了 Headless CMS 的使用流程。


案例:使用 Headless CMS 管理多类型内容 ​

假设【微言码道】网站需要发布文章、视频、音频和开源项目等多种内容。如果使用传统 CMS,这些不同类型的内容可能都得用“文章”的形式来承载,但这并不合适。

以视频为例,它有名称、类别、描述、播放地址、封面、时长等多个专属属性。使用 Headless CMS,我们可以这样处理:

1. 定义数据模型 ​

首先,在 Headless CMS 后台为“视频”创建一个自定义的数据模型,并为其添加所需的字段。

定义视频数据模型

2. 录入内容数据 ​

模型定义好后,内容创作者就可以在后台方便地录入具体的视频数据。

录入视频数据

3. 通过 API 访问内容 ​

Headless CMS 会自动为创建的内容生成 API 端点。前端应用可以通过这些 API 来获取数据。通常还包含完整的增删改查(CRUD)功能和权限控制。

自动生成的 API

4. 构建前端 UI ​

有了 API,前端就只剩下纯粹的展示工作。开发者可以自由选择技术栈(如 Gatsby.js)和设计风格来构建 UI,并从 Headless CMS 获取内容进行渲染。

自定义的前端 UI

这种方式下,UI 和内容彻底分离。未来如果想开发 App 或小程序,只需再次调用相同的 API 即可,无需重复管理内容。


典型用例:Strapi ​

Strapi 是一个流行的开源 Headless CMS,它允许开发者快速构建可定制的 API。如果你想了解更多,可以参考这篇笔记:strapi使用。

参考 ​

贡献者

The avatar of contributor named as jiechen jiechen

页面历史

用 ♥ 撰写