2017-04-03 16 views
0

私は例を使用します:blogs.adobe.com ですが、出力HTMLファイルにはCSSファイルへのリンクが含まれていません。視覚的なコンポーネントは私のclientLibを無視します(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> 

clientLib:
の/ etc /デザイン/ alexpiトレーニング/ clientLib
プロパティ:
JCR:primaryType(名前)cq:ClientLibraryFolder
categories(String [])alexpi、flex

css.txt:

#base=css 
flex.css 
first.css 

CSSファイルの場所:
/etc/designs/alexpi-training/clientLib/css/first.css
の/ etc /デザイン/ alexpiトレーニング/ 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> 
+1

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

注:optionあなたは${myVar @ optName=[myVar, 'string']}構文、あなたのhead.htmlでread here

を使用する必要があります。たとえば、 'flex'の前に、あなたのclientlib定義にいくつかの空白文字があるかもしれません。それをチェックするには、カテゴリの1つを削除してから、それを削除してください。 – rzasap

答えて

2

を経由して配列を渡します私はあなたの問題が複数のカテゴリに接続することができると思いますcategories=['alexpi', 'flex']

関連する問題