如何通过文档创作在 Adobe EDS 中创建特定/自定义元素？

Question

想知道如何创建自定义元素，例如

divider <hr class="sl-divider hr" aria-hidden="true">

或来自我尝试通过 Adobe 的 Experience Cloud - Edge Delivery Services 以及特别是文档创作为我的客户复制的网站 (Sunlife.ca) 的组件分隔线（例如，参见所附图片）；它利用 Google Drive/docs 创建组件块（与 AEM 不同）。

我尝试简单地在文档文件中添加行，例如通过形状等的文档插入选项。但它没有转换为预览版（我为此使用 AEM Sidekick chrome 扩展）。

说实话，我仍在学习 EDS，并且没有真正找到一种适当的方法来学习要遵循哪种文档创作步骤才能生成我想要制作的水平列、组件块、分隔线，以及什么不是。如果我可以在 EDS 上找到更多信息或好的资源，也请分享。

Answer 1

您将需要创建一个新块来插入您想要的标记。假设您将块称为分隔符 -

separator.js 看起来像 -

export default function decorate(block) {
  block.innerText = '';
  const separator = document.createElement('hr');
  block.appendChild(separator);
}

分隔符.css

/* seperator css */
.separator {
    padding: 1px 0;
}

中提供了许多针对不同类型区块的公开可用实现