无头CMS简介

无头CMS是与前端分离的内容管理系统(CMS)。 换句话说,它是一个CMS,仅使用RESTful或GraphQL通过API提供内容。 术语“无头”来自从提供内容的“主体”(后端或CMS)中删除“头”(前端)的概念。

如果您熟悉WordPress或其他传统的整体式CMS(例如DrupalJoomla) ,那么本指南对您来说将很容易,因为我们通常使用其内置函数和模板功能通过其模板系统来创建前端。 CMS所基于的语言。 让我们开始吧。

为什么要构建无头CMS?

在阅读本指南之前,我想强调一下使用Headless CMS设置构建网站的许多优点。

首先,使用Headless CMS,您可以隐藏网站上使用的后端。 由于后端未知或难以发现,因此这可能会使您的网站无法成为暴力攻击之类的攻击目标,而在使用像WordPress这样的开源CMS时,暴力攻击就很常见。

其次,Headless CMS可能会帮助您加快网站的加载速度,因为它只会向API发出请求并即时呈现内容,而不会在用户导航到新页面时重新加载整个页面。

第三,开发人员可以摆脱CMS在呈现内容方面的限制。 例如,如果API允许编辑内容,则开发人员可以在前端构建工具以进行快速编辑。

最后但并非最不重要的一点是,借助Headless CMS,我们可以轻松地将内容传递到Web以外的其他各种媒体上,例如; 移动和桌面应用,物联网和IFTTT等。开发人员还可以使用任何语言来呈现内容。 因此,它可以改善开发人员和用户的整体体验。

无头CMS图

(所有图标由Icons8

无头CMS的缺点

尽管听起来不错,但无头CMS设置还具有其缺点,您在跳船之前也需要考虑这些缺点。

首先,由于需要运行Headless CMS设置的技术知识,因此进入的障碍可能很大。 您将需要两个不同的域来托管后端和前端,这两个域还都需要安装SSL证书,并将第三方服务集成到混合中,依此类推。

第二,如果您使用的是像WordPress这样的传统CMS,则许多插件可能无法立即使用。 您需要自己进行计算,以便可以通过API访问插件数据。

幸运的是,借助WordPress中庞大的社区,可以使用插件来解决这一缺点,例如,将ACF添加到REST API,以将随ACF添加的自定义字段数据添加到API,以及WP REST Yoast Meta ,它将添加Yoast SOE生成的元数据REST API的插件。

如何建立Headless CMS?

今天,有很多选择可以构建无头CMS设置。 ContenfuldotCMSButterCMS都是内容API中的著名名称。

这些服务仅提供API和用于管理内容的接口。 您可以根据自己的意愿来呈现内容。 这些类型的服务通常提供用于各种编程语言的SDK,以使开发人员可以轻松连接和使用API​​。

此外,根据headlesscms.org的介绍 ,现在有大约50种开源和封闭源CMS可以帮助您掌握Headless CMS的设置。 该列表不包括传统的CMS,例如WordPress,Drupal和Magento,它们现在都内置了内容API。

使用WordPress作为无头CMS

自版本4.4起,WordPress内置了REST API。 该API包括用于检索帖子列表和每个帖子内容以及编辑帖子的端点。 拥有此API后,就可以开始创建Headless设置了。

在本指南中,我们将使用无头WP入门程序 ,而不是从头开始,它已经为我们设置了所有内容。 它包括WordPress安装以及使用React.js呈现内容的前端设置。

  1. 无头WP Starter需要Docker。 因此,假设您尚未将其安装在计算机中,则可以直接按照以下说明在Windows和macOS上安装Docker和Docker Compose。
  • 接下来,我们创建一个目录来托管我们的站点。
  • mkdir wp-headless && cd $_
    
  • 然后,从存储库中将Headless WP Starter克隆到我们刚刚创建的目录中。
  • git clone https://github.com/postlight/headless-wp-starter .
    
  • 最后,我们运行以下命令来启动并运行该站点。
  • docker-compose up -d
    

    此过程将从Docker注册表中下载多个Docker映像并启动容器,这可能需要花费一些时间才能完成。

    完成后,我们将能够从localhost:3000访问该站点,如下所示。

    在浏览器中加载WP Headless

    最后的想法

    我认为,当CMS主题或模板不足以创建您想要的前端体验时,或者将内容分发到Web之外的其他渠道时,Headless CMS更为可取。 对于简单的网站,我相信使用单片CMS仍然是最简单的方法。

    无论如何,我希望您发现本文对进入Headless CMS有所帮助。

    翻译自: https://www.hongkiat.com/blog/intro-to-headless-cms/