Заполните HTML-тег, например <h2>, в диалоговом окне AEM.

Question

Я пытаюсь разрешить автору изменять размер заголовка в разметке на основе раскрывающегося списка в диалоге с параметрами «h1, h2, h3, h4».Если ничего не выбрано, по умолчанию должно быть h2.

Я пытаюсь сделать это с троичным кодом, как я делал бы для динамических классов или контента, но когда я делаю это, он просто печатает код на странице.,Результат следующего должен быть <h2> Heading </h2> или заменить h2 на выбор диалогового окна

<${properties.headingSize ? properties.headingSize : 'h2'}>
    ${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>

Результат этого кода в Inspect Element равен

<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->

Разве это не рекомендуетсяспособ выполнения динамической разметки?Или есть способ заставить троичку работать правильно?

Answer 1

Рекомендуемый способ решения вашей проблемы - использовать оператор data-sly-element для замены имени вашего элемента.Пример использования показан ниже.

<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>

Для получения дополнительной информации о допустимых значениях для data-sly-element, а также о доступных операторах блока, которые можно использовать в HTL, пожалуйста, обратитесь к этой официальной документации