简介
@rrpm/netlify-cms-backend-github 是一个用于将 Netlify CMS 与 Github 后端进行连接的 npm 包。它可以帮助我们快速的搭建一个可视化编辑的 CMS 系统，并将数据保存在 Github 后端。
在本文中，我们将介绍如何使用 @rrpm/netlify-cms-backend-github 包，在 Github 后端上搭建一个可视化编辑的 CMS。你将学到如何配置和使用 @rrpm/netlify-cms-backend-github 包，以及如何将它与 Github 后端进行连接。
准备工作
在使用 @rrpm/netlify-cms-backend-github 前，我们需要提前准备好以下几个内容：
- Github 账号，并创建一个空的仓库（例如：
my-cms）。 - 一个可编辑的静态站点，可以使用
create-react-app创建一个新的 React 应用。
安装和配置
安装
使用 npm 安装 @rrpm/netlify-cms-backend-github：
npm install @rrpm/netlify-cms-backend-github --save
配置
在 React 应用中，我们需要在 index.js 文件中引入 @rrpm/netlify-cms-backend-github 包，并进行基本的配置：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------ --- ---- ----------------------------------- ---------- -------- - ----- --------- ----- ------------------------- ------- --------- -- --- -------------------- --- ---------------------------------
backend.name 参数为 github，表示我们要使用 Github 作为后端存储数据。
backend.repo 参数为 github-username/my-cms，其中 github-username 是你的 Github 用户名，my-cms 是你创建的 Github 仓库名称。通过这个参数，我们将编辑的内容存储在 my-cms 仓库中。
backend.branch 参数为 Github 仓库的分支名称，通常情况下为 master。
我们还需要在 public/index.html 文件中引入 Netlify CMS 的 CSS 和 JS 文件：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ----- --------------- ---------------------------- ------------------ -- --------- ----------- ----- ---------------- ------------------------------------------------------------ -- ------- ------ ---- ---------------- ------- -------------------------------------------------------------------- ------- -------
使用
在 React 组件中，我们需要使用 Netlify CMS 的 React 组件，并在需要编辑的组件中添加 withRoute 方法：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ --- ---- ----------------------------------- ----- ---- ------- --------------- - -------- - ------ - ----- ------------- ------- -- --- ---- --------- ------ -- - - ------ ------- -----------------------------------------------
在组件中，我们通过 withRoute 方法将路由信息注入到组件中。然后使用 CMS.getWidgetLoader 方法，来添加编辑器组件。在上面的例子中，我们添加了一个 string 类型的编辑器组件。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ --- ---- ----------------------------------- ----- ---- ------- --------------- - -------- - ------ - ----- ------------- ------- -- --- ---- --------- ------ -- - - ------ ------- ----------------------------------------------- ----- --- - -- -- - ------ ----- --- -- ------ ------- ---- ---------- -------- - ----- --------- ----- ------------------------- ------- --------- -- ---
总结
通过本文的介绍，我们学习了如何使用 @rrpm/netlify-cms-backend-github 包，将 Netlify CMS 与 Github 后端进行连接。这个过程中，我们需要进行包的安装和基本配置，并在 React 组件中使用 Netlify CMS 组件进行编辑器的添加。
在实际的开发过程中，我们可以根据自己的需求，使用不同的编辑器组件来满足不同的需求。同时，我们也需要对 Github 后端进行一些基本的权限和配置控制，以保证数据的安全性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efe4c49986ca68d8b38