AEM-将单独的样式应用于组件的创作视图和发布视图

编程问答 2022-06-07

问题描述

我正在使用Adobe Experience Manager，我需要将单独的样式应用于组件的创作视图和发布视图。原因是我有一些JS会以桌面大小更改组件的布局，但是在创作模式下，这意味着该组件不再可用或完全可见。

到目前为止，我有：

  • 在Adobe论坛中寻找类似问题

  • 试图根据编辑模式为true的条件在html文件中添加一些样式：

     <sly data-sly-test.author="${wcmmode.edit}"><style><!--my code--></style></sly>

解决方法

代替基于编辑模式编写内联样式，更好的方法是定义一个单独的客户端库，并仅以编辑模式在页面上添加该客户端库。假设您有一个组件-“ Custom Component”，其类为-“ custom-comp”。

<div class="custom-component">
    <!-- your custom component html code goes here -->
</div>

所以我假设您已经在项目客户端库中为此组件定义了一些CSS，这些CSS应该已经在您的页面上加载了。要在作者模式下设置不同的样式，您可以尝试执行以下步骤-

  1. 在page.html中，定义一个特殊的类，该类将标识您的页面是在Author还是Publish中加载。如下所示-

  2. 使用上面的代码行，您的页面现在将具有一个特殊的类-仅当您在Author中打开页面时才具有“ authoring-mode”。但是，当您在发布中打开页面时，该类将不会出现，而这正是您想要的。

  3. 现在，您需要在代码中定义一个包含CSS和JS文件的新客户端库，并且需要将此新客户端库加载到customheaderlibs中。同样，该客户端库仅需要以作者模式添加。

  4. 使用两个类名“ authoring-mode”和组件类名“ custom-component”的组合为自定义组件编写自定义CSS规则。

  5. 在作者模式和发布模式下测试您的更改。

adobeaemcontent-management-system