如何为AEM Communities创建自定义设计模板

核心原则：永远不要直接修改/libs目录 #

AEM的/libs是系统核心目录，修改内容会被版本升级覆盖，且缓存机制可能导致修改不生效。正确做法是**Overlay（覆写）**到/apps目录，系统会优先加载/apps下的自定义文件。

第一步：复制基础设计到/apps #

你可以基于现有Bootstrap或We Retail设计做定制，先把整个设计目录复制到/apps：

• 复制/libs/social/console/designs/bootstrap到/apps/social/console/designs/[你的自定义设计名]（比如mycustomdesign）
• 修改新目录下的design.json，更新name和label字段为自定义名称，方便后台选择。

第二步：Overlay核心HBS组件文件 #

你之前修改的sitepage.hbs需要按正确路径覆写：

1. 在/apps下创建对应路径：/apps/social/console/components/hbs/sitepage
2. 把/libs/social/console/components/hbs/sitepage/sitepage.hbs复制到上述路径
3. 修改/apps下的这个HBS文件，比如引入自定义Client Libs：

   {{! 引入自定义Client Libs }}
   <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
        data-sly-call="${clientlib.css @ categories='my.custom.design.css'}"/>
   <sly data-sly-call="${clientlib.js @ categories='my.custom.design.js'}"/>
   

4. 确保HBS文件里的资源引用（比如图片、样式路径）指向自定义设计的对应位置。

第三步：创建并关联自定义Client Libs #

1. 在/apps/[你的项目路径]/clientlibs下创建两个clientlib文件夹：my.custom.design.css和my.custom.design.js
2. 每个文件夹下创建js.txt（或css.txt）及对应资源文件，配置categories属性（比如my.custom.design.css）
3. 在自定义设计的design.json里添加clientlibCategories字段，关联你的clientlib分类，确保设计加载时自动引入。

第四步：创建自定义社区模板 #

1. 进入AEM模板编辑器，新建社区模板
2. 在模板的「设计」选项中选择你创建的自定义设计（mycustomdesign）
3. 配置模板允许使用的组件，添加自定义组件、移除不需要的默认组件
4. 保存模板后，创建页面时选择该模板，即可应用自定义设计与组件。

排查修改不生效的常见问题 #

• 清除AEM缓存：通过/system/console/bundles刷新相关bundle，或使用/system/console/clearcache清除缓存
• 检查路径匹配：/apps下的路径必须和/libs下的路径完全一致，否则覆写不生效
• 验证Client Libs加载：打开浏览器开发者工具的Network面板，确认自定义CSS/JS是否成功加载
• 检查设计关联：确保页面或模板正确关联了自定义设计，而非默认的Bootstrap/We Retail

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