Clientlibs 추가

ClientLibraryFolder 추가(clientlibs)

이름이 인 ClientLibraryFolder 만들기 clientlibs 에는 사이트의 페이지를 렌더링하는 데 사용되는 JS 및 CSS가 포함됩니다.

다음 categories 이 클라이언트 라이브러리에 제공된 속성 값은 콘텐츠 페이지에서 이 clientlib을 직접 포함하거나 다른 clientlib에 임베드하는 데 사용되는 식별자입니다.

1. 사용 CRXDE Lite, 확장 /etc/designs

2. 마우스 오른쪽 버튼 클릭 an-scf-sandbox 및 선택 Create Node

   • 이름 : clientlibs
   • 유형 : cq:ClientLibraryFolder

3. 확인​을 클릭합니다

다음에서 속성 새 항목 탭 clientlibs 노드를 입력하고 카테고리 속성:

• 이름 : 카테고리
• 유형 : 문자열
• 값 : apps.an-scf-sandbox
• 클릭 추가
• 클릭 모두 저장

참고: 카테고리 값에 '앱'을 앞에 붙입니다. 는 '소유 애플리케이션'을 /libs가 아닌 /apps 폴더에 있는 것으로 식별하는 규칙입니다. 중요: 자리 표시자 추가 js.txt 및 css.txt 파일. (이러한 폴더가 없는 cq:ClientLibraryFolder는 공식적으로 아닙니다.)

1. 마우스 오른쪽 버튼 클릭 /etc/designs/an-scf-sandbox/clientlibs
2. 선택 파일 만들기…
3. 입력 이름: css.txt
4. 선택 파일 만들기…
5. 입력 이름: js.txt
6. 클릭 모두 저장

css.txt 및 js.txt의 첫 번째 행은 다음 파일 목록을 찾을 기본 위치를 식별합니다.

css.txt의 콘텐츠를 다음으로 설정

#base=.
 style.css

그런 다음 style.css라는 clientlibs 아래에 파일을 만들고 컨텐츠를 로 설정합니다.

body {

background-color: #b0c4de;

}

SCF Clientlibs 포함

다음에서 속성 탭 clientlibs 노드에서 다중 값 String 속성을 입력합니다. 임베드. 필요한 사항을 포함합니다. scf 구성 요소용 클라이언트측 라이브러리(clientlibs). 이 자습서의 경우 Communities 구성 요소에 필요한 많은 clientlib이 추가됩니다.

모든 페이지에 대해 다운로드한 클라이언트 라이브러리의 크기/속도에 대한 편의성 고려 사항이 있으므로 이 방법은 프로덕션 사이트에 사용하는 것이 바람직하거나 적합하지 않을 수 있습니다.

한 페이지에서 하나의 기능만 사용하는 경우 해당 기능의 전체 clientlib을 페이지에 직접 포함할 수 있습니다. 예를 들면 다음과 같습니다.

% ui:includeClientLib categories=cq.social.hbs.forum" %

이 경우 이들 모두를 포함하여 작성자 clientlib인 보다 기본적인 SCF clientlib이 선호됩니다.

• 이름 : embed

• 유형 : String

• 클릭 Multi

• 값: cq.social.scf

  • 대화 상자가 표시되며, + 각 항목 뒤에 다음 clientlib 범주를 추가합니다.

    • cq.ckeditor
    • cq.social.author.hbs.comments
    • cq.social.author.hbs.forum
    • cq.social.author.hbs.rating
    • cq.social.author.hbs.reviews
    • cq.social.author.hbs.voting
    • 확인​을 클릭합니다

• 클릭 모두 저장

방법은 다음과 같습니다 /etc/designs/an-scf-sandbox/clientlibs 은 이제 저장소에 표시됩니다.

PlayPage 템플릿에 Clientlib 포함

를 포함하지 않는 것 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를 포함합니다.

1. 사용 CRXDE Lite, 선택 /libs/foundation/components/page/headlibs.jsp

2. 마우스 오른쪽 단추를 클릭하고 선택 복사 (또는 도구 모음에서 복사 선택)

3. 선택 /apps/an-scf-sandbox/components/playpage

4. 마우스 오른쪽 단추를 클릭하고 선택 붙여넣기 (또는 도구 모음에서 붙여넣기 선택)

5. 두 번 클릭 headlibs.jsp 열다

6. 파일 끝에 다음 줄을 추가합니다
   <ui:includeClientLib categories="apps.an-scf-sandbox"/>

7. 클릭 모두 저장

<%@ 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"/>

브라우저에 웹 사이트를 로드하고 배경이 파란색 음영이 아닌지 확인합니다.

https://localhost:4502/content/an-scf-sandbox/en/play.html

지금까지 작업 저장

이 시점에는 최소 샌드박스가 존재하며 재생하는 동안 저장소가 손상되어 다시 시작하려는 경우 서버를 끄고 crx-quickstart/ 폴더의 이름을 변경하거나 삭제하고 서버를 켜고 저장된 이 패키지를 업로드 및 설치할 수 있으므로 가장 기본적인 단계를 반복하지 않아도 됩니다.

이 패키지는 샘플 페이지 만들기 어서 뛰어들어 게임을 시작하는 것을 기다릴 수있는 자습서!..

패키지를 만들려면 다음을 수행하십시오.

• CRXDE Lite에서 패키지 아이콘

• 클릭 패키지 만들기

  • 패키지 이름: an-scf-sandbox-minimal-pkg
  • 버전: 0.1
  • 그룹: leave as default
  • 확인​을 클릭합니다

• 클릭 편집

  • 선택 필터 탭

    • 클릭 필터 추가
    • 루트 경로: 다음으로 이동 /apps/an-scf-sandbox
    • 완료​를 클릭합니다
    • 클릭 필터 추가
    • 루트 경로: 다음으로 이동 /etc/designs/an-scf-sandbox
    • 완료​를 클릭합니다
    • 클릭 필터 추가
    • 루트 경로: 다음으로 이동 /content/an-scf-sandbox**
    • 완료​를 클릭합니다

  • 저장​을 클릭합니다

• 클릭 빌드

이제 다음을 선택할 수 있습니다. 다운로드 디스크에 저장하고 패키지 업로드 다른 위치에서 및 선택 자세히 > 복제 : 샌드박스를 localhost 게시 인스턴스로 푸시하여 샌드박스의 영역을 확장합니다.

Business.Adobe.com 리소스

Personalized Experiences Embedded Charts Responsive Forms Managed Cloud Headless Cms Digital Asset Management