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

Question

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

我正在用 sightly 读取一个属性，当我将它提供给样式标签时，它不起作用。

这是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 .此外，您传递到那里的值字符串 "my Title" 不是有效的 URL(您需要打印的内容)或有效的样式标记(通常在 中呈现的内容) code>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 requires the display context to be stated explicitly .如果不是，则不会呈现输出。

要显示背景图像的输出是图像的 URL。让我们试着明确一点:

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

就是这样!

现在，作为一个建议，尽量避免内联样式。如果它是客户端库的一部分，您将避免类似的显示上下文问题，并且您的 CSS 将更易于维护。