什么是 Headless CMS？
传统的 CMS（Content Management System）通常是一个集成商业网站设计、管理、发布和维护的系统，比如 WordPress、Joomla、Drupal 等。这些系统通过集成前端和后端，真正实现所见即所得的效果，也就是它可以提供“超级集成”的能力。这意味着，它为开发人员和编辑人员提供了直接操作的界面，而不需要它们了解和亲自执行后台操作。
而 Headless CMS 的特点则是它只提供内容管理，不提供“超级集成”功能。也就是说，开发人员可以自由选择前端框架，甚至不需要一个模板，只需要使用前端 API 就能够访问 CMS 内容。
以 WordPress 为例，如果你想要展示一个文章列表，你需要安装并启用 Headless CMS 插件，然后使用 WordPress 的 REST API 从你的应用程序中读取数据。
Netlify CMS 介绍
Netlify CMS 是一个基于 Git 的开源 CMS，它用于管理静态网站和部署。它的主要特征是使您的静态站点更易于维护，尤其是在多个编辑人员场景下。它与 Netlify 的集成让您可以轻松地管理和部署静态站点。
Netlify CMS 的工作原理
Netlify CMS 依赖于静态内容管理和后台开发人员的 API 来实现数据存储。它将数据保存在本地文件夹中（也就是 Git 仓库），然后允许您通过插件和配置自定义 UI。所有 UI 配置数据也保存在本地文件夹中（位于 admin/config.yml 中），这样您就可以将它们添加到源代码存储库中。
Netlify CMS 的官方插件
官方插件支持集成 GitHub、Gitlab、Bitbucket 或者自己的 Git 仓库，因为它使用了 Git REST API 请求管理集成。它可以创建、编辑、删除等内容操作，如文章、图片等信息。
除此之外，Netlify CMS 支持多语言，自定义字段和数据检查、版本管理等功能。它还支持扩展和自定义 UI、授权和身份验证，通过自己编写插件来扩展网站功能和内容。当然，你可以在 Netlify CMS 官方文档 中可搜索可免费开源的插件，并集成到你的项目中。
Netlify CMS 的优势
相比于其他 CMS，Netlify CMS 更加简单易用，在网站的开发和部署上也更加方便。下面是 Netlify CMS 的优势：
- 作为一个 Headless CMS，它更加灵活，使得开发人员可以轻松构建更加极端的网络使用场景；
- 作为一个基于 Git 的 CMS，使用了 Git 的分支管理，使得在网站开发和维护团队之间更加方便，提高了协同开发效率；
- 支持 Travis CI 或 Circle CI 或 Gitlab Runner 自动化部署，可以直接将构建结果部署到 AWS 或 Google 或其他任何静态托管，并提供 SSL 证书，同时还可以使用 CDN 加速控制和优化体验；
- 官方插件支持相对丰富，可创建、编辑、删除文章、图片等，自定义字段和数据校验等；
- 支持多语言、版本管理等功能，使得网站开发更加方便。
Netlify CMS 的安装
要安装 Netlify CMS，您需要一个 GitHub 账户，以便为代码存储库提交、分支和 Pull Request。当然，需要先初始化存储库，如果没有存储库，您可以通过 GitHub 或 Gitlab 等创建一个新的存储库。
注意：必须切换到 gh-pages 分支或者你的其他分支。
$ mkdir my-website # 替换my-website为你的网站名称 $ cd my-website $ echo "Hello, world." > index.html
然后安装 Netlify CMS，只需要在项目根目录安装它就可以了。
$ npm install netlify-cms
具体使用可以查看 Netlify CMS 官方文档。
Netlify CMS 的使用
在网站根目录下创建一个 admin 目录，用于存放插件和配置的文件。
配置部分
创建配置文件 config.yml：
-- -------------------- ---- -------
--------
----- -----------
------- ---- - ----------------------
-------------
- -----
----- ------------- - -------
--------- ------- - -------------
------------- ---------------
------------ - --------------
- ----- ------ - ---------- --
------ ------ - ----
------------ ----- ------ - --
------- -------------- - -----
------- ---- - -----
------- - ------
- - ------ -------- ----- -------- ------- -------- -
- - ------ ------- ----- ------- ------- ---------- -
- - ------ ------- ----- ------- ------- ---------- -
- - ------ --------- ----- --------- ------- -------- -
- - ------ -------- ----- -------- ------- ------- -
插件部分
由于需要在页面中运行 Netlify CMS UI 需要使用相应的插件来快速添加和设置：
-- -------------------- ---- -------
------ --- ---- ------------------
------ ----- ---- --------
------ -------- ---- ------------
------ --------------- ---- -------------------------------
------ --------------------------
------ ------------
-- -----
----------------------------------------
-- ------
----------------------------------- -----------------
-- ----
----------
------- -
-------- -
----- --------------
------- -------
----- ----------------
--
------------- -----------------
-------------- -----------
------------ -
-
----- -------
------ -------
------- ---------------
------- -----
------- -
-
------ --------
----- --------
------- ---------
--------- -----
--
-
------ -------- ------
----- ---------------
------- -----------
-------- --- -------
--
-
------ -------
----- -------
------- -----------
--------- -----
--
-
------ --------------
----- --------------
------- -------
--------- -----
--
-
------ ---------
----- ---------
------- ---------
--------- -----
--
-
------ -------
----- -------
------- -------
--------- -------------- ------- ------ ---------
--
--
--
--
--
---这个例子使用了在 React 项目中，所以需要为 Router 在页面中添加相应的设置。
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ --- ---- ------------------
------ -------- ---- -------------------
------ --------------
-----------
-------- ----- -
------ -
--------
--------
------ -------------
--------- --
--------
------ ---------
-------- ---------
--------
---------
---------
--
-
------ ------- ----BlogPage 页面展示了文章列表和预览，具体代码参看 Netlify CMS 官方示例代码。
总结
作为 Headless CMS，Netlify CMS 实现了相比于集成式 CMS 更加灵活，更加容易扩展的优势。因为它是基于 Git 版本控制的，使得开发人员可以协同开发，使用文件管理并分享在不同的平台上。同时，它还有一些方便的工具和插件，可以帮助正确构建你的网站，快速管理和部署。
这种解耦设计的 CMS，如此自由和灵活，如果你有投身于前端开发行业，那么一定不能错过。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6fdd8f6b2d6eab3f8e112