Clientlibs 추가 add-clientlibs
ClientLibraryFolder(clientlibs) 추가 add-a-clientlibraryfolder-clientlibs
이름이 인 ClientLibraryFolder 만들기 clientlibs에는 사이트의 페이지를 렌더링하는 데 사용되는 JS 및 CSS가 포함됩니다.
다음 categories이 클라이언트 라이브러리에 제공되는 속성 값은 콘텐츠 페이지에서 이 clientlib을 직접 포함하거나 다른 clientlibs에 포함하는 데 사용되는 식별자입니다.
-
사용 CRXDE Lite, 확장
/etc/designs -
마우스 오른쪽 단추 클릭
an-scf-sandbox을(를) 선택합니다.Create Node- 이름:
clientlibs - 유형:
cq:ClientLibraryFolder
- 이름:
-
확인 을 클릭합니다
에서 속성 새 clientlibs 노드, enter 키 categories 속성:
- 이름: 카테고리
- 유형: 문자열
- 값: apps.an-scf-sandbox
- 클릭 추가
- 클릭 모두 저장
참고: 'apps'로 카테고리 값 앞에 는 '소유 응용 프로그램'이 /apps 폴더에 있는 것으로 식별하기 위한 것으로서, /libs가 아닙니다. 중요 사항: 자리 표시자 추가 js.txt 및 css.txt 파일. (공식적으로 cq:ClientLibraryFolder가 없는 것은 아닙니다.)
-
마우스 오른쪽 단추 클릭
/etc/designs/an-scf-sandbox/clientlibs -
선택 파일 만들기…
-
Enter 키 이름:
css.txt -
선택 파일 만들기…
-
Enter 키 이름:
js.txt -
클릭 모두 저장
css.txt 및 js.txt의 첫 번째 줄은 다음 파일 목록을 찾을 기본 위치를 식별합니다.
css.txt의 컨텐츠를 다음과 같이 설정해 보십시오.
#base=.
style.css
그런 다음 style.css라는 clientlibs 아래에 파일을 만들고 이 컨텐츠를 로 설정합니다.
body {
background-color: #b0c4de;
}
SCF Clientlibs 포함 embed-scf-clientlibs
에서 속성 탭 clientlibs 노드, 다중 값 String 속성 입력 포함. 필요한 항목이 포함됩니다 SCF 구성 요소용 클라이언트 측 라이브러리(clientlibs). 이 자습서에서는 커뮤니티 구성 요소에 필요한 많은 clientlibs를 추가합니다.
참고 모든 페이지에 대해 다운로드한 clientlibs의 크기/속도에 대한 편의성 고려 사항이 있으므로 프로덕션 사이트에서 사용하려는 접근 방식이 될 수도 있고 아닐 수도 있습니다.
한 페이지에서 하나의 기능만 사용하는 경우 <% ui:includeClientLib categories=cq.social.hbs.forum" %> 과 같이 해당 기능의 전체 clientlib을 페이지에 직접 포함할 수 있습니다.
이 경우 모두 포함되므로 작성 clientlibs인 보다 기본적인 SCF clientlibs를 선호합니다.
-
이름:
embed -
유형:
String -
클릭
Multi -
값:
cq.social.scf<enter> 대화 상자가 표시됩니다.
클릭 [+] 각 항목 다음에 다음 clientlib 카테고리를 추가합니다.
cq.ckeditorcq.social.author.hbs.commentscq.social.author.hbs.forumcq.social.author.hbs.ratingcq.social.author.hbs.reviewscq.social.author.hbs.voting- 확인 을 클릭합니다
-
클릭 모두 저장
다음은 이러한 방식입니다 /etc/designs/an-scf-sandbox/clientlibs 이제 저장소에 표시됩니다.
PlayPage 템플릿에 Clientlibs 포함 include-clientlibs-in-playpage-template
다음을 포함하지 않음 apps.an-scf-sandbox 페이지의 ClientLibraryFolder 카테고리에는 SCF 구성 요소가 작동하지 않거나 필요한 Javascript 및 스타일로 스타일이 지정되지 않습니다.
예를 들어 clientlibs를 포함하지 않으면 SCF 주석 구성 요소가 스타일이 지정되지 않은 것으로 표시됩니다.
apps.an-scf-sandbox clientlibs가 포함되면 SCF 주석 구성 요소가 스타일이 지정된 상태로 표시됩니다.
include 문은 <head> 섹션 <html> 스크립트. 기본값 foundation head.jsp 에는 오버레이할 수 있는 스크립트가 포함되어 있습니다. headlibs.jsp.
headlibs.jsp 복사 및 clientlibs 포함:
-
사용 CRXDE Lite, 선택
/libs/foundation/components/page/headlibs.jsp -
마우스 오른쪽 단추를 클릭하고 을 선택합니다 복사 또는 도구 모음에서 복사 를 선택합니다.
-
선택
/apps/an-scf-sandbox/components/playpage -
마우스 오른쪽 단추를 클릭하고 을 선택합니다 붙여넣기 (또는 도구 모음에서 붙여넣기 를 선택합니다.)
-
두 번 클릭
headlibs.jsp열다 -
파일 끝에 다음 줄을 추가합니다
<ui:includeClientLib categories="apps.an-scf-sandbox"/> -
클릭 모두 저장
<%@ page session="false" %><%
%><%@include file="/libs/foundation/global.jsp" %><%
%><ui:includeClientLib categories="cq.foundation-main"/><%
%>
<cq:include script="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp"/>
<% currentDesign.writeCssIncludes(pageContext); %>
<ui:includeClientLib categories="apps.an-scf-sandbox"/>
브라우저에서 웹 사이트를 로드하고 배경이 파란색 음영이 아닌지 확인합니다.
http://localhost:4502/content/an-scf-sandbox/en/play.html
지금까지 작업 저장 saving-your-work-so-far
이 시점에서 최소 샌드박스가 있으며 패키지로 저장할 가치가 있으므로 재생하는 동안 경험이 손상되어 다시 시작하려는 경우 서버를 끄거나 crx-quickstart/ 폴더의 이름을 바꾸거나 삭제하고 서버를 켜고 이 저장된 패키지를 업로드하고 설치할 수 있으며 이러한 가장 기본적인 단계를 반복하지 않아도 됩니다.
이 패키지는 샘플 페이지 만들기 빨리 뛰어들어 재생을 시작하는 사용자를 위한 튜토리얼…
패키지를 만들려면 다음을 수행하십시오.
-
From CRXDE Lite 를 클릭하고 패키지 아이콘
-
클릭 패키지 만들기
- 패키지 이름:
an-scf-sandbox-minimal-pkg - 버전:
0.1 - 그룹: <leave as="" default="">
- 확인 을 클릭합니다
- 패키지 이름:
-
클릭 편집
-
선택 필터 탭
- 클릭 필터 추가
- 루트 경로: <browse to="" span="" id="0" translate="no" />>
/apps/an-scf-sandbox - 클릭 완료
- 클릭 필터 추가
- 루트 경로: <browse to="" span="" id="0" translate="no" />>
/etc/designs/an-scf-sandbox - 클릭 완료
- 클릭 필터 추가
- 루트 경로: <browse to="" span="" id="0" translate="no" />>
/content/an-scf-sandbox - 클릭 완료
-
저장 을 클릭합니다
-
-
클릭 빌드
이제 다음을 선택할 수 있습니다 다운로드 디스크에 저장하고 패키지 업로드 다른 곳에서 선택할 수 있습니다. 자세히 > 복제 샌드박스를 localhost 게시 인스턴스에 푸시하여 샌드박스의 영역을 확장하려면