Sightly三元表达式失效问题排查及正确写法咨询

你的代码存在两个核心错误：

1. 三元表达式未完整包裹在EL语法中：你仅将判断条件${atcList.first || atcList.last}放在${}内，后续的? <b>...</b> : ...被当作普通文本输出，完全没有触发三元逻辑判断。
2. 表达式外嵌套HTML标签无效：Sightly不会解析表达式外的分支逻辑，导致<b>标签被当作纯文本显示，无法实现加粗效果。

Sightly三元表达式的正确用法 #

Sightly要求整个三元逻辑（判断条件+分支内容）必须全部包裹在${}中；若分支内容包含HTML标签，还需用@html指令禁用自动转义（否则HTML会被转义成文本）。

写法1：纯三元表达式实现 #

<p>${atcList.first || atcList.last ? '<b>Code ' + atc.code + '</b>' : 'Code ' + atc.code @ html}</p>

• @ html指令：告知Sightly不要转义输出的HTML内容，确保<b>标签能正常渲染。
• 分支内容需通过字符串拼接组合，不能直接插入EL表达式。

写法2：Sightly原生条件指令（推荐） #

Sightly更推荐使用data-sly-test指令做条件渲染，可读性更强，也避免了拼接HTML的麻烦：

<p>
    <b data-sly-test="${atcList.first || atcList.last}">Code ${atc.code}</b>
    <span data-sly-test="${!atcList.first && !atcList.last}">Code ${atc.code}</span>
</p>

若不想生成多余的<span>标签，可使用data-sly-unwrap移除容器标签：

<p>
    <span data-sly-test.isFirstOrLast="${atcList.first || atcList.last}" data-sly-unwrap>
        <b>Code ${atc.code}</b>
    </span>
    <span data-sly-test="${!isFirstOrLast}" data-sly-unwrap>
        Code ${atc.code}
    </span>
</p>

内容的提问来源于stack exchange，提问作者alex