Question

我试图通过在sightly中创建一个变量来为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。此外，您在那里传递的字符串"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 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中的样式元素内部未解析运行时变量

2 个答案: