AEM

Question

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

到目前为止我有：

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

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

Answer 1

与其根据编辑模式编写内联样式，更好的方法是定义一个单独的客户端库，并仅在编辑模式下将该客户端库添加到您的页面上。比方说，您有一个组件 - “自定义组件”，其中 class 为 - “custom-comp”。

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

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

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

< body class="${wcmmode.edit || wcmmode.design ? 'authoring-mode' : ''}">
使用上面的代码行，您的页面现在将有一个特殊的 class - "authoring-mode" 只有当您在 Author 中打开页面时。但是当你在 publish 中打开页面时，这个 class 不会出现，这正是你想要的。
现在，您需要在您的代码中定义一个新的客户端库，它将包含 CSS 和 JS 文件，并且您需要在您的 customheaderlibs 中加载这个新的客户端库。同样，此客户端库仅需要在作者模式下添加。
使用两个 class 名称的组合为您的自定义组件编写自定义 CSS 规则 - “authoring-mode” 和组件 class 名称 - “custom-component”。
在作者模式和发布模式中测试您的更改。

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