介绍
Headless CMS 是一种新型的 CMS 架构，相比于传统的 CMS，Headless CMS 将前端和后端彻底分离，让前端开发者专注于页面和 UI 的设计和开发，而后端开发者则只需要关注内容和数据的管理和存储。
本文将会向您介绍如何使用 Bedrock 和 Roots.io 这两个优秀的工具来构建一个 Headless CMS。
Bedrock
Bedrock 是一个 WordPress 开发的开发环境，它完全遵循现代化的开发标准，并且支持 Composer 和 WPackagist，同时还集成了若干个常用的插件和工具。
在使用 Bedrock 构建 Headless CMS 之前，我们需要先了解一些 Bedrock 的特性和基本操作。
安装
通过 Composer 安装 Bedrock：
composer create-project roots/bedrock
特性
Bedrock 提供了许多方便的特性，包括：
- 安装 Composer 插件
- 将 WordPress 核心文件移动至 /web/ 目录下
- 从 .env 文件中获取环境变量
- 把必要的单元测试和 PHPUnit 配置文件打包进来
Roots.io
Roots.io 是一个基于 Bedrock 的现代化 WordPress 开发套件，它包含若干个开发工具和框架，可以方便地进行前端和后端的开发和协作。
在使用 Roots.io 构建 Headless CMS 之前，我们需要先了解一些 Roots.io 的特性和基本操作。
安装
在 Bedrock 目录下执行以下命令安装 Trellis 和 Sage：
git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git git clone --depth=1 git@github.com:roots/sage.git web/app/themes/sage && rm -rf web/app/themes/sage/.git
特性
Roots.io 提供了许多方便的特性，包括：
- Trellis，一个基于 Ansible 的 WordPress 管理和部署工具
- Sage，一个现代化的 WordPress 主题开发框架，支持 Bootstrap 和 Blade 模板引擎
构建 Headless CMS
结合 Bedrock 和 Roots.io 构建 Headless CMS 需要以下步骤：
- 通过 Bedrock 安装 WordPress
- 通过 Roots.io 安装 Trellis 和 Sage
- 配置 Trellis，使其支持访问 API 接口
- 在 Sage 中编写前端页面并支持 REST API
安装 WordPress
通过 Bedrock 安装 WordPress：
composer create-project roots/bedrock
然后按照一般的 WordPress 安装流程进行安装。
安装 Trellis 和 Sage
在 Bedrock 目录下执行以下命令安装 Trellis 和 Sage：
git clone --depth=1 git@github.com:roots/trellis.git && rm -rf trellis/.git git clone --depth=1 git@github.com:roots/sage.git web/app/themes/sage && rm -rf web/app/themes/sage/.git
然后执行以下命令更新 Sage 的依赖：
cd web/app/themes/sage npm install --global yarn yarn
配置 Trellis
在 trellis/group_vars/development/wordpress_sites.yml 配置文件中添加以下代码：
wordpress_sites:
example.com:
# ...
env:
wpapi: true然后执行以下命令进行部署：
ansible-playbook server.yml -e env=development
编写前端页面
在 Sage 中，我们需要使用 Underscores 预设来快速创建一个主题骨架。
首先，在 WordPress 后台中安装并启用 Sage 主题。
然后，在主题目录下执行以下命令：
composer install yarn yarn build
最后，在 resources/views/index.blade.php 中编写你的主题页面：
-- -------------------- ---- -------
-----------------------
-------------------
---- ------------------
------ ----- -------- --- ---------
---- ------------
--------------- -- ------
---- -----------------
------ ---------------------- -------
----- ------------------------ ------
-- -------- ----------- -------- --------
------
-----------
------
------
-----------然后，在 Sage 的 functions.php 文件中添加以下代码获取 REST API 中的文章：
-- -------------------- ---- -------
-------- ----------------------- -
--------- - --------------------------------------------------------
------ - ------------------------------------------------
------ -
------- -- -------
--
-
------------------ ---------- -
-- ----------------- -
--------------------------------------------------- -------------------------
-
---最后，在 Sage 的 resources/views/layouts/app.blade.php 文件中添加以下代码支持 REST API：
-- -------------------- ---- -------
--------- -----
----- --- ------------------------- ----
-------------------------
----- ---- ------------ --------
---- -------- --------------- ----------- -----------
---- ----------------
-----------------
------
------
--------------------- -- ------ --- --------------
------- ---------------------- ----------------------------------------------------
------
---- ----------- -------
-------
-------总结
通过结合 Bedrock 和 Roots.io 这两个优秀的工具，我们可以方便地构建 Headless CMS，让前端和后端的开发和协作更加高效和便捷。如果你是一名前端开发者或者 WordPress 后端开发者，不妨尝试一下使用 Bedrock 和 Roots.io 来构建你的 Headless CMS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648fc70f48841e9894deed89