在Adobe AEM中，parsys组件如何将样式注入到设计CSS文件中？ [英] In Adobe AEM, how does the parsys component inject styles into the design css file?
问题描述
在Adobe AEM（以前为CQ5）中，基础组件parsys的design_dialog允许用户设置单元填充。
In Adobe AEM ( formerly CQ5 ) the foundation component parsys' design_dialog allows the user to set the "Cell Padding". Whatever value is entered into the text field will show up in the design css.
例如：
给定文本。当前页面正在使用/ etc / designs / my-design，页面输出将包含对/etc/designs/my-design.css样式表虚拟路径的引用。
Given that the current page is using /etc/designs/my-design the page output will include reference to the /etc/designs/my-design.css stylesheet virtual path.
如果用户将parsys单元格填充设置为30px，则my-design.css文件将包含以下内容：
If the user configured the parsys cell padding to be 30px then the my-design.css file will include the following:
.page_full .par div.section {
padding: 30px;
}
字符串 30px存储在jcr中：content / page / par / section属性称为div.padding，但是，我不知道parsys.jsp如何将其注入到my-design.css中。
The string "30px" is stored in the jcr:content/page/par/section attribute called div.padding, however, I can't figure out how the parsys.jsp injects it into the my-design.css.
编辑：
要清楚一点，基础页面headlibs.jsp中的 currentDesign.writeCssIncludes（pageContext）; 调用是设置设计的代码css这样包含：
To be clear, the currentDesign.writeCssIncludes(pageContext); call in the foundation page headlibs.jsp is the code that sets up the design css includes like so:
<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 < /em/designs/my-design.css请求中的/ em>。
However, it is not clear how to get your own CSS included in the response body of the /etc/designs/my-design.css request.
推荐答案
parsys并不是真正的注入样式，但是当您更改parsys组件的设计参数时，这些样式将存储在设计页面中，并且由Design类将其呈现为css并且输出包含这些更新。
The parsys doesn't really inject the styles, but when you change the design parameters for the parsys component in they are stored the design page and when this is rendered as css by a Design class and the output is contains those updates.
设计信息存储在 / etc / designs /您注意到的我的设计。此页面的此组件支持对所包含信息的CSS表示。
The design information is stored in the /etc/designs/my-design as you noticed. This component for this page supports a css rendition of the information contained.
您可以使用产品中包含的CQ开发工具来跟踪演绎的来源...
You can track the source of the rendition using the CQ development tools included in the product...
如果您在crx / de或crx / explorer中查看设计页面，您会注意到它的sling：resourceType为 wcm / core / components / designer 。
If you take a look at your design page in crx/de or crx/explorer, you'll notice it has sling:resourceType of wcm/core/components/designer.
这将由以下Java类 /libs/wcm/core/components/designer/designer.css.java 。您也可以在crx / de中查看此文件。我不确定该文件中的许可证是否允许我在此处发布摘要，但是您应该可以自己轻松地找到它。
That will be rendered by the following java class /libs/wcm/core/components/designer/designer.css.java. You can take a look at this file in crx/de also. I'm not sure the license in that file would allow me to post a snippet here, but you should be able to find it easily yourself.
该类占用了该页面资源并使其适应 com.day.cq.wcm.api.designer.Design 实例。
The class takes the page Resource and adapts the object to a com.day.cq.wcm.api.designer.Design instance.
在网络控制台中查看依赖项查找器，Design类由cq-wcm-api捆绑包提供。
Looking at the dependency finder in the web console, the Design class is provided by the 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捆绑在一起。
This is provided by the jar: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar, which is bundled with CQ.
查看您要实现的目标...
，您可以自定义设计页面的内容（通常可以通过添加一个设计对话框，然后添加与该组件关联的任何属性/ css属性。
Looking at what you are trying to achieve... you are able to customise the content of the design page (this is normally by adding a design dialog to the component you are working with) adding any properties/css attributes associated with that component.
例如，请查看geometrixx中的徽标组件设计（ / etc / designs / geometrixx / jcr：content / contentpage / logo ）。该属性已经具有 div img.margin 属性，该属性转换为
For an example of this take a look at logo component within the geometrixx design (/etc/designs/geometrixx/jcr:content/contentpage/logo). This already has a div img.margin property which translates to
.contentpage div.logo img {
margin: 1px;
}
在输出CSS中（ / etc / designs / geometrixx.css？cacheKiller = xyz ）。
添加名为 div img.border 5px纯红色的c>将以如下方式输出css：
Adding a property named div img.border with a value of 5px solid red to this node will output css as:
.contentpage div.logo img {
margin: 1px;
border: 5px solid red;
}
考虑您的示例，您的设计内容节点位于 / etc / designs / my-design 应该看起来像这样：
Considering your example, your design content node at /etc/designs/my-design should look something like this:
+jcr:content
+ page_full
+ par
+ section
- div .margin = 30px
或采用存储库XML格式，例如：
Or in the repository XML format, like this:
<?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>
设计对话框（应用于自定义设计内容）。 href = http://dev.day.com/docs/en/cq/current/developing/components.html rel = noreferrer>开发组件页面。您可以在 /libs/foundation/components/logo/design_dialog.html
Design dialogs (which should be used to customise design content) are described to some extent on the Developing Components page. You can find the design dialog (for an example) of the logo component mentioned above at /libs/foundation/components/logo/design_dialog.html
这篇关于在Adobe AEM中，parsys组件如何将样式注入到设计CSS文件中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
