零基础入门笔记：Headless CMS 入门指南

阅读时长 8 分钟读完

如果你是一个前端开发者，那么你一定会遇到这样一种场景：你的客户需要一个具备个性化定制的内容管理系统(CMS)，于是你不得不花费大量时间学习实现一个CMS。

现在，一个解决方案是使用一个Headless CMS。Headless CMS是一种将前端和后端分离的CMS模型，它将数据存储在一个中央数据库中，从而使前端更容易访问， 而不必担心那些复杂的数据结构和管理界面。本文我们将对Headless CMS进行详细的介绍和讲解。

什么是 Headless CMS？

传统的CMS(内容管理系统)将内容和前端展示程序集成在同一代码库中，就像WordPress一样。 CMS控制所有的内容和样式，当您使用后台更改数据时，WordPress通过将内容和前端展示相结合，动态生成页面。 另一个问题是，如果您想要一个自定义CMS，您必须做出很多CMS的代码修改。

相反，Headless CMS 分离前后后端，这样您就可以使用任何前端展示技术。 Headless CMS 着重于存储数据，而不是特定HTML。 将数据与前端展示程序(如 Vue.js, React 和 Angular)分离，使得前端更加灵活、可定制性更高。

一个概念图如下所示：

Headless CMS 的优点

Headless CMS 具有很多优点：

  1. 灵活：Headless CMS 允许您使用自己熟悉的工具和技术。并且您可以根据你的需要进行定制。

  2. 易于整合：由于 Headless CMS 的 API 可以通过REST APIs、GraphQL等形式供接口访问，因此您可以轻松地将其集成到您的工具链中。

  3. 可扩展性：Headless CMS的数据模型可以方便的扩展，这使得您可以根据需要自由添加更多的内容。

Headless CMS 的缺点

  1. 开始阶段可能会较难：如果您没有使用 Headless CMS 的经验，则可能需要一些学习时间。

  2. 大量自定义工作：虽然 Headless CMS 提供了很多灵活性，但也需要大量的自定义工作，否则很难使它满足某些特定的需求。

常见 Headless CMS

有很多主流的 Headless CMS，其中最受欢迎的是：

  1. Contentful：它是一种基于云的平台，允许您使用 RESTful APIs 匿名访问您的存储库。Contentful 使用模型和内容类型来管理存储的内容。

  2. Strapi：一个开源的 Node.js CMS 应用程序。它使用了完全的 REST API 进行交互，因此可以与任何前端展示程序集成。

Headless CMS 的基本用法

下面，我们将以 Contentful 为例，演示 Headless CMS的基本用法。

步骤 1: 注册Contentful账户

首先，访问 https://www.contentful.com/sign-up/ 注册一个 Contentful 账户。您需要在右上角单击"Sign up"，然后按照指示填写您的个人信息。

步骤 2: 创建新的 Space

一旦您拥有了 Contentful 账户，您将进入 Contentful 的控制台。

在控制台左上角，点击 "Create new space"。 为您的新空间指定名称，然后点击 "Create space"。

步骤 3: 创建模型

Contentful 的一个基本概念是模型。模型定义 Contentful 空间的内容类型、属性和关系。

模型需要以下三种元素：

  • 内容类型定义：这定义了一个内容类型的基本概念，例如文章、页眉等等。

  • 属性定义：这为每个内容类型定义了一组属性。属性可以是文本、图像、时间戳等。

  • 各种关系：这是由连接属性定义的关系，通常用于将一个内容类型连接到其他类型。

例如，我们想要创建一个博客文章系统，我们需要创建一个文章内容类型，它包含两个属性，即标题和正文。 Contentful 的内容类型可以使用 JSON 格式定义。下面是我们的 JSON 示例：

-- -------------------- ---- -------
-
  ------- -----------
  --------- -
    -
      ----- --------
      ------- --------
      ------- ------
    --
    -
      ----- --------------
      ------- -------
      ------- ------
    -
  -
-

此示例具有两个字段：标题和正文。这两个字段都是文本类型。

步骤4：添加数据

现在，我们已经定义了我们的博客文章模型(CMS)，我们可以为其添加新的数据。

  • 首先，您需要为模型添加一个条目，然后才能添加该模型的条目数据。

  • 点击模型名称以添加新条目。

  • 填写表格以添加数据。

步骤5：API 集成

我们已经添加了一些博客文章，下一步是设置 API，让我们的应用程序能够查询 Contentful 中的数据。 Contentful 提供了两个主要的API，第一个是 REST API，第二个是 GraphQL API。

本文档我们使用 REST API. 下面是一个简单的 REST API 请求示例:

-- -------------------- ---- -------
----- ------- - ---------------
----- ----------- - -------------------
----- ------ - ----------------------------------------------------------------------------------

-------------
  --------- -- -
    ------ ----------
  --
  ---------- -- -
    -----------------
  --

其中，YOUR_SPACE_ID 和 YOUR_ACCESS_TOKEN 为您的 Contentful API 凭证。 您可以在Contentful 控制台的“Settings”页面中找到它们。

步骤6：使用CMS数据实现前端展示

最后，使用获取到的数据，来实现我们的前端展示程序。例如下面是一个基于 Vue.js 的示例：

-- -------------------- ---- -------
----------
  -----
    ---- --------------- -- ---------- -----------------------
      ------ --------------------- -------
      ------- --------------------------- --------
    ------
  ------
-----------

--------
------ ------- -
  ----- ------
  ---- -- -
    ------ -
      ---------- --
    -
  --
  -------- -
    -------------- -- -
      ----- ------- - ---------------
      ----- ----------- - -------------------
      ----- ------ - ----------------------------------------------------------------------------------

      -------------
        --------- -- -
          ------ ----------
        --
        ---------- -- -
          -------------- - ----------
        --
    -
  --
  ------- -- -
    ---------------------
  -
-
---------

结论

Headless CMS 是当今前端开发中的一个热门话题。它将前端和后端分离，使其更容易使用各种编程语言和前端工具。在本文中，我们提供了一个基本指南，帮助您快速了解 Headless CMS 以及它的概念和使用方法。Headless CMS 在许多方面都比传统的CMS更加灵活和可扩展，值得尝试。

参考文献

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f4b5d8c5c563ced563dd17

纠错
反馈
相关推荐
精选内容