协调CMS中的编辑经验和开发人员经验

可重复使用的组件非常适合构建强大的，有效的前端。同样强大的是无头内容管理，它将内容编辑与前端演示文稿分开。这允许灵活的内容结构和交付到任何耗尽任何API的前端。这种组合是Jamstack Architecture的基石。

但是，将基于组件的前端与无头CMS体验保持一致可能是具有挑战性的。虽然将它们连接起来并不是本质上的困难，但创建一个可重复使用的一致组件系统，该系统反映了CMS编辑器的经验需要仔细考虑。理想的场景是无缝的内容创建和可预测的组件结构。

桥接CMS和前端组件之间的差距

一个简单的按钮组件说明了这种复杂性。在React中，按钮可能to （链接目的地）和children （按钮文本）属性。对于内容编辑器，这些属性名称不太直观。

为了解决这个问题，我们探索了几种方法：

将CMS字段与组件属性匹配

将CMS字段（ to和children ）直接映射到组件属性通常会失败。编辑发现这些术语令人困惑。在CMS中，使用更具用户友好的标签（例如“标签”和“ URL”）可提高可用性，但与代码造成了不匹配。

掩盖属性

无头CMS通常允许标签字段与API名称不同。我们可以在CMS中使用“标签”和“ URL”，但是代码中的“儿童”和“ to”。但是，这增加了调试复杂性，掩盖了CMS标签和代码属性之间的关系。

修改组件属性

适应组件属性匹配CMS字段名称似乎很简单，但它可以限制灵活性并导致不一致。使用label和url可用于CMS数据，但是添加功能（例如图标）需要其他逻辑或属性，可能会破坏组件的设计。

变压器解决方案

最佳解决方案涉及分开编辑器和开发人员体验。为编辑器易用性和开发人员效率的代码库设计CMS。由于不太可能直接奇偶校验，因此我们介绍变形金刚。

变压器是实用程序，将CMS数据转换为前端组件容易消耗的格式，而不论框架如何。存在三种实施方法：

1。组件级变压器

将变压器与相应的组件一起放置。这将相关的文件放在一起。 index.js文件充当控制器，导入和导出组件及其变压器。变压器在渲染前修改属性。

对于我们的按钮：

 // index.js
从“反应”中导入反应；
从“ ./component”导入组件;
导入从“ ./transformer”转换；

const button =（props）=><component></component> ;

导出默认按钮；

 // Transformer.js
导出默认（输入）=>（{
  ...输入，
  儿童：输入。儿童|| input.label，
  到：输入。to|| input.url，
}）;

 // component.js
const button =（{children，to}）=> <a href="%7Bto%7D">{children}</a> ;

这种方法很简单，可以保持逻辑本地化，但可以导致许多文件。

2。流入渠道转换

在最初将其获取到应用程序中的位置转换数据。这减少了浏览器的工作量，改善了性能。但是，它显着提高了复杂性，尤其是在大型，复杂的数据结构中。测试变得更具挑战性。

3。专用转换引擎

创建一个单独的应用程序来处理所有转换。这是最复杂的，但可重复使用多个项目。它添加了开销，但提供了一个集中的，可维护的解决方案。

从组件级变压器开始，然后根据需要进行更复杂的方法。关键是为编辑和开发人员创造一种愉快而高效的体验。

以上是协调CMS中的编辑经验和开发人员经验的详细内容。更多信息请关注PHP中文网其他相关文章！