- 原文地址：Remaking WordPress in JS stack. Hello to a new CMS for Next.js websites
- 原文作者：Andrew
- 译文出自：掘金翻译计划
使用Next.js重写的全新WordPress（Remaking WordPress in JS stack. Hello to a new CMS for Next.js websites.）
动机
Jamstack 出来已经有一段时间了。对于我们大多数人（开发人员）来说，静态预渲染的 React 网站并不奇怪：浏览器中的页面路由、“极快”（他们通常称之为）体验等。尝试一下 Gatsby 或 Next.js，你就会有这样的体验。如果您是一名 Web 开发人员，您知道React，并且可能知道如何使用它。但是对于许多普通人来说，它看起来仍然像是他们可以不用的高级产品。
78.9% 的网站仍然使用 PHP。很多网站都很老了，且现在开发人员选择PHP的频率不高了。但对于 WordPress (39.6%) 来说，这个数字一直在增长。输入谷歌“电子商务CMS”，你会得到一些关于消除对开发人员依赖的建议。
与此同时，许多现代 Node.js CMS 走另一条路，Headless模式（通过API进行内容管理和内容交付）。如果您想要前端，请准备好聘请开发人员。哦，这会让你产生额外花销。 或者，如果您的 Node.js CMS 不仅仅是Headless模式，那么我应该在哪里单击以安装插件？好吧，他们中很多不支持此类插件。
但是很多非编程人员想要一个独立的平台，他们可以自己简单地管理和定制。这是使 WordPress 仍然如此受欢迎的主要原因之一。否则，每个人都会聘请开发人员来制作一个超级快速和酷炫的网站。
尽管Node.js、全栈Javascript/Typescript、SPA等都有优势，但人们仍然停留在LAMP栈上。并不是因为它是最好的，我们可以将许多问题归咎于它。在我读过的一篇文章中，作者比较了 Wordpress 和 Ghost CMS。他指责Wordpress速度慢，不安全，因为它有插件，因为Ghost CMS没有插件，而比前者好。但我不认为缺少潜在有用的功能是一种优势。 如果仅仅是存在插件功能是问题的，那么这个问题一定是出在CMS的核心设计上，而不是出在插件上。另一方面，如果 CMS 不支持扩展，那么 CMS 的核心设计也有问题，在我看来，这个 CMS 不会是走得很远。
现在有一个可以涵盖所有现代前沿技术的WordPress 解决方案。React静态预渲染用于前端、成熟和可维护的后端（例如 Nest.js 和 TypeORM）。 GraphQL API 在 CMS 开发中大放异彩，最终用户可以在其中构建任何类型的前端。 但是我找不到WordPress提供的那种通用性、可扩展性、强大的插件和强大的GUI。这就是我过去两年大部分空闲时间都在做一个业余项目的原因。
今天我决定开源一个项目，向大家介绍一下：Cromwell CMS。您可以在以下位置找到一些示例网站：cromwellcms.com/docs/overvi… CMS 是免费和开源的，你可以查看代码或给一个star github.com/CromwellCMS…
核心设计
Node.js 环境非常方便地进入了一个包系统。一切都是一个包。可以通过简单的 npm 命令安装并下载到平面 node_modules 结构中。 遵循传统，Cromwell CMS 是一组可以独立安装和启动的软件包和服务。它继承了微服务架构的优点，只需运行一个 npm 或 yarn 命令就可以更轻松地更新 CMS。 我也可以将其称为无头 CMS，因为可以使用任何自定义前端运行 API 服务器。
所以有4个主要服务：
- API 服务器服务。 API server 是用 Nest.js 和 TypeGraphQL 编写的，REST API 用于事务，GraphQL 用于数据流。这两种类型的 API 都可以通过插件扩展（关于它下面）。
- 前端服务（Next.js）。基本上，它是一个自定义的 Next.js 服务器。
- 管理面板服务。提供管理面板的文件。
- 管理服务。此服务根据用户 GUI 输入启动、监视和重新启动其他服务。例如，在 WordPress 中更改主题更容易，但是对于 Next.js，我们必须使用另一个应用程序构建重新启动服务器。嗯，作为生产生命周期的一部分重启服务器并不常见，但在我的测试中它非常稳定，我相信可以通过适当的处理来工作。
主题引擎
所有主题都是 npm 包。只需在 package.json 中安装一个具有特定属性的包，CMS 就会识别它并在管理面板中显示一个主题。然后用户可以选择一个主题，CMS 将从 node_modules 中的主题包中获取准备好的应用程序构建，将其放置在工作前端目录中并重新启动 Next.js 服务器。
虽然通过 npm 安装对开发人员来说很方便，但听起来并不友好。所以我决定更进一步，在管理面板中实现了用于包管理的 GUI。当用户去进入主题或插件市场（在管理面板 GUI 中，与 WordPress 中的“添加新插件”相同）并单击“安装”，CMS 在内部运行 yarn 命令以添加包。删除/卸载时也会发生类似的情况。
然后每个主题都可以在管理面板拖放主题编辑器（某种网站构建器）中高度可定制。用户可以移动块、更改文本、图像、添加插件等。React 使我们能够提供开箱即用的此类系统。
我正在尝试结合两全其美：在 React 中正确编程的前端和在普通网站构建器的 GUI 中的强大功能。好吧，Cromwell CMS builder 还没有像众所周知的解决方案那样强大，但我的目标是让它如此。重要的是它遵循代码优先的方法，这是我认为构建网站的正确方法。没有在故障网站构建器中从头开始制作的残缺布局（实际上在 Cromwell CMS 中也是可能的，但你不会那样做）。 无论如何，几乎每个人在开始使用任何 CMS 时都会选择一个现成的主题。
至于开发主题，您可以制作任何 Next.js 应用程序，只需使用 Cromwell CLI 构建它，该 CLI 自定义 Next.js 构建过程以使您的应用程序与 CMS 兼容。还有一些建议像遵循 Next.js 静态优化实践，所以在运行时 Next.js 将使用 增量静态再生使您的网站像任何其他 JAM 堆栈网站一样快速运行。在用户安装主题后，将在构建时重新生成技术上预渲染的页面，但它接近 JAM 堆栈工作流，并且可供所有人使用。
插件
插件是可以导出扩展或订阅操作的包（与 Wordpress 中的钩子相同）。插件使您能够使用最好的（或至少是最好的）框架构建您的应用程序。 您可以导出自定义 Nest.js 控制器、TypeGraphQL 解析器、TypeORM 实体等。由于 REST 和 GraphQL API 作为插件作者都是可扩展的，因此您可以选择最适合您的应用程序的内容。 在前端，您可以为管理面板或主题前端注册小部件（用户必须将您的插件放置在主题编辑器中）。 请参阅 我们的指南了解更多信息。 插件可以安装在管理面板中，所有扩展都将自动应用，无需任何手动 CLI 命令。
##您的客户得到什么
- 由于 React 和 Next.js 静态预渲染页面的强大功能，超快的前端体验。
- 在线商店和博客平台。除了提供最前沿的技术外，它还必须具有不错的管理面板体验，不比众所周知的 CMS 差。基于 Editor.js 的现代块式文本编辑器
- 免费的全功能在线商店和博客主题。免费插件。那个，我会添加更多。用户可以简单地从任何其他 CMS 转向免费开始尝试或使用 Cromwell CMS。对我来说，这是一个我非常喜欢把空闲时间投入其中的副项目，它不会改变。免费添加的所有内容将永远免费。
- 易于安装和使用的主题和插件。在管理面板 GUI 中一切正常。网站建设者。
- 正如前面几点所得出的结论 - 无需 Web 开发人员即可存在的诱人能力。
- SEO友好。每个页面都有静态预渲染的 HTML。 CMS 允许编辑 SEO 元标记，提供自动生成的站点地图和 robots.txt。
- 移民。将您的数据从其他 CMS 导出到 Excel 文件并导入。
- 电子邮件、付款和其他集成。
综上所述
通常选择 WordPress 是因为它的插件和主题丰富。我无法复制它。但我可以尝试创造一个环境，接下来取决于社区。我们可以一起创造一个伟大的生态系统。越来越多的人在使用它，更多的人会使用它。诸如此类的事情可以改变网络。
我并不是说我的系统比 WordPress 好（因为我还没有在它上花费十几年的时间），但我正在努力解决问题并提供一个在很多方面都可以做得更好的解决方案。 现在，我正在寻求有关如何改进它的反馈。而且该项目是开源的，任何人都可以尝试。归根结底，这一切都取决于社区。我们多久会在后端开发中采用一种新的最受欢迎的语言？有一天，Node.js 会为 78.9% 的互联网提供动力吗？）
