8

在 Adob​​e AEM（以前称为 CQ5）中，基础组件 parsys 的 design_dialog 允许用户设置“单元格填充”。在文本字段中输入的任何值都将显示在设计 css 中。

例如：

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

如果用户将 parsys 单元格填充配置为 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 请求的响应正文中。

4

2 回答 2

13

parsys 并没有真正注入样式，但是当您更改 parsys 组件的设计参数时，它们会存储设计页面，并且当设计类将其呈现为 css 并且输出包含这些更新时。

如何呈现设计 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 中查看此文件。我不确定该文件中的许可证是否允许我在此处发布一个片段，但您应该能够自己轻松找到它。

该类获取页面资源并将对象调整为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

查看您要实现的目标...... 您可以自定义设计页面的内容（这通常是通过向您正在使用的组件添加设计对话框）添加与该组件关联的任何属性/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将输出 css 为：5px solid red

.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

于 2013-03-28T23:55:03.210 回答
2

CSS 中的这种更改是在 parsys 中使用 Class IncludeOptions 完成的。如果您查看基础组件中的 parsys.jsp，您会遇到此类的用法。IncludeOptions 类的 getCssClassNames() 方法返回一组可修改的 css 类名称，以添加到 div 标记中。因此，每当为 parsys 编写 section 字段时，它都会包含在动态添加到组件的 CSS 中，然后资源会包含在页面中。

于 2013-03-26T16:44:25.807 回答