Question

我对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

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

我遇到的问题是如果我将128 / style.css放在组件本身内，那么include就可以了。如果我在/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>

我意识到我需要一个包含所有CSS的<style></style>部分，但就目前而言，我只是想从/etc/designs获取一个页面。

非常感谢任何帮助。

Answer 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-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>

调用正确的clientlib

希望这有帮助。

AEM Sightly Slude from / etc / designs

1 个答案: