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

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的非结构化节点

添加一个属性" class“，类型为"String”，值为"myclass“，即您想要添加到组件的包装器/装饰器div中的类。

参考链接：

1) Wrapper Div Manipulation

2) Best link to understand this