在 Headless CMS 中使用自定义字段-JavaScript中文网-JavaScript教程资源分享门户

前言

随着企业和组织业务的数字化转型，CMS（内容管理系统）成为了企业必不可少的一部分。然而，传统 CMS 的架构和设计可能无法满足业务需求，限制了企业的发展。因此，另一种 CMS 架构，Headless CMS（无头 CMS），应运而生。

Headless CMS 将内容管理和内容交付分开，提供 API 接口，使得前端开发人员可以更加灵活地获取和渲染数据。此外，Headless CMS 还支持自定义字段，使得企业可以更加自由地管理和定制内容。

本文将会介绍 Headless CMS 中自定义字段的使用方法和应用场景。

自定义字段的作用

传统 CMS 的数据结构是固定的，对于某些特殊的需求可能无法满足。而 Headless CMS 则支持自定义字段，可以根据业务需求自由地扩展数据结构。

自定义字段的作用大致有以下几个方面：

增加数据灵活性。使用自定义字段可以轻松存储和管理各种类型的数据，比如图像、视频、音频等。
实现内容自定义。自定义字段可以按照自己的需求定制内容，构建满足自己业务需求的内容结构。
提升开发效率。自定义字段可以减少前后端开发人员之间的沟通成本，降低维护成本。

Headless CMS 中自定义字段的实现

Headless CMS 支持多种自定义字段类型，大致可以分为以下几种：

文本型字段。主要用来存储文本内容，支持多行文本、富文本等文本格式。
数值型字段。主要用来存储数字，包括整数、小数等。
布尔型字段。主要用来存储布尔值，即真和假。
日期型字段。主要用来存储日期和时间，包括年、月、日和时、分、秒等。
文件型字段。主要用来存储文件，包括图片、视频、音频等。

除此之外，Headless CMS 还支持自定义字段的验证和提示，使得数据的输入更加规范和友好。

接下来，我们以 Strapi 为例，介绍如何使用自定义字段。

Strapi 中自定义字段的实现

创建模型

在 Strapi 中，我们可以通过 Web 界面或代码方式来创建模型，这里我们选择代码方式。

先打开 Strapi 后台管理界面，点击左侧菜单栏的「Setting」，下拉列表中选择「Roles & Permission」，在页面上方选择「Public」然后勾选下方的「All」，这样就能看到所有的 API。

编写代码

新建文件夹 my-first-strapi，进入文件夹后执行以下代码：

# 初始化项目
npx create-strapi-app my-first-strapi --quickstart
cd my-first-strapi

# 运行 Strapi
npm run develop

运行完之后，浏览器访问 http://localhost:1337/admin 即可进入后台管理界面。

在命令行新建一个模型：

strapi generate:model tag name ENname:string alias:string description:text

这里我们新建了一个 Tag 的模型，包含以下四个字段：

name：名称，务必配合别名使用，名称要求唯一。
ENname：英文名称。
alias：别名，名称一定要加上别名，因为对于一些搜索引擎它是抓取的唯一的标识符。
description：描述。

可以看到，我们使用了不同类型的字段，比如 ENname 是字符串类型，description 是文本类型。

建立模型和路由

在创建完模型后，我们需要建立模型和路由的关系。打开 ./config/routes.json 文件，新建一个路由：

{
    "method": "GET",
    "path": "/tags/:alias",
    "handler": "tag.findOne",
    "config": {
        "policies": []
    }
}

然后在 ./api/tag/controllers/tag.js 文件中写入处理函数：

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

这里的处理函数就是处理 GET 请求的，根据 alias 进行查找。

测试模型

完成模型和路由的建立后，我们可以通过 Postman、curl 或者直接在浏览器中输入网址来测试模型是否能够被正确地调用。

在浏览器中输入 http://localhost:1337/tags/news，可以得到以下结果：

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

可以看到，我们成功地获得了一条数据，里面包含了我们创建的数据字段。

自定义字段的使用场景

1. 创建产品型企业网站

产品型企业网站需要更多的内容自由度，以展现产品特点，符合客户需求。产品信息通常是复杂的结构，包括产品介绍、图片、视频、参数等。 Headless CMS 的自定义字段功能可以帮助企业按照自己的需求自由地定制这些信息，使得产品信息更加完美地呈现。

2. 构建内容丰富的博客

专业博客需要不断更新内容，具有多种方式和结构来呈现其信息。自定义字段可以帮助博客构建者存储和管理各种类型的数据，包括图片、视频、音频等，从而打造出更加精美、丰富的内容。

3. 搭建电商平台

电商平台需要与前端应用共享数据，支持物品变体、价格、库存等内容。结合产品分类、标签、包装、规格等信息，自定义字段可以帮助电商平台与前端应用更好地协同工作。

示例代码

下面是一个简单的自定义字段示例：

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

可以看到，该示例中除了标准的文章标题、内容、作者名等字段外，还包含了自定义的文章封面图、发布日期、是否发布以及标签等字段，使得数据更加灵活和丰富。

结论

Headless CMS 的自定义字段功能为企业提供了更多的自由度和可定制性，在满足企业需求的同时，也提升了开发效率，降低了维护成本。希望本文能够帮助大家更好地了解和使用 Headless CMS 的自定义字段功能。

参考文献

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