运行 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>

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

Answer 1

变量解析得很好。您的 url() 值为空的原因是您没有使用正确的 Display Context。此外，您传递到那里的值，字符串 "my Title"，不是有效的 URL（您需要打印的内容）或有效的样式标记（通常在 [=15 中呈现的内容） =] 属性)

您会注意到以下每个表达式都呈现一个空 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 将更容易维护。

Answer 2

这对我有用---添加@context='styleToken'

<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>

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

Run time variable is not resolved inside style element in Sightly in AEM 6.2

html

css

aem

sightly

htl