⇐ Feature Essentials | 서버측 사용자 정의 ⇒ |
---|---|
클라이언트측 사용자 정의 ⇒ |
Handlebars Helpers(helpers)는 SCF 구성 요소 작업을 용이하게 하기 위해 Handlebars 스크립트에서 호출할 수 있는 메서드입니다.
구현에는 클라이언트측과 서버측 정의가 포함됩니다. 또한 개발자가 사용자 정의 도움말을 만들 수도 있습니다.
AEM Communities으로 제공된 사용자 지정 SCF 도우미는 클라이언트 라이브러리에 정의됩니다.
/etc/clientlibs/social/commons/scf/helpers.js
최신 커뮤니티 기능 팩을(를) 설치해야 합니다.
maxWords 및 maxLength 속성을 따르는 축약된 문자열을 반환하는 도우미입니다.
축약할 문자열은 컨텍스트로 제공됩니다. 제공된 컨텍스트가 없으면 빈 문자열이 반환됩니다.
먼저 컨텍스트를 maxLength로 트리밍한 다음, 컨텍스트를 단어로 잘라서 maxWords로 줄입니다.
safeString이 true로 설정된 경우 반환된 문자열은 SafeString입니다.
컨텍스트:문자열
(선택 사항) 기본값은 빈 문자열입니다.
maxLength:숫자
(선택 사항) 기본값은 컨텍스트의 길이입니다.
maxWords:숫자
(선택 사항) 기본값은 트리밍된 문자열의 단어 수입니다.
safeString:부울
(선택 사항) true인 경우 Handlebars.SafeString()을 반환합니다. 기본값은 false입니다.
{{abbreviate subject maxWords=2}}
/*
If subject =
"AEM Communities - Site Creation Wizard"
Then abbreviate would return
"AEM Communities".
*/
{{{abbreviate message safeString=true maxLength=30}}}
/*
If message =
"The goal of AEM Communities is to quickly create a community engagement site."
Then abbreviate would return
"The goal of AEM Communities is"
*/
두 보기 간을 전환할 수 있는 기능을 사용하여 div 아래에 두 범위를 추가하는 도우미, 하나는 전체 텍스트에 대해 하나, 다른 하나는 적은 텍스트에 대해 추가합니다.
컨텍스트:문자열
(선택 사항) 기본값은 빈 문자열입니다.
numChars:숫자
(선택 사항) 전체 텍스트를 표시하지 않을 때 표시할 문자 수입니다. 기본값은 100입니다.
moreText:문자열
(선택 사항) 표시할 텍스트가 더 있음을 나타내는 텍스트입니다. 기본값은 "more"입니다.
ellipsesText:문자열
(선택 사항) 숨겨진 텍스트가 있음을 나타내는 표시할 텍스트입니다. 기본값은 "…"입니다.
safeString:부울
(선택 사항) 결과를 반환하기 전에 Handlebars.SafeString()을 적용할지 여부를 나타내는 부울 값입니다. 기본값은 false입니다.
{{content-loadmore context numChars=32 moreText="go on" ellipsesText="..." }}
/*
If context =
"Here is the initial less content and this is more content."
Then content-loadmore would return
"Here is the initial less content<span class="moreelipses">...</span> <span class="scf-morecontent"><span>and this is more content.</span> <a href="" class="scf-morelink" evt="click=toggleContent">go on</a></span>"
*/
형식이 지정된 날짜 문자열을 반환하는 도우미입니다.
컨텍스트:숫자
(선택 사항) 1970년 1월 1일(epoch)부터 밀리초 값 오프셋입니다. 기본값은 현재 날짜입니다.
형식:문자열
(선택 사항) 적용할 날짜 형식입니다. 기본값은 "YYYY-MM-DDTHH:mm:ss.sssZ"이며 그 결과는 "2015-03-18T18:17:13-07:00"로 표시됩니다.
{{dateUtil this.memberSince format="dd MMM yyyy, hh:mm"}}
// returns "18 Mar 2015, 18:17"
{{dateUtil this.birthday format="MM-DD-YYYY"}}
// returns "03-18-2015"
동일도 조건에 따라 콘텐츠를 반환하는 도우미입니다.
lvalue:문자열
비교할 왼쪽 값입니다.
rvalue:문자열
비교할 오른쪽 값입니다.
{{#equals value "some-value"}}
<div>They are EQUAL!</div>
{{else}}
<div>They are NOT equal!</div>
{{/equals}}
문자열 구분 모드 목록을 기준으로 WCM 모드의 현재 값을 테스트하는 블록 도우미입니다.
컨텍스트:문자열
(선택 사항) 변환할 문자열입니다. 기본값이 제공되지 않을 경우 필요합니다.
모드:문자열
(선택 사항) 설정되면 테스트할 WCM 모드의 쉼표로 구분된 목록입니다.
{{#if-wcm-mode mode="DESIGN, EDIT"}}
...
{{else}}
...
{{/if-wcm-mode}}
이 도우미는 Handlebars 도우미 'i18n'을 무시합니다.
JavaScript 코드에서 문자열 국제화를 참조하십시오.
컨텍스트:문자열
(선택 사항) 변환할 문자열입니다. 기본값이 제공되지 않을 경우 필요합니다.
기본값:문자열
(선택 사항) 변환할 기본 문자열입니다. 제공된 컨텍스트가 없는 경우 필요합니다.
주석:문자열
(선택 사항) 번역 힌트
{{i18n "hello"}}
{{i18n "hello" comment="greeting" default="bonjour"}}
템플릿에 구성 요소를 존재하지 않는 리소스로 포함하는 도우미입니다.
따라서 JCR 노드로 추가된 리소스에 대해 가능한 것보다 프로그래밍 방식으로 보다 쉽게 리소스를 사용자 지정할 수 있습니다. 커뮤니티 구성 요소 추가 또는 포함을 참조하십시오.
일부 커뮤니티 구성 요소만 포함할 수 있습니다. AEM 6.1의 경우, 포함할 수 있는 사람은 댓글, 등급, 평가 및 투표입니다.
이 도우미는 서버측에만 적합하며 JSP 스크립트용 cq:include와 유사한 기능을 제공합니다.
컨텍스트:문자열 또는 개체
(선택 사항으로, 상대 경로를 제공하지 않는 경우)
현재 컨텍스트를 전달하려면 this
을 사용합니다.
this.id
을(를) 사용하여 요청된 resourceType을 렌더링하기 위해 id
에서 리소스를 가져옵니다.
resourceType:문자열
(선택 사항) 리소스 유형은 기본적으로 컨텍스트의 리소스 유형으로 설정됩니다.
템플릿:문자열
구성 요소 스크립트 경로.
경로:문자열
(필수) 리소스의 경로입니다. 경로가 상대적이면 컨텍스트를 제공해야 하며 그렇지 않으면 빈 문자열이 반환됩니다.
authoringDisabled:부울
(선택 사항) 기본값은 false입니다. 내부 용도로만 사용하십시오.
{{include this.id path="comments" resourceType="social/commons/components/hbs/comments"}}
여기에는 this.id
+ /comments에 새 주석 구성 요소가 포함됩니다.
js, css 또는 테마 라이브러리가 될 수 있는 AEM html 클라이언트 라이브러리를 포함하는 도우미. js 및 css와 같이 다양한 유형의 여러 포함을 사용하려면 이 태그를 Handlebars 스크립트에서 여러 번 사용해야 합니다.
이 도우미는 서버측에만 적합하며 JSP 스크립트용 ui:includeClientLib와 유사한 기능을 제공합니다.
카테고리:문자열
(선택 사항) 쉼표로 구분된 클라이언트 라이브러리 카테고리 목록입니다. 지정된 범주에 대한 모든 Javascript 및 CSS 라이브러리가 포함됩니다. 테마 이름이 요청에서 추출됩니다.
테마:문자열
(선택 사항) 쉼표로 구분된 클라이언트 라이브러리 카테고리 목록입니다. 지정된 범주에 대한 모든 테마 관련 라이브러리(CSS 및 JS 모두)가 포함됩니다. 테마 이름이 요청에서 추출됩니다.
js:문자열
(선택 사항) 쉼표로 구분된 클라이언트 라이브러리 카테고리 목록입니다. 지정된 범주에 대한 모든 Javascript 라이브러리가 포함됩니다.
css:문자열
(선택 사항) 쉼표로 구분된 클라이언트 라이브러리 카테고리 목록입니다. 지정된 범주에 대한 모든 CSS 라이브러리가 포함됩니다.
// all: js + theme (theme-js + css)
{{includeClientLib categories="cq.social.hbs.comments, cq.social.hbs.voting"}}
// returns
<link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
<link href="/etc/clientlibs/social/hbs/socialgraph.css" rel="stylesheet" type="text/css">
<link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">
<script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
<script src="/etc/clientlibs/social/hbs/socialgraph.js" type="text/javascript"></script>
<script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>
// only js libs
{{includeClientLib js="cq.social.hbs.comments, cq.social.hbs.voting"}}
// returns
<script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
<script src="/etc/clientlibs/social/hbs/socialgraph.js" type="text/javascript"></script>
<script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>
// theme only (theme-js + css)
{{includeClientLib theme="cq.social.hbs.comments, cq.social.hbs.voting"}}
// returns
<link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
<link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">
<script src="/etc/clientlibs/social/hbs/tally/voting.js" type="text/javascript"></script>
<script src="/etc/clientlibs/social/hbs/comments.js" type="text/javascript"></script>
// css only
{{includeClientLib css="cq.social.hbs.comments, cq.social.hbs.voting"}}
// returns
<link href="/etc/clientlibs/social/hbs/tally/voting.css" rel="stylesheet" type="text/css">
<link href="/etc/clientlibs/social/hbs/socialgraph.css" rel="stylesheet" type="text/css">
<link href="/etc/clientlibs/social/hbs/comments.css" rel="stylesheet" type="text/css">
일반 날짜 형식이 표시된 이후 마감 지점까지 경과된 시간을 표시하는 도우미입니다.
예:
컨텍스트:숫자
'지금'과 비교할 과거의 시간. 시간은 1970년 1월 1일(epoch)부터 밀리 값 오프셋으로 표현됩니다.
daysCutar:숫자
실제 날짜로 전환하기 전 일 수입니다. 기본값은 60입니다.
{{pretty-time this.published daysCutoff=7}}
/*
Depending on how long in the past, may return
"3 minutes ago"
"3 hours ago"
"3 days ago"
*/
XSS를 방지하는 데 도움이 되도록 HTML 요소 내용의 소스 문자열을 인코딩하는 도우미.
참고:유효성 검사기가 아니며 특성 값을 쓰는 데 사용할 수 없습니다.
컨텍스트:개체
인코딩할 HTML입니다.
<p>{{xss-html forum-ugc}}</p>
XSS를 보호하는 데 도움이 되도록 HTML 속성 값에 쓸 소스 문자열을 인코딩하는 도우미.
참고:이것은 유효성 검사기가 아니며 실행 가능한 특성(href, src, 이벤트 핸들러)을 쓰는 데 사용할 수 없습니다.
컨텍스트:개체
인코딩할 HTML입니다.
<div id={{xss-htmlAttr id}} />
XSS에 대한 경계를 지원하기 위해 JavaScript 문자열 컨텐츠에 쓸 소스 문자열을 인코딩하는 도우미.
참고:이것은 유효성 검사기가 아니며 임의의 JavaScript에 쓰는 데 사용되지 않습니다.
컨텍스트:개체
인코딩할 HTML입니다.
var input = {{xss-jsString topic-title}}
XSS를 막기 위해 HTML href 또는 srce 속성 값으로 쓸 수 있도록 URL을 정리하는 도우미.
참고:빈 문자열을 반환할 수 있습니다.
컨텍스트:개체
문서의 기밀 정보 가리기 URL입니다.
<a href="{{xss-validHref url}}">my link</a>
Handlebars.js 설명서의 도우미 기능에 대한 빠른 개요:
Handlebars 도우미 호출은 0개 이상의 공간 구분 매개 변수가 있는 간단한 식별자(도우미의 name)입니다.
매개 변수는 간단한 문자열, 숫자, 부울 또는 JSON 개체일 뿐만 아니라 마지막 매개 변수로서 키-값 쌍(해시 인수)의 선택적 시퀀스일 수 있습니다.
해시 인수의 키는 단순 식별자여야 합니다.
해시 인수의 값은 Handlebars 표현식입니다.단순 식별자, 경로 또는 문자열.
현재 컨텍스트인 this
은 항상 Handlebars 도우미에게 사용할 수 있습니다.
컨텍스트는 문자열, 숫자, 부울 또는 JSON 데이터 개체일 수 있습니다.
현재 컨텍스트 내에 중첩된 개체를 컨텍스트로 전달할 수 있습니다(예: this.url
또는 this.id
)(단순 및 블록 도움말의 다음 예 참조).
블록 도우미는 템플릿의 모든 위치에서 호출할 수 있는 함수입니다. 매번 다른 컨텍스트에서 템플릿 블록을 0회 이상 호출할 수 있습니다. 여기에는 {{#name}}과(와) {{/name}} 사이의 컨텍스트가 포함됩니다.
handlebars는 'options'라는 이름의 도우미에게 최종 매개 변수를 제공합니다. 특수 객체 'options'에 포함된
도우미에서 반환된 HTML 문자열 내용은 SafeString이 좋습니다.
Handlebars.registerHelper('link_to', function(title, options) {
return new Handlebars.SafeString('<a href="/posts' + this.url + '">' + title + "!</a>");
});
var context = {posts: [
{url: "/hello-world",
body: "Hello World!"}
] };
// when link_to is called, posts is the current context
var source = '<ul>{{#posts}}<li>{{{link_to "Post"}}}</li>{{/posts}}</ul>'
var template = Handlebars.compile(source);
template(context);
렌더링:
<ul>
<li><a href="/posts/hello-world">포스트!</a></li>
</ul>
Handlebars.registerHelper('link', function(options) {
return new Handlebars.SafeString('<a href="/people/' + this.id + '">' + options.fn(this) + '</a>');
});
var data = { "people": [
{ "name": "Alan", "id": 1 },
{ "name": "Yehuda", "id": 2 }
]};
// when link is called, people is the current context
var source = "<ul>{{#people}}<li>{{#link}}{{name}}{{/link}}</li>{{/people}}</ul>";
var template = Handlebars.compile(source);
template(data);
렌더링:
<ul>
<li><a href="/people/1">Alan</a></li>
<li><a href="/people/2">Yhuda</a></li>
</ul>
사용자 지정 도움말은 특히 데이터를 전달할 때 서버측 및 클라이언트측에서 구현되어야 합니다. SCF의 경우 페이지가 요청될 때 서버가 지정된 구성 요소에 대한 HTML을 생성하므로 대부분의 템플릿이 서버측에서 컴파일되고 렌더링됩니다.
서버측에서 사용자 지정 SCF 도우미를 구현하고 등록하려면 Java 인터페이스 TemplateHelper을 구현하고 OSGi 서비스로 만들고 OSGi 번들의 일부로 설치합니다.
예:
/** Custom Handlebars Helper */
package com.my.helpers;
import java.io.IOException;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import com.adobe.cq.social.handlebars.api.TemplateHelper;
import com.github.jknack.handlebars.Options;
@Service
@Component
public class FooTextHelper implements TemplateHelper<String>{
@Override
public CharSequence apply(String context, Options options) throws IOException {
return "foo-" + context;
}
@Override
public String getHelperName() {
return "foo-text";
}
@Override
public Class<String> getContextType() {
return String.class;
}
}
서버측을 위해 만든 도우미도 클라이언트측에서 만들어야 합니다.
구성 요소는 로그인한 사용자의 클라이언트측에서 다시 렌더링되며, 클라이언트측 도우미를 찾을 수 없으면 구성 요소가 사라집니다.
클라이언트측 도움말은 Handlebars.registerHelper()
을(를) 호출하여 등록된 Handlebars 스크립트입니다.
예:
function(Handlebars, SCF, $CQ) {
Handlebars.registerHelper('foo-text', function(context, options) {
if (!context) {
return "";
}
return "foo-" + context;
});
})(Handlebars, SCF, $CQ);
사용자 지정 클라이언트측 도움말을 사용자 지정 클라이언트 라이브러리에 추가해야 합니다.
clientlib은 다음을 수행해야 합니다.
cq.social.scf
에 대한 종속성을 포함합니다.참고:SCF 도우미는 /etc/clientlibs/social/commons/scf/helpers.js
에 정의됩니다.
⇐ Feature Essentials | 서버측 사용자 정의 ⇒ |
---|---|
클라이언트측 사용자 정의 ⇒ |