如何通过AEM Sly修改代码：移除section标签并添加toggleable-content类

方法1：直接修改目标组件的HTL脚本（推荐） #

如果有权限修改components/header组件的代码，这是最直接可靠的方案：

1. 找到该组件对应的HTL文件（通常是header.html）
2. 删除外层包裹的<section>标签
3. 找到带row类的<ul>元素，修改其class属性以合并传入的额外类：

   <!-- 替换原ul代码 -->
   <ul class="row ${cssClassName || ''}">
     <!-- 组件原有内容 -->
   </ul>
   

4. 调用组件时传递cssClassName参数：

   <sly data-sly-resource="${'item' @ resourceType='components/header', cssClassName='toggleable-content'}"></sly>
   

   注：之前传参数未生效，大概率是组件的HTL脚本没有接收并使用cssClassName参数，补上即可。

方法2：不修改原组件，用HTL指令调整输出 #

如果无法修改原组件代码，可以借助AEM HTL的data-sly-unwrap和data-sly-attribute指令调整输出结构：

<sly 
  data-sly-resource="${'item' @ resourceType='components/header'}"
  data-sly-unwrap="section"
  data-sly-attribute.class="${'toggleable-content' @ append=true, on='ul.row'}"
></sly>

• data-sly-unwrap="section"：移除输出中的<section>标签，保留其内部内容
• data-sly-attribute.class="${...}"：定位到带row类的<ul>元素，追加toggleable-content类

方法3：用data-sly-include替代resource（无资源节点场景适用） #

如果该组件不需要绑定特定JCR资源节点，可改用data-sly-include调用，参数传递更灵活：

<sly data-sly-include="${'../header/header.html' @ cssClassName='toggleable-content'}"></sly>

同时按方法1的要求修改header.html中的ul类属性并移除section标签。

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