来自 /etc/designs 的 AEM Sightly Include答案

【问题标题】：AEM Sightly Include from /etc/designs来自 /etc/designs 的 AEM Sightly Include
【发布时间】：2015-12-29 23:26:47
【问题描述】：

我对 AEM 和 Sightly 有点陌生。我编写了一个“页面”组件来容纳我的页面内容。我在/etc/designs/myapp 下有许多具有不同 CSS 的设备，如下所示：

/etc/designs/myapp

- /128/style.css
- /240/style.css

等等等等。

回到我的页面组件中，我有许多不同的 HTML 文件，用于通过 Sling 选择器触发正确的 CSS。例如：

/apps/myapp/components/page

- 128.html
- 240.html

这些文件的目的是包含带有 CSS 的 HTML <head> 部分作为内联样式（由于设备限制，无法链接到外部 CSS）。

我遇到的问题是，如果我将 128/style.css 放在组件本身内，则包含工作。如果我在/etc/designs/myapp 下拥有它，我无法正确包含它。我尝试过使用${currentDesign.path @ appendPath='/128/style.css'}，并且我尝试过明确引用整个路径。

下面是128.html的例子，在页面组件下：

<html>
<head><!--/*
    */--><div data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap></div><!--/*
    */-->

    <title>${currentPage.title}</title>
        <div data-sly-unwrap data-sly-include="/etc/designs/myapp/128/style.css"></div>
</head>
<body class="main" role="document" data-sly-include="body.html"></body>
</html>

我意识到我需要一个 <style></style> 部分来包装包含的任何 CSS，但现在，我只是想从 /etc/designs 获取一个要包含的页面。

任何帮助将不胜感激。

【问题讨论】：

标签： aem sightly

【解决方案1】：

来自data-sly-include的定义：https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html#include

data-sly-include：当它被相应的模板引擎处理时，将宿主元素的内容替换为由指示的 HTML 模板文件（Sightly、JSP、ESP 等）生成的标记。包含文件的渲染上下文将不包含当前的 Sightly 上下文（包含文件的上下文）；因此，为了包含 Sightly 文件，当前的 data-sly-use 必须在包含的文件中重复（在这种情况下，通常最好使用 data-sly-template 和 data-sly-call）

它不适用于您尝试执行的包含类型，因为您没有调用任何渲染器。我认为您应该使用客户端库并仅包含您的 CSS 文件，这是有关此的文档：http://blogs.adobe.com/experiencedelivers/experience-management/sightly-clientlibs/

您应该为每个样式定义一个客户端库类别，并在需要时使用<meta data-sly-call="${clientLib.css @ categories='category.style.128'}" data-sly-unwrap></meta>调用正确的客户端库

希望这会有所帮助。

【讨论】：