在Adobe AEM中,parsys组件如何将样式注入到设计css文件中？

Question

在Adobe AEM(以前称为CQ5)中,基础组件parsys的design_dialog允许用户设置"Cell Padding".无论在文本字段中输入什么值,都会显示在设计css中.

例如:

鉴于当前页面正在使用/ etc/designs/my-design,页面输出将包含对/etc/designs/my-design.css样式表虚拟路径的引用.

如果用户将parsys cell padding配置为30px,那么my-design.css文件将包含以下内容:

.page_full .par div.section {
  padding: 30px;
}

字符串"30px"存储在名为div.padding的jcr:content/page/par/section属性中,但是,我无法弄清楚parsys.jsp如何将其注入my-design.css.

编辑: 要清楚,currentDesign.writeCssIncludes(pageContext);基础页面headlibs.jsp中的调用是设置css包含的代码,如下所示:

<link href="/etc/designs/my-design/static.css" rel="stylesheet" type="text/css"/>
<link href="/etc/designs/my-design.css" rel="stylesheet" type="text/css"/>

但是,目前尚不清楚如何将自己的CSS包含在/etc/designs/my-design.css请求的响应主体中.

Answer 1

解析器并不真正注入样式,但是当您更改parsys组件的设计参数时,它们会存储在设计页面中,当它由Design类呈现为css且输出包含这些更新时.

如何呈现设计CSS

设计信息存储在/etc/designs/my-design您注意到的内容中.此页面的此组件支持包含的信息的css再现.

您可以使用产品中包含的CQ开发工具跟踪演绎的来源......

如果你看一下crx/de或crx/explorer中的设计页面,你会发现它有sling:resourceType of wcm/core/components/designer.

这将由以下java类呈现/libs/wcm/core/components/designer/designer.css.java.您也可以在crx/de中查看此文件.我不确定该文件中的许可证是否允许我在此处发布一个代码段,但您应该可以自己轻松找到它.

该类获取页面Resource并将对象调整为com.day.cq.wcm.api.designer.Design实例.

查看Web控制台中的依赖项查找器,Design类由cq-wcm-api bundle提供.

<dependency>
  <groupId>com.day.cq.wcm</groupId>
  <artifactId>cq-wcm-api</artifactId>
  <version>5.5.0</version>
  <scope>provided</scope>
</dependency>

这是由jar /libs/wcm/core/install/cq-wcm-api-5.5.0.jar捆绑提供的,它与CQ捆绑在一起.

自定义设计CSS

查看您要实现的目标... 您可以自定义设计页面的内容(通常通过向正在使用的组件添加设计对话框)添加与该组件关联的任何属性/ css属性.

有关此示例,请查看geometrixx设计中的徽标组件(/etc/designs/geometrixx/jcr:content/contentpage/logo).这已经有一个div img.margin转换为的属性

.contentpage div.logo img {
  margin: 1px;
}

在输出css(/etc/designs/geometrixx.css?cacheKiller=xyz)中.

向该节点添加名为div img.bordervalue的属性5px solid red将输出css:

.contentpage div.logo img {
  margin: 1px;
  border: 5px solid red;
}

考虑到您的示例,您的设计内容节点/etc/designs/my-design应该如下所示:

+jcr:content
  + page_full
    + par
      + section
        - div .margin = 30px

或者在存储库XML格式中,如下所示:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:lastModified="{Date}2013-01-13T17:22:51.339+01:00"
        cq:lastModifiedBy="admin"
        cq:template="/libs/wcm/core/templates/designpage"
        jcr:primaryType="cq:PageContent"
        jcr:title="design"
        sling:resourceType="wcm/core/components/designer">
        <page_full jcr:primaryType="nt:unstructured">
            <par jcr:primaryType="nt:unstructured">
                <section
                    jcr:primaryType="nt:unstructured"
                    div_x0020_.margin="30px"/>
            </par>
        </page_full>
    </jcr:content>
</jcr:root>

设计对话框(应该用于自定义设计内容)在" 开发组件"页面上有一定程度的描述.您可以在上面找到上面提到的徽标组件的设计对话框(例如)/libs/foundation/components/logo/design_dialog.html