스타일 시스템을 사용한 개발

Experience Manager의 스타일 시스템을 사용하여 개별 스타일을 구현하고 핵심 구성 요소를 다시 사용하는 방법을 알아봅니다. 이 자습서에서는 템플릿 편집기의 브랜드별 CSS 및 고급 정책 구성으로 코어 구성 요소를 확장하는 스타일 시스템 개발에 대해 설명합니다.

전제 조건

설정에 필요한 도구 및 지침을 검토합니다. 로컬 개발 환경.

또한 을 검토하는 것이 좋습니다 클라이언트 측 라이브러리 및 프런트 엔드 워크플로우 AEM 프로젝트에 빌드된 클라이언트 측 라이브러리의 기본 사항과 다양한 프런트 엔드 도구의 기본 사항을 이해하기 위한 자습서입니다.

스타터 프로젝트

노트

이전 장을 성공적으로 완료한 경우 프로젝트를 다시 사용하고 시작 프로젝트를 체크 아웃하는 단계를 건너뛸 수 있습니다.

자습서가 빌드하는 기본 라인 코드를 확인합니다.

  1. 다음을 확인하십시오 tutorial/style-system-start 분기 GitHub

    $ cd aem-guides-wknd
    $ git checkout tutorial/style-system-start
    
  2. Maven 기술을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.

    $ mvn clean install -PautoInstallSinglePackage
    
    노트

    AEM 6.5 또는 6.4를 사용하는 경우 classic 프로파일을 Maven 명령에 추가합니다.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    

항상 완료된 코드를 GitHub 또는 분기로 전환하여 로컬로 코드를 체크 아웃합니다 tutorial/style-system-solution.

목표

  1. 스타일 시스템을 사용하여 브랜드별 CSS를 AEM 코어 구성 요소에 적용하는 방법을 이해합니다.
  2. BEM 표기법 및 이 표기법을 사용하여 스타일을 신중하게 범위를 지정하는 방법에 대해 알아봅니다.
  3. 편집 가능한 템플릿에 고급 정책 구성을 적용합니다.

빌드할 내용

이 장에서는 스타일 시스템 기능 변형을 만들려면 제목텍스트 문서 페이지에서 사용되는 구성 요소입니다.

제목에 사용할 수 있는 스타일

제목 구성 요소에 사용할 수 있는 밑줄 스타일

배경

다음 스타일 시스템 개발자와 템플릿 편집기에서 구성 요소의 여러 시각적 변형을 만들 수 있습니다. 그런 다음 작성자가 페이지를 작성할 때 사용할 스타일을 결정할 수 있습니다. 낮은 코드 접근 방식으로 코어 구성 요소를 활용하는 동시에 자습서의 나머지 부분에서 스타일 시스템을 활용하여 몇 가지 고유한 스타일을 달성할 수 있습니다.

스타일 시스템을 사용하는 일반적인 아이디어는 작성자가 구성 요소가 표시되는 다양한 스타일을 선택할 수 있다는 것입니다. "스타일"은 구성 요소의 외부 div에 삽입되는 추가 CSS 클래스로 지원됩니다. 클라이언트 라이브러리에서 CSS 규칙은 구성 요소가 모양을 변경하도록 이러한 스타일 클래스를 기반으로 추가됩니다.

찾을 수 있습니다. 스타일 시스템에 대한 자세한 설명서는 여기에 있습니다.. 멋진 것도 있습니다 스타일 시스템 이해 기술 비디오.

밑줄 스타일 - 제목

다음 제목 구성 요소 이(가) 다음 프로젝트에 프록시되었습니다. /apps/wknd/components/title 의 일부로 ui.apps 모듈. 제목 요소의 기본 스타일(H1, H2, H3…)은 이미 ui.frontend 모듈.

다음 WKND 문서 디자인 밑줄이 있는 제목 구성 요소의 고유한 스타일을 포함합니다. 스타일 시스템을 사용하여 두 구성 요소를 만들거나 구성 요소 대화 상자를 수정하는 대신, 작성자가 밑줄 스타일을 추가할 수 있습니다.

밑줄 스타일 - 제목 구성 요소

제목 정책 추가

컨텐츠 작성자가 특정 구성 요소에 적용할 밑줄 스타일을 선택할 수 있도록 제목 구성 요소에 대한 새 정책을 추가합니다. 이 작업은 AEM 내의 템플릿 편집기를 사용하여 수행됩니다.

  1. 로 이동합니다 문서 페이지 다음 위치에 있는 템플릿: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html

  2. in 구조 모드, 기본 레이아웃 컨테이너​에서 을(를) 선택합니다. 정책 아이콘 옆에 있는 를 클릭합니다. 제목 아래에 나열된 구성 요소 허용된 구성 요소:

    제목 정책 구성

  3. 다음 값으로 제목 구성 요소에 대한 새 정책을 만듭니다.

    정책 제목 : ​ WKND 제목*

    속성 > 스타일 탭 > 새 스타일 추가

    밑줄 : cmp-title--underline

    제목에 대한 스타일 정책 구성

    클릭 완료 제목 정책에 대한 변경 사항을 저장합니다.

    노트

    cmp-title--underline 은 구성 요소 HTML 마크업의 외부 div에 있는 CSS 클래스를 채웁니다.

밑줄 스타일 적용

작성자는 특정 제목 구성 요소에 밑줄 스타일을 적용합니다.

  1. 로 이동합니다 라 스케이트보드카 AEM Sites 편집기의 문서: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

  2. in 편집 모드에서 제목 구성 요소를 선택합니다. 을(를) 클릭합니다. 페인트 브러시 아이콘을 클릭하고 밑줄 스타일:

    밑줄 스타일 적용

    노트

    이 시점에서는 underline 스타일이 구현되지 않았습니다. 다음 연습에서 이 스타일이 구현됩니다.

  3. 을(를) 클릭합니다. 페이지 정보 아이콘 > 게시됨으로 보기 AEM 편집기 외부에서 페이지를 검사합니다.

  4. 브라우저 개발자 도구를 사용하여 제목 구성 요소 주위에 있는 마크업에 CSS 클래스가 있는지 확인합니다 cmp-title--underline 외부 div에 적용됩니다.

    밑줄 클래스가 적용된 Div

    <div class="title cmp-title--underline">
        <div data-cmp-data-layer="{&quot;title-b6450e9cab&quot;:{&quot;@type&quot;:&quot;wknd/components/title&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-23T17:34:42Z&quot;,&quot;dc:title&quot;:&quot;Vans Off the Wall Skatepark&quot;}}"
        id="title-b6450e9cab" class="cmp-title">
            <h2 class="cmp-title__text">Vans Off the Wall Skatepark</h2>
        </div>
    </div>
    

밑줄 스타일 구현 - ui.frontend

다음으로, ui.frontend 프로젝트 모듈입니다. 와 함께 번들로 제공되는 웹 팩 개발 서버를 사용할 예정입니다 ui.frontend 스타일을 미리 볼 모듈 이전 AEM의 로컬 인스턴스에 배포.

  1. 시작 watch 내에서 처리 ui.frontend 모듈:

    $ cd ~/code/aem-guides-wknd/ui.frontend/
    $ npm run watch
    

    그러면 의 변경 사항을 모니터링하는 프로세스가 시작됩니다 ui.frontend 모듈 및 AEM 인스턴스에 변경 사항을 동기화합니다.

  2. IDE를 반환하고 파일을 엽니다. _title.scss 위치: ui.frontend/src/main/webpack/components/_title.scss.

  3. 타깃팅하는 새 규칙 소개 cmp-title--underline 클래스:

    /* Default Title Styles */
    .cmp-title {}
    .cmp-title__text {}
    .cmp-title__link {}
    
    /* Add Title Underline Style */
    .cmp-title--underline {
        .cmp-title__text {
            &:after {
            display: block;
                width: 84px;
                padding-top: 8px;
                content: '';
                border-bottom: 2px solid $brand-primary;
            }
        }
    }
    
    노트

    스타일을 항상 대상 구성 요소에 밀접하게 범위 지정하는 것이 가장 좋습니다. 따라서 추가 스타일이 페이지의 다른 영역에 영향을 주지 않습니다.

    모든 핵심 구성 요소는 BEM 표기법. 구성 요소에 대한 기본 스타일을 만들 때 외부 CSS 클래스를 타깃팅하는 것이 가장 좋습니다. 또 다른 우수 사례는 HTML 요소가 아닌 코어 구성 요소 BEM 표기법으로 지정된 클래스 이름을 타깃팅하는 것입니다.

  4. 브라우저 및 AEM 페이지로 돌아갑니다. 추가된 밑줄 스타일이 표시됩니다.

    웹 팩 개발 서버에 표시되는 밑줄 스타일

  5. AEM 편집기에서 이제 를 켜거나 끌 수 있습니다 밑줄 스타일을 지정하고 시각적으로 반영된 변경 사항을 확인합니다.

견적 블록 스타일 - 텍스트

다음으로 비슷한 단계를 반복하여 고유 스타일을 텍스트 구성 요소. 텍스트 구성 요소가 /apps/wknd/components/text 의 일부로 ui.apps 모듈. 단락 요소의 기본 스타일이 ui.frontend.

다음 WKND 문서 디자인 따옴표 블록이 있는 텍스트 구성 요소의 고유한 스타일을 포함합니다.

견적 블록 스타일 - 텍스트 구성 요소

텍스트 정책 추가

그런 다음 텍스트 구성 요소에 대한 새 정책을 추가합니다.

  1. 로 이동합니다 문서 페이지 템플릿 위치: http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html.

  2. in 구조 모드, 기본 레이아웃 컨테이너​에서 을(를) 선택합니다. 정책 아이콘 옆에 있는 를 클릭합니다. 텍스트 아래에 나열된 구성 요소 허용된 구성 요소:

    텍스트 정책 구성

  3. 텍스트 구성 요소 정책을 다음 값으로 업데이트합니다.

    정책 제목 : ​ 컨텐츠 텍스트*

    Plugins > 단락 스타일 > 단락 스타일 활성화

    스타일 탭 > 새 스타일 추가

    견적 블록 : cmp-text--quote

    텍스트 구성 요소 정책

    텍스트 구성 요소 정책 2

    클릭 완료 텍스트 정책에 대한 변경 사항을 저장하려면

견적 블록 스타일 적용

  1. 로 이동합니다 라 스케이트보드카 AEM Sites 편집기의 문서: http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html

  2. in 편집 모드에서 텍스트 구성 요소를 선택합니다. 견적 요소를 포함하도록 구성 요소를 편집합니다.

    텍스트 구성 요소 구성

  3. 텍스트 구성 요소를 선택하고 페인트 브러시 아이콘을 클릭하고 견적 블록 스타일:

    견적 블록 스타일 적용

  4. 브라우저의 개발자 도구를 사용하여 마크업을 검사합니다. 클래스 이름이 표시됩니다 cmp-text--quote 가 구성 요소의 outter div에 추가되었습니다.

    <!-- Quote Block style class added -->
    <div class="text cmp-text--quote">
        <div data-cmp-data-layer="{&quot;text-60910f4b8d&quot;:{&quot;@type&quot;:&quot;wknd/components/text&quot;,&quot;repo:modifyDate&quot;:&quot;2022-02-24T00:55:26Z&quot;,&quot;xdm:text&quot;:&quot;<blockquote>&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;quot;There is no better place to shred then Los Angeles&amp;quot;</blockquote>\r\n<p>- Jacob Wester, Pro Skater</p>\r\n&quot;}}" id="text-60910f4b8d" class="cmp-text">
            <blockquote>&nbsp; &nbsp; &nbsp;"There is no better place to shred then Los Angeles"</blockquote>
            <p>- Jacob Wester, Pro Skater</p>
        </div>
    </div>
    

견적 블록 스타일 구현 - ui.frontend

다음으로, ui.frontend 프로젝트 모듈입니다.

  1. 아직 실행 중이 아니면 watch 내에서 처리 ui.frontend 모듈:

    $ npm run watch
    
  2. 파일 업데이트 text.scss 위치: ui.frontend/src/main/webpack/components/_text.scss:

    /* Default text style */
    .cmp-text {}
    .cmp-text__paragraph {}
    
    /* WKND Text Quote style */
    .cmp-text--quote {
        .cmp-text {
            background-color: $brand-third;
            margin: 1em 0em;
            padding: 1em;
    
            blockquote {
                border: none;
                font-size: $font-size-large;
                font-family: $font-family-serif;
                padding: 14px 14px;
                margin: 0;
                margin-bottom: 0.5em;
    
                &:after {
                    border-bottom: 2px solid $brand-primary; /*yellow border */
                    content: '';
                    display: block;
                    position: relative;
                    top: 0.25em;
                    width: 80px;
                }
            }
            p {
                font-family:  $font-family-serif;
            }
        }
    }
    
    주의

    이 경우 원시 HTML 요소는 스타일에 의해 타깃팅됩니다. 텍스트 구성 요소가 컨텐츠 작성자를 위한 리치 텍스트 편집기를 제공하기 때문입니다. RTE 컨텐츠에 대해 바로 스타일을 만드는 작업은 신중하게 수행해야 하며 스타일을 보다 명확하게 범위가 지정하는 것이 더 중요합니다.

  3. 다시 브라우저로 돌아오면 Quote 블록 스타일이 추가된 것이 표시됩니다.

    표시된 따옴표 블록 스타일

  4. 웹 팩 개발 서버를 중지합니다.

고정 폭 - 컨테이너(보너스)

컨테이너 구성 요소는 문서 페이지 템플릿의 기본 구조를 만들고 컨텐츠 작성자가 페이지에 컨텐츠를 추가할 수 있는 놓기 영역을 제공하는 데 사용되었습니다. 컨테이너는 스타일 시스템을 활용할 수도 있으며 컨텐츠 작성자에게 레이아웃 디자인을 위한 더 많은 옵션을 제공할 수 있습니다.

다음 기본 컨테이너 기사 페이지 템플릿의 두 개의 작성 가능한 컨테이너가 포함되어 있고 너비가 고정되어 있습니다.

기본 컨테이너

문서 페이지 템플릿의 기본 컨테이너.

의 정책 기본 컨테이너 기본 요소를 로 설정합니다. main:

기본 컨테이너 정책

을 만드는 CSS 기본 컨테이너ui.frontend 모듈 ui.frontend/src/main/webpack/site/styles/container_main.scss :

main.container {
    padding: .5em 1em;
    max-width: $max-content-width;
    float: unset!important;
    margin: 0 auto!important;
    clear: both!important;
}

타겟팅 대신 main HTML 요소인 스타일 시스템을 사용하여 고정 폭 컨테이너 정책의 일부로 스타일을 지정합니다. 스타일 시스템은 사용자에게 전환 옵션을 제공할 수 있습니다 고정 폭유체 너비 컨테이너.

  1. 보너스 챌린지 - 이전 연습에서 배운 단원을 사용하고 스타일 시스템을 사용하여 고정 폭유체 너비 컨테이너 구성 요소의 스타일.

축하합니다!

축하합니다. 문서 페이지는 거의 완전히 스타일이 지정되었으며 AEM 스타일 시스템을 사용하여 실무 경험을 얻게 되었습니다.

다음 단계

을(를) 만들기 위한 단계를 끝까지 알아봅니다. 사용자 지정 AEM 구성 요소 는 대화 상자에서 작성된 컨텐츠를 표시하고 Sling 모델 개발을 통해 구성 요소의 HTL을 채우는 비즈니스 로직을 캡슐화합니다.

에서 완성된 코드 보기 GitHub 코드를 Git Brach에서 로컬로 검토하고 배포합니다 tutorial/style-system-solution.

  1. 복제 github.com/adobe/aem-wknd-guides 저장소.
  2. 다음을 확인하십시오 tutorial/style-system-solution 분기

이 페이지에서는