随着移动互联网的快速发展，全球网站建设也经历了从传统浏览器 Web 阶段到移动客户端 App 阶段的演变。不同于传统 CMS 的基于 Web 页面输出的模式，Headless CMS 是一种能够以纯后端方式提供内容服务的 CMS 技术，其最大的优点是能够支持多渠道的内容输出。
本文将从 Headless CMS 技术的概念入手，深入探究其多渠道输出实现方案，并进行实践，最后结合代码示例进行详细的学习和指导。
Headless CMS 技术概述
Headless CMS 是一种新兴的 CMS 技术，与传统 CMS 不同它不限定于任何一种形式的输出渠道，只是单纯地提供了一种高效、灵活，且易于扩展的数据管理、存储、权限、查询等服务，其核心技术即为 Restful API。
Headless CMS 架构示意图：
Headless CMS 的主要优点包括：
- 自由度高，不限定页面展示形式；
- 高效灵活，完美支持多平台输出和开发模式；
- 资源池化，最小化重复性开发，提高开发效率；
- 安全可控，数据权限精细授权，控制企业隐私和安全。
Headless CMS 多渠道输出实现方案
Headless CMS 能够胜任多渠道输出主要依赖于以下两个核心技术：
技术一：API
Headless CMS 通过 Restful API 接口对外提供数据服务，使得各种平台、设备、技术栈都能够轻松接入，包括电视、手机、PDA、桌面端应用、游戏玩具等。通过 API 实现多端共通，实现业务逻辑一致性设计，避免多端不同逻辑造成流程混乱和开发不同步的情况。
技术二：前端渲染
前端渲染是 Headless CMS 实现多渠道输出的另一项核心技术，其主要作用是根据前端页面结构定义和后端 Headless CMS 服务交互机制，实现内容渲染、警示、推荐、搜索等功能。
前端渲染原理示意图：
从上图中我们可以看到：
- 用户浏览器向服务端请求页面；
- 服务端通过 Restful API 获取 Headless CMS 数据；
- 后端 CMS 通过页面结构给出标识；
- 前端脚本解析页面结构并请求合适的接口填充数据；
- 渲染完成后返回渲染结果。
Headless CMS 多渠道输出实践
接下来，我们基于 Strapi 的 Headless CMS 示例，实现一个多端输出的方案来进行实践。
Strapi 是一款方便部署、易于扩展、高效而且安全的 Headless-CMS 构建平台，其安装使用简单，适合各类企业级应用和网站搭建。我们现在就来基于 Strapi 实现一个多渠道输出的例子。
步骤一：安装 strapi
首先，我们需要在本地或服务器上安装 strapi，命令行输入：
$ npm install strapi@latest -g
步骤二：创建一个新的 strapi 项目
在创建项目之前，我们需要一个数据库，这里我们选择 mongoDB 作为我们的数据库。接着，输入如下命令来创建新项目：
$ strapi new my-project
如需更多安装及配置细节，可参考 官方教程
在项目创建后，我们需要在 Strapi 管理后台中创建文章模型，并添加内容。在模型和内容都创建完成后，我们就能够进行多端输出的尝试了。
步骤三：创建一个文章渲染页面
为了支持多端渲染，我们先创建一个适用于文章的通用文章页面，HTML 代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------------------
-------
------
---- ----------------
------- -------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------
--------
----- ------- - -- ------ ------- -- -- -
-----
----------------
----------------
------
--
----- --------- - --- --------------------------------------------------
----- ---------- - ----------------------------------------------
-----------------
----------- -- -----------
-------------- -- -
------------------------ ---------------- --- ---------------------------------
---
---------
-------
-------步骤四：创建一个 React-Native 移动客户端
现在我们构建一个跨平台应用，将刚才创建的文章渲染页面应用于 React-Native 移动客户端。输入如下命令进行 React-Native 项目的初始化：
$ npx react-native init MyReactNativeApp
接着，我们需要安装依赖库。进入项目根目录，执行如下命令：
$ npm i react-native-webview axios --save
安装依赖库后，我们就可以利用 WebView 组件实现数据渲染和展示。创建 ArticleWebView.js 文件，内容如下：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ - ------- - ---- -----------------------
------ ----- ---- --------
----- -------------- - -- --------- -- -- -
----- ------ -------- - ---------------
----- -------------- - ----- ---- -- -
----- -------- - ----- --------------------------------------------------
----------------------------
--
------------ -- -
--------------------------
-- -------------
------ -
--------
-----------------------
---------
----- -
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
---------------------
-------
------
------ -- -----------------------------------------------
-------
-------
--
--
--
--
--
------ ------- ---------------步骤五：创建一个 Electron 桌面客户端
现在我们添加一个 Electron 桌面应用，其主要功能为展示文章内容。使用 Electron 的原因在于它拥有良好的兼容性，并且可以提供类似浏览器的服务器，使得我们能够在本地部署一个任务栏应用。
在进行后续操作前，需要安装如下开发依赖库：
$ npm install electron-builder wait-on concurrently --save-dev
在安装完依赖库后，我们可以利用使用 create-react-app 脚手架来快速构建一个 Electron 应用。
在项目根目录下，建立如下目录结构：
public/ src/ ├─ main.js ├─ public/ │ └─ index.html └─ renderer.js package.json
首先，我们需要完成 main.js 文件的编写。这个文件作用是，创建一个窗口，并在窗口中展示 index.html 中的内容。我们先看代码：
-- -------------------- ---- -------
----- - ---- ------------- - - --------------------
----- --- - ---------------
----- ---- - ----------------
--- -----------
-------- -------------- -
---------- - --- ----------------
-------------------
------------
--------- -------------------- --------- --------------
--------- --------
-------- -----
--
--
----------------------- -- -- -
---------- - -----
---
-
--------------- --------------
--------------------------- -- -- -
-- ----------------- --- --------- -----------
---
------------------ -- -- -
-- ----------- --- ----- ---------------
---在完成 main.js 文件编写之后，我们就可以编写 public/index.html 文件了：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----- ------------------------------------ -------------------- ------- ----------- -- ------- ------ ------ ---------- ------ ---------------- --------- ------ ----------------- --
----- --------------- ---------------------------- ------------------ --
--------------- ------- --------------
-------
------
---- ----------------
------- -----------------------------
-------
-------注意：body 中没有任何内容，因为我们不需要在这个页面中构建 HTML 片段。现在，我们需要编写 renderer.js 文件来用户展示渲染数据。代码如下：
-- -------------------- ---- -------
----- - ----------- - - --------------------
----- ---- - ----------------
------------------------------------------- -- -- -
----- --------- - --- --------------------------------------------------
------------------------------ --- ------------ -- -
----------------------------------------- - -
-----------------------------
-----------------------------
--
---
------------------------------------ -----------
---在完成以上所有代码的编写后，打开终端并进入项目根目录，运行如下命令：
$ npm run electron-dev
至此，我们已经成功完成实践部分的所有细节，能够在多个平台上自由渲染我们所需要的文章内容。
总结
本文为大家介绍了 Headless CMS 技术以及基于 Strapi 实现的多渠道输出方案。在实践中，我们通过编写代码来帮助大家去理解和掌握该技术具体实现的方法。总的来说，使用 Headless CMS 技术是一种高效、灵活、易扩展的方式，帮助我们通过一套内容来支持多渠道输出，无论是 Web 或移动客户端、还是桌面端，我们都可以通过这种方式来满足不同输出设备和渠道的需求。通过对 Headless CMS 技术的探究和实践，我们也一定会对其有更深刻的理解和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d0eb1cb5eee0b5257efd3c