隆重推出 Payload——2021 年面向 JavaScript 开发者的 Node + React 无头 CMS

现代 JavaScript 开发者现在可以使用一款全新的无头 CMS——我们相信他们会非常喜欢使用它。Payload 是一款基于 Node、Express 和 React 的自托管无头 CMS，现已发布。

大家好，我是 James，Payload CMS的创始人之一。经过两年的开发和数千次的代码提交，我非常激动地宣布 Payload CMS 正式上线。我们推出这款产品是为了应对 JavaScript CMS 市场出人意料的匮乏，并希望它能改善全球工程师的开发工作流程。

Payload 已经过一系列试点项目的测试，这些项目涵盖了从视频游戏后端到完整的电子商务商店开发、虚拟活动平台等诸多领域。通过我们迄今为止使用 Payload 发布的项目，我们团队的效率得到了显著提升，我们相信未来只会越来越好。

现在，我们终于准备好向社区开放了。

如果您能安装 Payload 并试用一下，然后告诉我们您的想法，我们将不胜感激。我们欢迎任何类型的反馈——无论是关于我们文档编写方式的反馈，还是您在项目中使用 Payload 的体验反馈，或其他任何方面！

我们需要一个当时并不存在的内容管理系统（CMS）。

我们开发 Payload 的原因是，多年来，我和我的团队逐渐了解了我们需要怎样的内容管理系统 (CMS) 来为我们的客户构建项目——无论项目大小：

1. 自托管

如果你的托管 CMS 无法提供你所需的特定功能，导致你最终不得不自己搭建 REST 接口来实现，那该怎么办？看来你得自己维护服务器或 Lambda 函数了。明明一开始就可以使用自托管 CMS 并搭建服务器，现在却要这么做，简直太坑爹了。我们已经经历过太多次这样的情况了，绝不能让它再次发生。

对于简单的网站，如果您知道在应用程序的整个生命周期内都可以在其限制范围内工作，或者仅用于提供内容而无需担心接收内容，那么第三方托管的 CMS 可能适用。但是，当您的需求变得更加复杂时，能够为您提供完全控制权的自托管 CMS 才是最佳选择。

安全性也是第三方托管内容管理系统 (CMS) 的一个主要问题。我的数字设计公司 TRBL与许多高度重视安全性的客户合作，他们希望完全掌控自己的数据库和基础设施。许多客户将 CMS 部署在自己的私有网络中，只能通过 VPN 或类似方式访问。对于这些客户而言，掌控自己的代码至关重要，这也使得许多流行的第三方托管 CMS 被排除在外。

有效载荷完全由您自行托管。您可以随时控制一切。

请访问我们的文档了解如何安装 Payload 。

2. 可自定义的 React 管理面板

我们希望内容管理系统的管理面板简洁易懂，最重要的是，完全可定制。例如，如果我们需要自定义字段类型，应该能够用我们自己的 React 字段组件替换默认的文本输入框。我们也绝对不想遇到任何麻烦，比如处理混乱的 iFrame 或单独开发的字段类型包。

如果我们想要添加一个视图，应该能够构建一个 React 组件并将其添加为视图。如果我们想要自定义 CMS 的品牌形象，并完全将 CMS 列入白名单，也应该能够做到。

Payload 的管理面板美观、快速且功能丰富。最棒的是什么？您可以根据需要，在任何需要的地方替换自己的 React 组件，从而添加、覆盖或控制用户界面。

3. 基于块的字段编辑器

我和我的团队以组件化思维设计整个网站和应用程序——甚至细致到页面布局的构建方式。在用户体验设计阶段，我们会识别出构建页面布局所需的所有“模块”，然后设计内容管理系统 (CMS)，使内容编辑人员能够使用我们精心设计的布局模块自行构建页面布局。接下来，我们将 CMS 中的每个“模块”映射到 React 组件，这些组件的 props 与 CMS 模块中的字段一一对应。瞧，这就是基于组件的布局构建。

和许多人一样，我们几年前就开始使用 WordPress 和 Advanced Custom Fields (ACF)。ACF 的灵活内容字段类型非常适合布局构建。但遗憾的是，许多其他 CMS 完全缺乏任何布局构建工作流程，即使支持，其功能也十分有限，或者只是一个勉强拼凑的解决方案。

条件逻辑

我的团队一直认为 ACF 具备其他 CMS 完全缺失的一项功能是字段级条件逻辑（例如，如果另一个字段的值等于某个值，则显示该字段true）。我们理想的 CMS 需要内置一种机制，能够根据输入内容提供相应的动态界面。这样一个简单的功能就能让复杂的内容管理变得轻松许多。

有效负载包含极其高级的字段类型，包括数组、富文本字段，以及最重要的代码块。所有这些字段类型都支持基于函数的条件逻辑。

4. JavaScript 自上而下

你上一次参与一个没有 Node.js 的 Web 项目是什么时候package.json？即使你用 PHP，也难免会用到 Node.js。把整个技术栈简化成单一语言，而不用为了搭建本地 LAMP 环境而运行 Docker 容器，这想法确实很棒。我们希望简化技术栈，全部使用 JavaScript。最好是用 TypeScript。

有效载荷是用 TypeScript 编写的，并且从上到下都是 JS——Node、React、Express、MongoDB。

提示： Payload 在TypeScript项目中使用时功能尤为强大，但同样也适用于 JS 项目。它的配置是强类型的，因此您可以在 VSCode 等编辑器中获得强大的 TypeScript 智能提示。实际上，即使您在 JS 项目中使用 Payload，VSCode 仍然会在您编写配置时提供 TypeScript 智能提示。

5. 可重用、安全的身份验证

内容管理系统最棘手的问题之一在于，它们虽然承担了许多典型应用框架也需要完成的工作，但由于缺乏对可重用身份验证的支持，却远不能称得上是一个完整的应用框架。例如，如果你想构建一个完整的SaaS产品，你可能需要创建产品、用户、许可证、页面，甚至博客文章。任何普通的CMS系统或许都能让你在其系统内实现这些内容的CRUD操作，但用户身份验证呢？如何控制用户的访问权限？通常情况下，你只能自己想办法。最终，你往往要么从头开始构建自己的系统，要么拼凑出一个由多个独立系统（以及独立的管理界面）组成的网络来管理产品。

我们需要一个开箱即用、功能强大且可复用的身份验证系统的内容管理系统 (CMS)，这样我们就可以利用 CMS 实现所有常用的身份验证功能。通过这种方式，我们可以保持所有逻辑的有序性，并在我们已经习惯使用的 CMS 中构建功能齐全的应用程序。

这样一来，如果我们的客户最初只是想开发一个简单的应用程序或营销网站，但将来决定添加完整的电子商务功能，我们就不会最终为他们提供一套杂乱无章、彼此独立的后台管理界面来管理单一产品。所有这些都可以在 Payload 中完成。

有效载荷自带强大且可重用的身份验证功能。最棒的是，它做得非常出色，内置了仅限 HTTP 的 Cookie 和 CSRF 保护。

有效载荷的身份验证操作

除了登录和注销功能外，Payload 还具备功能齐全的应用程序在身份验证方面所需的一切功能：

• 自助注册
• 登录
• 注销
• 刷新令牌功能
• 忘记密码/重置密码
• 密码尝试失败次数达到 X 次后自动锁定帐户
• 创建新帐户时进行电子邮件验证

Payload 支持您所需的任意数量的身份验证集合——这意味着您可以轻松维护一个管理员集合和一个客户集合——每个集合都存储单独的信息，并对您的文档具有单独的访问控制。

有效载荷的访问控制

Payload 最棒的功能之一就是它基于功能的访问控制。您可以在配置中直接定义哪些用户可以访问哪些文档，只需使用极其简单直接的访问控制功能即可。

以下是一个具有精细访问控制的订单集合示例：

const Orders = {
  // ...
  access: {
    create: () => true, // Everyone can create
    read: ({ req: { user } }) => {
      if (user) {
        return { // Users can only read their own
          owner: { equals: user.id, },
        };
      }
      return false; // Not logged in? Can't read any
    },
    update: ({ req: { user } }) => {
      // Only Admins can update Orders
      if (user.roles.includes('admin')) return true;
      return false;
    },
    delete: () => false, // No one can delete
  },
};

6. 使用本地存储进行上传

其他现有的内容管理系统 (CMS) 也提供与第三方文件存储解决方案的集成，但这需要额外付费，并且需要维护一个第三方依赖项。我们希望能够将我们自己上传的文件存储在我们自己的环境中。如果要在本地上传后将其发送到 AWS S3 或类似服务，那也完全可以。但首先，这些文件应该是我们自己的。而且，上传过程应该简单易用。

Payload 提供完整的上传支持。它将文件存储在本地，并允许您为文件编写强大的访问控制功能。只想让特定人员下载 PDF 文件？没问题。

7. 基于代码

我们之前使用过一段时间的 ACF 图形用户界面 (GUI)，但后来意识到，如果将 ACF 配置直接存储在网站的 PHP 代码中，我们可以更加高效地进行管理。能够自己编写配置、理解代码，并且让它们间接地与我们的仓库进行同步，这种体验非常棒。将模式文件与代码紧密结合，使得引用它们变得容易得多。如今，我们觉得 GUI 模式设计器没什么用，只要语法足够简洁，我们更倾向于直接在代码中编写模式文件。

Payload 完全基于配置，而且配置编写起来极其简单。您可以充分利用 ES6，并将配置直接存储在代码仓库中。执行 `git pull`，即可获取您的 schema。

8. 维护你自己的 Express 服务器

我们想要一个抽象程度合适的CMS。这意味着它既要提供我们永远不需要更改的功能（例如身份验证和文件上传），又要让我们能够自由地完成所需操作，而不受那些文档晦涩难懂、面向计算机科学博士的大型框架的束缚。如果我们能够掌控自己的Express服务器，那么我们就可以在CMS之外，以任何我们需要的方式完成任何操作。此外，如果我们能够保留自己的Express服务器，我们还可以根据需要将CMS与NextJS之类的SSR框架结合使用。只需一条命令，即可同时启动NextJS和CMS。

有效负载使用你的 Express 服务器，而不是反过来。你可以随意使用它——包括使用同一台服务器运行 NextJS 前端。

以下示例展示了有效载荷如何与您现有的 Express 服务器集成：

const payload = require('payload');
const express = require('express');
const app = express();

// Do whatever you want with your app.
// Just pass it to Payload and everything
// will be scoped to Payload routers.

payload.init({
  secret: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
  mongoURL: 'mongodb://localhost/payload',
  express: app,
});

app.listen(process.env.PORT, () => {
  console.log(`Application listening on ${3000}...`);
});

9. 本地化支持

如果你曾经尝试过使用 WordPress 进行本地化内容，无论是通过多站点模式还是使用众多过时的插件，你都会明白这有多痛苦。如果没有，我给你一个建议：别这么做。如果你正在构建一个需要将内容翻译成多种语言的网站或应用，那就远离 WordPress。寻找一个本身就支持本地化的 CMS——如果本地化能够细化到字段级别，那就更好了。

有效载荷具备基于字段的本地化支持，可支持您需要的任何数量的语言环境。

--

Payload 将我们长期以来需要的所有功能打包到一个 CMS 中，并且做得非常出色。

--

你不需要学习你的内容管理系统（CMS）。

对我们来说，或许比上面列出的CMS要求更重要的是，我们认为您不应该被迫学习CMS系统。那只是暂时的，您真正应该学习的是您所使用的编程语言——那才是真正的长期投资。您应该学习编写您正在使用的编程语言。

在开发 Payload 的过程中，我们竭尽全力确保您上手使用 Payload 所需的学习量降至最低。这样，您就可以专注于学习或练习 JavaScript。我们的抽象层设计得尽可能简洁，让您能够理解自己编写的 CMS 的工作原理。

你不应该需要与你的内容管理系统（CMS）对抗。

你是否有过这样的感觉：在使用内容管理系统 (CMS) 时，它能在五分钟内提供你所需功能的 70%，但剩下的 30% 功能，你却要花上几周甚至几个月的时间与之斗争？

Payload 旨在解决这个问题。它极其重视开发者体验。我们力求只提供您真正需要的功能，不多不少。它是一个基于代码的内容管理系统 (CMS)。这意味着您需要编写自己的代码，而不是我们的。我们为您提供编写应用程序所需的结构和开放性，但不会对您的操作做任何限制。

--

一行即可快速上手

入门非常简单，而且完全免费。只需打开一个新的终端窗口，然后运行以下命令：

npx create-payload-app

请查看我们的文档

请查阅我们的文档，了解有关有效载荷的工作原理和使用方法的更多信息。

请告诉我们您的想法

欢迎在推特上联系我们，分享您的看法。

谢谢你！

我们真心希望 Payload 能成为最好的 JavaScript CMS，我们也期待继续努力实现这一目标。

https://payloadcms.com