CMS / 内容管理框架
Headless CMS 架构概述
传统的 CMS（如 WordPress、Drupal）将内容管理、模板渲染和前端展示耦合在同一个系统中。而 Headless CMS（无头 CMS）将内容管理层与展示层分离，仅通过 API 提供内容服务，前端可使用任意技术栈消费内容。
核心架构
Headless CMS 的架构分为三个层次：
- 内容管理层 — 提供可视化编辑器、内容建模、媒体管理、权限控制等功能，通常具备管理后台界面
- API 层 — 通过 REST API 或 GraphQL 暴露内容数据，支持认证、缓存、Webhook 等机制
- 消费层 — 前端应用、移动端、IoT 设备等，通过 HTTP 请求获取内容并自行渲染展示
这种解耦带来了显著的架构优势：前后端团队可独立迭代、内容可被多端复用、前端技术栈不受限制。
与传统 CMS 对比
| 特性 | 传统 CMS（WordPress） | Headless CMS（Strapi） |
|---|---|---|
| 前后端耦合 | 紧密耦合，模板驱动 | 完全解耦，API 驱动 |
| 前端技术栈 | 限定 PHP 模板 | 任意框架（React/Vue/Next.js） |
| 内容复用 | 仅限网站 | 多端复用（Web/App/IoT） |
| 扩展方式 | 插件机制 | 插件 + 自定义 API |
| 部署灵活性 | LAMP 环境 | 任意云平台 + 静态托管 |
主流方案对比
Strapi
Strapi 是目前最流行的开源 Headless CMS，采用 Node.js 开发，提供自托管部署方案。
- 内容建模：可视化界面创建内容类型，支持字段拖拽配置
- 权限系统：基于角色的访问控制（RBAC），支持细粒度 API 权限
- 插件生态：官方插件市场提供 SEO、电子邮件、媒体优化等扩展
- API 类型：同时支持 REST 和 GraphQL
- 适合场景：企业级项目、需要深度定制的场景
Ghost
Ghost 定位为专注内容发布的轻量级 CMS，以出色的编辑体验闻名。
- 编辑体验：基于 Card 的富文本编辑器，支持嵌入多媒体
- 性能：Node.js 运行时，页面加载速度优秀
- 会员系统：内置订阅付费和邮件 Newsletter 功能
- API 类型：REST API + 前端 SDK（Ghost Content API）
- 适合场景：博客、新闻媒体、付费订阅内容平台
Directus
Directus 的核心特色是直接对 SQL 数据库进行可视化管理的实时 CMS。
- 数据库驱动：自动识别数据库 Schema，即时生成 API
- 数据工作室：功能类似数据库管理工具，支持复杂查询
- 扩展性：通过分布式的 Flow 自动化实现业务流程
- API 类型：REST + GraphQL 双支持
- 适合场景：已有数据库的项目、需要数据管理后台的应用
Sanity
Sanity 是云原生 Headless CMS，以实时协作和结构化内容著称。
- 实时协作：基于 Operational Transform 的多人实时编辑
- GROQ 查询：专有查询语言，比 GraphQL 更简洁灵活
- 自定义编辑器：使用 React 组件自定义编辑界面
- CDN 加速：全球内容分发网络确保快速加载
- 适合场景：需要强大内容编排能力和团队协作的项目
前端集成方式
REST API 调用
最简单的集成方式，直接通过 HTTP 请求获取内容：
// 获取文章列表
const res = await fetch('https://cms.example.com/api/articles');
const { data } = await res.json();GraphQL 调用
精确控制返回字段，减少数据冗余：
query {
articles(sort: "publishedAt:desc", limit: 10) {
title
slug
excerpt
cover { url }
}
}SDK 封装
主流 CMS 都提供了前端 SDK，封装了认证、缓存、查询构建等逻辑：
import Strapi from 'strapi-sdk-javascript';
const api = new Strapi('https://cms.example.com');
const articles = await api.getEntries('articles');内容建模与自定义类型
Headless CMS 的核心能力之一是灵活的内容建模。开发者可以在管理后台定义内容结构，无需修改数据库 Schema：
- 单内容类型（Single Type）：如网站配置、关于页面等只有一个实例的内容
- 集合内容类型（Collection Type）：如文章、产品、用户等多实例内容
- 组件字段（Component）：可复用的字段组合，如 SEO 元数据、富文本块
- 动态区域（Dynamic Zone）：允许编辑者在预定义的组件中选择组合内容
博客前台与管理端分离架构
在 Headless CMS 架构中，博客应用被拆分为两个独立的部分：
管理端：以 Headless CMS 后台为管理界面，负责文章创建、编辑、分类管理、媒体上传等操作。编辑人员无需了解前端技术即可管理内容。
前台：通过 API 消费 CMS 内容的前端应用，可以采用静态生成（SSG）或服务端渲染（SSR）策略。当 CMS 内容更新时，通过 Webhook 触发前端重新构建，实现内容实时更新。
这种架构使内容管理体验与前端展示体验互不干扰，各自演进。
交互 Demo
以下 Demo 模拟了一个 Headless CMS 架构的博客应用，包含前台展示和管理端操作：