Question

如何在AEM6 Sightly组件的包装装饰标签上动态设置CSS类？

我无法在组件上设置此CSS类，因为它取决于组件的实例，并且我无法在资源上设置它，因为资源可以在多个页面上呈现，并且CSS类根据不同而不同它在哪个页面。

我在JavaScript Use-API中尝试了以下3种技术但没有成功：

componentContext.getCssClassNames().add('test-class-1');
component.getHtmlTagAttributes().set('class', 'test-class-2');//throws an exception
currentNode.setProperty('cq:cssClass', 'test-class-3');

Answer 1

装饰标记在实际呈现组件之前由过滤器（即WCMComponentFilter）添加，因此无法在组件代码中更改它。为了使用某些逻辑在此装饰器上动态设置CSS类，您需要创建一个自定义过滤器，该过滤器将在WCMComponentFilter之前运行，并为IncludeOptions属性设置适当的属性。

关注过滤器会将my-class添加到/content/geometrixx/en下的所有轮播组件。

@SlingFilter(scope = SlingFilterScope.COMPONENT, order = -300)
public class DecoratorFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        boolean addClass = false;
        if (request instanceof SlingHttpServletRequest) {
            final SlingHttpServletRequest slingRequest = (SlingHttpServletRequest) request;
            final Resource resource = slingRequest.getResource();
            final String resourceType = resource.getResourceType();
            final String resourcePath = resource.getPath();

            // put any custom logic here, eg.:
            addClass = "foundation/components/carousel".equals(resourceType)
                    && resourcePath.startsWith("/content/geometrixx/en");
        }
        if (addClass) {
            final IncludeOptions options = IncludeOptions.getOptions(request, true);
            options.getCssClassNames().add("my-class");
        }
        chain.doFilter(request, response);
    }

Answer 2

正确的方法是使用 cq：htmlTag 。在组件下创建名为cq:htmlTag

的非结构化节点

为它添加一个属性＆＃34; class＆＃34;类型＆＃34;字符串＆＃34;而价值是＆＃34; myclass＆＃34;要添加到组件的包装器/装饰器div的类。

参考链接：

1）Wrapper Div Manipulation

2）Best link to understand this

AEM / CQ：装饰标签上的条件CSS类

2 个答案: