如何将自定义组件资源包含到 AEM Social Communities 车把模板中？答案

【问题标题】：How do you include a custom component resource into an AEM Social Communities handlebars template?如何将自定义组件资源包含到 AEM Social Communities 车把模板中？
【发布时间】：2016-11-11 05:20:48
【问题描述】：

在 AEM 6.2 中，我想在车把中执行此操作。

<sly data-sly-resource="${'title' @ resourceType='myproject/components/content/common/title'}"/>

具体来说，我覆盖了 qnaforum.hbs 并需要将其包含在其中。官方文档（link）说正确的做法是：

{{include this.id path="title" resourceType="myproject/components/content/common/title"}}

这样做有三个问题：

组件出现，然后从页面上消失。
我收到警告“在客户端包括 sling 时不支持强制资源类型”
在浏览器控制台中有一个对http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html 的失败(404) GET 请求（就像它试图在该路径中查找标题资源的渲染器一样）。

在同一个 qnaforum.hbs 文件中，Adobe 为其订阅组件使用了相同的包含，而且它似乎工作正常。

{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}

这种类型的包括仅适用于社交社区组件吗？如果是这样，我如何在车把模板中包含自定义资源？

【问题讨论】：

标签： handlebars.js aem sling sightly

【解决方案1】：

我帮助了其他面临类似问题的人。我附上了导致您面临的问题（QnA 列表消失）的代码 sn-p 以及针对该问题的修复。

覆盖的 QnAForum 组件看起来像这样

{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
    <div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
    {{!-- Other QnA code --}}
</div>

但是代码应该是这样的

{{#if-wcm-mode mode="EDIT" }}
    <div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
 {{!-- moving line1 from previous code snippet inside this parent div}}
 {{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
 {{!-- rest of QnA Code }}
</div>

我所做的更改是，将第一个代码 sn-p 中的 line1 移动到第 5 行。

JS 控制台确实说缺少 HTML，但它被包含在内。控制台错误的原因是 include 的工作方式。我们尝试获取 html，如果获取 HTML 失败，我们要求 sling 解析组件。

【讨论】：