Sightly 组件忽略了我的 clientLib(不包含指向 css 的链接)
Sightly component ignores my clientLib (doesn't include links to css)
我使用的示例来自: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(名称)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>
要通过 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']
我使用的示例来自: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(名称)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>
要通过 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']