AEM 6.1，HTL:: 无法将样式应用于一段文本

Question

下面是一个组件的HTL文件中的一段代码：

<p id="info" data-sly-use.info="info-text.js">
    ${info.text}
</p>

这是信息-text.js

use(function () {

    // TODO: change currentStyle to wcm.currentStyle

    var CONST = {
        PROP_INFO_TEXT: "infoText",
        PROP_DEFAULT_TEXT: "Enter information text here"
    }

    var info = {};

    // The actual title content
    info.text = granite.resource.properties[CONST.PROP_INFO_TEXT]
        || CONST.PROP_DEFAULT_TEXT


    return info;
});

PROP_DEFAULT_TEXT 是当信息文本属性尚未创作时显示在页面上的默认文本。我希望以某种方式为此默认文本 "Enter information text here" 提供样式。我尝试使用

PROP_DEFAULT_TEXT: "<p style='default-text'>Enter information text here</p>"

但在页面上它看起来像简单的文本，如下所示：

我不确定我是否使用 HTL Context 使其工作，我尝试了一些方法但它不会工作。所以，我不知道我到底应该怎么做才能让它发挥作用。

提前致谢

Answer 1

第一个 style="default-text" 不正确 CSS，请使用具有 style 属性的正确 CSS 规则。

其次，当尝试通过 HTL 表达式呈现 HTML 时，您必须将显示上下文设置为 html:

${info.text @context='html'}

Note: use github.com/Adobe-Marketing-Cloud/aem-htl-repl for quick HTL testing.

AEM 6.1，HTL:: 无法将样式应用于一段文本

AEM 6.1, HTL:: Unable to apply style to a piece of text

aem

htl