在AEM 6.2的Sightly中，样式元素内的运行时变量未解析

Question

我试图通过创建一个变量来为div提供背景图像。

我正在仔细阅读属性，将其提供给样式标签时，它不起作用。

这是HTML

<sly data-sly-test.fileReference="${properties.title}" />

<div style="background: url(${fileReference}); background-position: center top;">
<p>${properties.title}</p>

呈现页面后，这就是我所看到的

<div style="background: url(); background-position: center top;">
<p>my Title</p></div>

这意味着${properties.title}内部<p>标签被接受，但不适用于内部样式元素。

Answer 1

可以很好地解析变量。您的url()值为空的原因是因为您没有使用正确的Display Context。另外，您传递给它的值string "my Title"既不是有效的URL（您需要打印的内容），也不是有效的样式标记（通常是在style属性中呈现的内容）

您会注意到，以下每个表达式都呈现一个空url()值：

<div style="background: url(${'cookies'});"></div>
<div style="background: url(${'cookies with chocolate chips'});"></div>

<!--/* both print background: url();*/-->

如果我们强制显示上下文允许任何字符串，则将打印该值

<div style="background: url(${'cookies' @ context='unsafe'});">
</div>
<!--/* prints background: url(cookies);*/-->

在script和style上下文中，HTL 要求显式声明显示上下文。如果不是，则不呈现输出。

您要输出以显示背景图像的是图像的URL。让我们尝试使其明确：

<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');">
</div>
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/-->

在那里，就成功了！

现在，建议您避免使用内联样式。通过显示上下文，您可以避免类似的问题，并且如果CSS是客户端库的一部分，则CSS会更易于维护。