Sightly 组件忽略了我的 clientLib（不包括指向 css 的链接）答案

【问题标题】：Sightly component ignores my clientLib (doesn't include links to css)Sightly 组件忽略了我的 clientLib（不包括指向 css 的链接）
【发布时间】：2017-04-03 00:22:01
【问题描述】：

我使用的示例来自：blogs.adobe.com 但我的输出 html 文件不包含指向我的 css 文件的链接。

boilerplateSightlyPage.html：

<html>
<sly data-sly-include="head.html" data-sly-unwrap />
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap />
<body>
    <div data-sly-test="${wcmmode.edit}"> 
        <!--/* Show only in edit (author) mode */-->
        <h1>Simple Page Component Using Sightly</h1>
    </div>

    <div class="flex-row"> 
        <div class="col-half">First column</div>
        <div class="col-half">Second column</div> 
    </div>

<div data-sly-resource="${@path='par',resourceType='wcm/foundation/components/parsys'}"></div>
</body>
</html>

head.html:

<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8” />
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
    data-sly-call="${clientlib.css @ categories='alexpi, flex'}"/>

<title>${currentPage.title}</title>
</head>

客户端库：
/etc/designs/alexpi-training/clientLib
属性：
jcr:primaryType (Name)cq:ClientLibraryFolder
类别 (String[]) alexpi, flex

css.txt：

#base=css
flex.css
first.css

CSS 文件位置：
/etc/designs/alexpi-training/clientLib/css/first.css
/etc/designs/alexpi-training/clientLib/css/flex.css

我看到包含了“head.html”：

<head>
<meta http-equiv="”content-type”" content="”text/html;" charset="UTF-8”">
<title>AP empty sightly page with clienlib</title>

<link rel="stylesheet"href="/libs/cq/gui/components/authoring/clientlibs/page.css" type="text/css">
<script type="text/javascript" src="/libs/granite/author/deviceemulator/clientlibs.js"></script>
<script type="text/javascript" src="/libs/cq/gui/components/authoring/clientlibs/page.js"></script>
</head>

【问题讨论】：

我认为您的问题可能与多个类别有关。也许在你的 clientlib 定义中有一些空白字符，例如在 `flex` 之前。要检查是否尝试删除一个类别，然后只包含一个。

标签： aem sightly client-library

【解决方案1】：

要通过option 传递数组，您需要使用${myVar @ optName=[myVar, 'string']} 语法read here

在你的 head.html 中：

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
    data-sly-call="${clientlib.css @ categories=['alexpi', 'flex']}"/>

注意：categories=['alexpi', 'flex']

【讨论】：