페이지 작성 사용자 정의 customizing-page-authoring

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:
개발

작성 대상:

개발자

CAUTION

이 문서는 최신 터치 지원 UI에서 페이지 작성을 사용자 지정하는 방법에 대해 설명하며, 클래식 UI에는 적용되지 않습니다.

Adobe Experience Manager(AEM)에서는 작성 인스턴스의 페이지 작성 기능(및 콘솔)을 사용자 지정할 수 있는 다양한 메커니즘을 제공합니다.

Clientlibs

Clientlibs를 사용하면 기본 구현을 확장하여 새로운 기능을 구현하는 동시에 표준 함수, 개체 및 메서드를 재사용할 수 있습니다. 사용자 정의할 때 /apps. 아래에서 자체적인 clientlib을 만들 수 있습니다. 새 clientlib은 다음을 충족해야 합니다.
- 제작 clientlib cq.authoring.editor.sites.page에 따라 다릅니다.
- 해당 cq.authoring.editor.sites.page.hook 범주에 속해야 합니다.
오버레이

오버레이는 노드 정의를 기반으로 하며, 이를 통해 표준 기능(/libs의)을 사용자 지정된 기능(/apps의)과 오버레이할 수 있습니다. 오버레이를 만들 때 sling 리소스 병합에서 상속을 허용하므로 원본의 1:1 복사본이 필요하지 않습니다.

NOTE

자세한 내용은 JS 설명서 집합을 참조하세요.

여러 가지 방법으로 AEM 인스턴스의 페이지 작성 기능을 확장할 수 있습니다. 선택 내용은 아래에 설명되어 있습니다(높은 수준).

NOTE

자세한 내용은 다음을 참조하십시오.

clientlibs을(를) 사용하고 만드는 중입니다.
오버레이를 사용하고 만드는 중입니다.
Granite
페이지 작성에 사용되는 구조적 영역에 대한 자세한 내용은 AEM 터치 사용 UI의 구조를 참조하십시오.

CAUTION

/libs 경로에서 아무 것도 변경하지 마십시오.

그 이유는 /libs의 콘텐츠를 다음에 인스턴스를 업그레이드할 때 덮어쓰기 때문입니다(핫픽스 또는 기능 팩을 적용할 때 덮어쓸 수도 있음).

구성 및 기타 변경에 권장되는 방법은 다음과 같습니다.

/apps 아래에 필요한 항목(즉, /libs에 존재하는 항목)을 다시 만듭니다.
/apps 내에서 변경

새 레이어(모드) 추가 add-new-layer-mode

페이지를 편집할 때 다양한 모드를 사용할 수 있습니다. 이러한 모드는 레이어를 사용하여 구현됩니다. 이를 통해 동일한 페이지 콘텐츠에 대해 서로 다른 유형의 기능에 액세스할 수 있습니다. 표준 레이어는 편집, 미리보기, 주석 달기, 개발자 및 타겟팅입니다.

레이어 예: Live Copy 상태 layer-example-live-copy-status

표준 AEM 인스턴스는 MSM 레이어를 제공합니다. 이는 다중 사이트 관리와 관련된 데이터에 액세스하며 레이어에서 이러한 데이터를 강조 표시합니다.

작동 중인 항목을 보려면 We.Retail 언어 사본 페이지(또는 다른 Live Copy 페이지)를 편집하고 Live Copy 상태 모드를 선택할 수 있습니다.

다음 위치에서 MSM 레이어 정의(참조용)를 확인할 수 있습니다.

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

코드 샘플 code-sample

MSM 보기의 새 레이어인 레이어(모드)를 만드는 방법을 보여주는 샘플 패키지입니다.

GITHUB의 코드

GitHub에서 이 페이지의 코드를 확인할 수 있습니다

GitHub에서 aem 작성-새 레이어 모드 프로젝트 열기
프로젝트를 ZIP 파일(으)로 다운로드

자산 브라우저에 새 선택 카테고리 추가 add-new-selection-category-to-asset-browser

자산 브라우저에는 다양한 유형/카테고리(예: 이미지 및 문서)의 자산이 표시됩니다. 자산을 이러한 자산 카테고리별로 필터링할 수도 있습니다.

코드 샘플 code-sample-1

aem-authoring-extension-assetfinder-flickr는 자산 파인더에 그룹을 추가하는 방법을 보여 주는 샘플 패키지입니다. 이 예는 Flickr의 공개 스트림에 연결하며 이러한 스트림을 측면 패널에 표시합니다.

GITHUB의 코드

GitHub에서 이 페이지의 코드를 확인할 수 있습니다

GitHub에서 aem-authoring-extension-assetfinder-flickr 프로젝트 열기
프로젝트를 ZIP 파일(으)로 다운로드

리소스 필터링 filtering-resources

페이지를 작성할 때 사용자는 종종 리소스(예: 페이지, 구성 요소 및 에셋)에서 선택해야 합니다. 예를 들어 작성자가 항목을 선택해야 하는 목록 형식을 취할 수 있습니다.

목록을 적당한 크기로 유지하고 사용 사례와도 관련되게 하려면 필터를 사용자 정의 조건자 형태로 구현할 수 있습니다. 예를 들어 사용자가 특정 리소스에 대한 경로를 선택할 수 있도록 pathbrowser Granite 구성 요소를 사용하는 경우 표시되는 경로는 다음과 같은 방법으로 필터링될 수 있습니다.

com.day.cq.commons.predicate.AbstractNodePredicate 상호 작용을 구현하여 사용자 정의 조건자를 구현합니다.
조건자의 이름을 지정하고, pathbrowser를 사용할 때 해당 이름을 참조합니다.

사용자 지정 술어 만들기에 대한 자세한 내용은 Query Builder의 사용자 지정 술어 평가기 구현을 참조하십시오.

NOTE

com.day.cq.commons.predicate.AbstractNodePredicate 인터페이스를 구현하여 사용자 지정 술어를 구현하는 작업도 클래식 UI에서 작동합니다.

클래식 UI에서 사용자 지정 조건자를 구현하는 예는 이 기술 자료 문서을 참조하십시오.

각 구성 요소(일반적으로)에는 해당 구성 요소에서 수행할 수 있는 작업 범위에 대한 액세스를 제공하는 도구 모음이 있습니다.

코드 샘플 code-sample-2

aem-authoring-extension-toolbar-screenshot은 구성 요소를 렌더링하는 사용자 정의 도구 모음 작업을 만드는 방법을 보여 주는 샘플 패키지입니다.

GITHUB의 코드

GitHub에서 이 페이지의 코드를 확인할 수 있습니다

GitHub에서 aem 작성-확장 도구 모음-스크린샷 프로젝트 열기
프로젝트를 ZIP 파일(으)로 다운로드

새 바로 편집기 추가 add-new-in-place-editor

표준 바로 편집기 standard-in-place-editor

표준 AEM 설치에서

/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

사용 가능한 다양한 편집기에 대한 정의를 보관합니다.
편집기와 이를 사용할 수 있는 각 리소스 유형(구성 요소에서와 같이) 간에는 연결이 있습니다.
- cq:inplaceEditing
  
  예:
  - /libs/foundation/components/text/cq:editConfig
  - /libs/foundation/components/image/cq:editConfig
    - 속성: editorType
      
      해당 구성 요소에 대해 바로 편집이 트리거될 때 사용되는 인라인 편집기 유형을 정의합니다. 예를 들면 text, textimage, image, title과 같습니다.

구성을 포함하는 config 노드와 필요한 플러그인 구성 세부 정보를 포함하는 plugin 노드를 사용하여 편집기의 추가 구성 세부 정보를 구성할 수 있습니다.

다음은 이미지 구성 요소의 이미지 자르기 플러그인에 대한 종횡비를 정의하는 예입니다. 제한된 화면 크기의 잠재적 때문에 자르기 종횡비는 전체 화면 편집기로 이동되었으며 해당 편집기에서만 볼 수 있습니다.

code language-xml

code language-xml
`<cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true" editorType="image"> <config jcr:primaryType="nt:unstructured"> <plugins jcr:primaryType="nt:unstructured"> <crop jcr:primaryType="nt:unstructured"> <aspectRatios jcr:primaryType="nt:unstructured"> <_x0031_6-10 jcr:primaryType="nt:unstructured" name="16 : 10" ratio="0.625"/> </aspectRatios> </crop> </plugins> </config> </cq:inplaceEditing>`

<cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="image">
        <config jcr:primaryType="nt:unstructured">
            <plugins jcr:primaryType="nt:unstructured">
                <crop jcr:primaryType="nt:unstructured">
                    <aspectRatios jcr:primaryType="nt:unstructured">
                        <_x0031_6-10
                            jcr:primaryType="nt:unstructured"
                            name="16 : 10"
                            ratio="0.625"/>
                    </aspectRatios>
                </crop>
            </plugins>
        </config>
</cq:inplaceEditing>

note caution
CAUTION
`ratio` 속성으로 설정되는 AEM 자르기 비율은 높이/폭 으로 정의됩니다. 이는 종래의 폭/높이 정의와 다르며, 레거시 호환성을 위해 수행됩니다. `name` 속성을 명확히 정의한 경우 이 이름이 UI에 표시되므로 작성 사용자가 차이를 알지 못합니다.

새 바로 편집기 만들기 creating-a-new-in-place-editor

새 바로 편집기를 구현하려면(clientlib 내에서) 다음 작업을 수행하십시오.

NOTE

예를 들어 다음을 참조하십시오.
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

다음을 구현합니다.
- setUp
- tearDown
다음과 같이 편집기를 등록합니다(생성자 포함).
- editor.register
편집기와 이를 사용할 수 있는 모든 리소스 유형(구성 요소에서와 같이) 간의 연결을 제공합니다.

새 바로 편집기를 만들기 위한 코드 샘플 code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor는 AEM에서 바로 편집기를 만드는 방법을 보여 주는 샘플 패키지입니다.

GITHUB의 코드

GitHub에서 이 페이지의 코드를 확인할 수 있습니다

GitHub에서 aem-authoring-extension-inplace-editor 프로젝트 열기
프로젝트를 ZIP 파일(으)로 다운로드

여러 즉석 편집기 구성 configuring-multiple-in-place-editors

구성 요소에 여러 개의 즉석 편집기가 있도록 구성할 수 있습니다. 여러 즉석 편집기가 구성된 경우 적절한 콘텐츠를 선택하고 적절한 편집기를 열 수 있습니다. 자세한 내용은 여러 즉석 편집기 구성 설명서를 참조하십시오.

새 페이지 작업 추가 add-a-new-page-action

페이지 도구 모음에 새 페이지 작업을 추가하려면(예: 사이트로 돌아가기(콘솔) 작업)

코드 샘플 code-sample-3

aem-authoring-extension-header-backtosites는 사이트 콘솔로 돌아가기 위한 사용자 정의 헤더 표시줄 작업을 만드는 방법을 보여 주는 샘플 패키지입니다.

GITHUB의 코드

GitHub에서 이 페이지의 코드를 확인할 수 있습니다

GitHub에서 aem-authoring-extension-header-backtosites 프로젝트 열기
프로젝트를 ZIP 파일(으)로 다운로드

활성화 요청 워크플로 사용자 정의 customizing-the-request-for-activation-workflow

즉시 사용 가능한 워크플로인 활성화 요청 은 다음과 같이 작동합니다.

콘텐츠 작성자에게 적절한 복제 권한이 없지만 DAM 사용자 및 작성자의 멤버십이 있는 경우 적절한 메뉴에 자동으로 표시됩니다.
이외에는 복제 권한이 제거되었기 때문에 아무것도 표시되지 않습니다.

이러한 활성화에 대해 사용자 정의 동작을 만들려면 활성화 요청 워크플로를 오버레이할 수 있습니다.

/apps 오버레이에서 사이트 마법사:

/libs/wcm/core/content/common/managepublicationwizard

note note
NOTE
이 인스턴스 자체는 의 일반 인스턴스를 무시합니다.
`/libs/cq/gui/content/common/managepublicationwizard`

필요에 따라 워크플로 모델 및 관련 구성/스크립트를 업데이트합니다.
모든 관련 페이지에 대한 모든 적절한 사용자로부터 replicate 작업에 대한 권한을 제거하십시오. 사용자가 페이지를 게시(또는 복제)하려고 할 때 이 워크플로우가 기본 작업으로 트리거되도록 하십시오.

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2

페이지 작성 사용자 정의 customizing-page-authoring

새 레이어(모드) 추가 add-new-layer-mode

레이어 예: Live Copy 상태 layer-example-live-copy-status

코드 샘플 code-sample

자산 브라우저에 새 선택 카테고리 추가 add-new-selection-category-to-asset-browser

코드 샘플 code-sample-1

리소스 필터링 filtering-resources

구성 요소 도구 모음에 새 작업 추가 add-new-action-to-a-component-toolbar

코드 샘플 code-sample-2

새 바로 편집기 추가 add-new-in-place-editor

표준 바로 편집기 standard-in-place-editor

새 바로 편집기 만들기 creating-a-new-in-place-editor

새 바로 편집기를 만들기 위한 코드 샘플 code-sample-for-creating-a-new-in-place-editor

여러 즉석 편집기 구성 configuring-multiple-in-place-editors

새 페이지 작업 추가 add-a-new-page-action

코드 샘플 code-sample-3

활성화 요청 워크플로 사용자 정의 customizing-the-request-for-activation-workflow