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);
    }