在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。
修改
要明确的是,基础页面headlibs.jsp中的currentDesign.writeCssIncludes(pageContext);
调用是设置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请求的响应主体中。
答案 0 :(得分:13)
parsys并不真正注入样式,但是当您更改parsys组件的设计参数时,它们会存储在设计页面中,当它由Design类呈现为css时输出包含那些更新。
设计信息存储在您注意到的/etc/designs/my-design
中。此页面的此组件支持包含的信息的css再现。
您可以使用产品中包含的CQ开发工具跟踪演绎的来源......
如果您查看crx / de或crx / explorer中的设计页面,您会发现它具有sling:resourceType 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包提供。
<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属性。
有关此示例,请查看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.border
的名为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>
设计对话框(应该用于自定义设计内容)在Developing Components页面上有所描述。您可以在/libs/foundation/components/logo/design_dialog.html
答案 1 :(得分:2)
CSS中的这种更改是使用类IncludeOptions在parsys中完成的。如果你看一下基础组件中的parsys.jsp,你会遇到这个类的用法。 IncludeOptions类的方法getCssClassNames()返回一组可修改的css类名称,以添加到div标记中。 因此,每当为一个parsys创作section字段时,它就会包含在动态添加到组件的CSS中,然后资源就会包含在页面中。