css - Adobe cq - 背景图片 / CSS

Question

例如，当我们通常通过类将背景图像添加到样式表中时，是否可以在 cq 中由作者指定图像，而 cq 本身可以修改 CSS 以添加类和背景图像规范。我猜另一种方法是让 sling 资源添加一个内联样式表。最好的方法是什么？

Answer 1

我在使用内联样式表修改 CRX(DE) 中的组件时做了类似的事情，以便他们的对话窗口有额外的字段供用户输入。我在图像组件中添加了一个字段，用于在单击时从 DAM 中选择目标图像作为目标。

您可以按照以下方式做一些事情：

组件属性

/yoursite/components/content/-yourcomponent-/dialog/items/bgImage (your component tree may vary slightly)

fieldLabel : String = Image to Link to
jcr:primaryType : Name = cq:Widget
name : String = ./bgImage
xtype : String = pathfield

将以下内容添加到 /yoursite/components/content/-yourcomponent-/yourcomponent.jsp

<%
String bgImage = properties.get("bgImage", "");
String cssStyle = "";
if (bgImage != null) {
  cssStyle = "background:url(" + bgImage + ") no-repeat;";
}
%>

<div style="<%= cssStyle %>">
  // Other output here
</div>

这是一个非常粗略的草稿，但您应该明白这一点。

更新：如果您希望在外部添加 CSS 类，并在代码中引用它们。但是，您仍然必须将用户选择的图像附加为内联或内部。

• 在 CRX(DE) 中，在您的开发/作者实例中展开 /etc/designs/-yoursite-/styles.css/files
• 相应地添加新的 CSS 文件，或将代码附加到现有文件
• 系统会将所有 CSS 文件合并为一个巨大的 styles.css 文件
• styles.css 由系统缓存，因此可能不会根据应用程序设置立即发生更改。

<div class="imageDiv" style="<%= cssStyle %>"> </div>