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>

Adobe cq - 背景图片/ CSS

1 个答案: