스타일 AEM CIF 핵심 구성 요소 style-aem-cif-core-components

다음 git 명령을 실행하여 프로젝트를 복제합니다.

$ git clone git@github.com:adobe/aem-cif-guides-venia.git

프로젝트를 빌드하여 AEM의 로컬 인스턴스에 배포합니다.

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

AEM 인스턴스를 Adobe Commerce 인스턴스에 연결하는 데 필요한 OSGi 구성을 추가하거나 새로 만든 프로젝트에 구성을 추가합니다.

이 시점에서 Adobe Commerce 인스턴스에 연결된 상점 첫 화면의 작동 버전이 있어야 합니다. http://localhost:4502/editor.html/content/venia/us/en.html에서 US > Home 페이지로 이동합니다.

당신은 상점이 현재 베니아 테마를 사용하고 있다는 것을 볼 수 있습니다. 상점 첫 화면의 메인 메뉴를 확장하면 Adobe Commerce에 대한 연결이 작동하고 있음을 나타내는 다양한 카테고리가 표시됩니다.

ui.frontend 모듈로 이동하여 확장하고 폴더 계층 구조를 ui.frontend/src/main/styles/commerce(으)로 확장합니다.

폴더 아래에 Sass(.scss) 파일이 여러 개 있습니다. 각 Commerce 구성 요소에 대한 Commerce 고유의 스타일입니다.

_productteaser.scss 파일을 엽니다.

.item__image 규칙을 업데이트하고 테두리 규칙을 수정합니다.

.item__image {
    border: #ea00ff 8px solid; /* <-- modify this rule */
    display: block;
    grid-area: main;
    height: auto;
    opacity: 1;
    transition-duration: 512ms;
    transition-property: opacity, visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    width: 100%;
}

위의 규칙은 제품 티저 구성 요소에 굵은 분홍색 테두리를 추가해야 합니다.

새 터미널 창을 열고 ui.frontend 폴더로 이동합니다.

$ cd <project-location>/aem-cif-guides-venia/ui.frontend

다음 Maven 명령을 실행합니다.

$ mvn clean install
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  29.497 s
[INFO] Finished at: 2020-08-25T14:30:44-07:00
[INFO] ------------------------------------------------------------------------

Inspect 터미널 출력입니다. Maven 명령이 npm run build을(를) 포함한 여러 NPM 스크립트를 실행했음을 알 수 있습니다. npm run build 명령은 package.json 파일에 정의되어 있으며 Webpack 프로젝트를 컴파일하고 클라이언트 라이브러리 생성을 트리거하는 효과가 있습니다.

ui.frontend/dist/clientlib-site/site.css 파일을 Inspect:

이 파일은 프로젝트에 있는 모든 Sass 파일의 컴파일되고 축소된 버전입니다.

파일 ui.frontend/clientlib.config.js을(를) Inspect 합니다.

/* clientlib.config.js*/
...
// Config for `aem-clientlib-generator`
module.exports = {
    context: BUILD_DIR,
    clientLibRoot: CLIENTLIB_DIR,
    libs: [
        {
            ...libsBaseConfig,
            name: 'clientlib-site',
            categories: ['venia.site'],
            dependencies: ['venia.dependencies', 'aem-core-cif-react-components'],
            assets: {
...

aem-clientlib-generator에 대한 구성 파일로, 컴파일된 CSS 및 JavaScript이 AEM 클라이언트 라이브러리로 변환되는 위치와 방법을 결정합니다.

ui.apps 모듈에서 ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css 파일을 검사합니다.

site.css 파일을 ui.apps 프로젝트에 복사합니다. 이제 범주가 venia.site인 clientlib-site 클라이언트 라이브러리의 일부입니다. 파일이 ui.apps 모듈에 포함되면 AEM에 배포할 수 있습니다.

다음으로 프로젝트에서 생성된 다른 클라이언트 라이브러리를 검사합니다.

이러한 클라이언트 라이브러리는 ui.frontend 모듈에서 관리되지 않습니다. 대신 이러한 클라이언트 라이브러리에는 Adobe에서 제공하는 CSS 및 JavaScript 종속성이 포함됩니다. 이러한 클라이언트 라이브러리에 대한 정의는 각 폴더 아래의 .content.xml 파일에 있습니다.

clientlib-base - AEM 핵심 구성 요소에서 필요한 종속성을 임베드하는 빈 클라이언트 라이브러리입니다. 범주는 venia.base입니다.

clientlib-cif - AEM CIF 핵심 구성 요소의 필수 종속성을 임베드하는 빈 클라이언트 라이브러리이기도 합니다. 범주는 venia.cif입니다.

clientlib-grid - AEM의 응답형 격자 기능을 활성화하는 데 필요한 CSS가 여기에 포함됩니다. AEM 그리드를 사용하면 AEM 편집기에서 레이아웃 모드가 활성화되고 콘텐츠 작성자가 구성 요소의 크기를 조정할 수 있습니다. 범주는 venia.grid이며 venia.base 라이브러리에 포함되어 있습니다.

ui.apps/src/main/content/jcr_root/apps/venia/components/page 아래의 customheaderlibs.html 및 customfooterlibs.html 파일을 Inspect:

이러한 스크립트에는 모든 페이지의 일부로 venia.base 및 venia.cif 라이브러리가 포함됩니다.

터미널에서 AEM의 로컬 인스턴스에 전체 프로젝트를 빌드 및 배포합니다.

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

새 브라우저 탭을 열고 사이트의 홈 페이지(으)로 이동합니다. http://localhost:4502/editor.html/content/venia/us/en.html.

편집 모드에서 자산 파인더(측면 레일)를 확장합니다. 자산 필터를 제품(으)로 전환합니다.

새 제품을 메인 레이아웃 컨테이너의 홈 페이지로 끌어다 놓습니다.

이제 제품 티저에 이전에 만든 CSS 규칙 변경 사항을 기반으로 하는 밝은 분홍색 테두리가 표시됩니다.

사이트의 홈 페이지(으)로 이동합니다. http://localhost:4502/editor.html/content/venia/us/en.html.

페이지 정보 메뉴를 선택하고 게시됨으로 보기 ​를 클릭합니다.

그러면 게시된 사이트에 나타나는 대로, AEM 작성자 JavaScript이 로드되지 않은 페이지가 열립니다. URL에 쿼리 매개 변수 ?wcmmode=disabled이(가) 추가되었습니다. CSS와 JavaScript을 개발할 때 이 매개 변수를 사용하여 AEM 작성자의 작업 없이 페이지를 간소화하는 것이 좋습니다.

페이지 소스를 보면 여러 클라이언트 라이브러리가 포함되어 있음을 식별할 수 있습니다.

<!DOCTYPE html>
<html lang="en-US">
<head>
    ...
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-site.min.css" type="text/css">
</head>
...
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.js"></script>
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-base.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/core/cif/clientlibs/common.min.js"></script>
<script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-cif.min.js"></script>
</body>
</html>

클라이언트 라이브러리는 페이지에 전달될 때 접두사가 /etc.clientlibs이고 /apps 또는 /libs에서 중요한 내용이 노출되지 않도록 프록시를 통해 제공됩니다.

알림 venia/clientlibs/clientlib-site.min.css 및 venia/clientlibs/clientlib-site.min.js. ui.frontend 모듈에서 파생된 컴파일된 CSS 및 JavaScript 파일입니다.

AEM 편집기 http://localhost:4502/editor.html/content/venia/us/en.html 내에서 사이트의 홈 페이지(으)로 이동합니다.

페이지 정보 메뉴를 선택하고 템플릿 편집 ​을 클릭합니다.

Home 페이지의 기반이 되는 랜딩 페이지 템플릿이 열립니다.

왼쪽 상단 모서리에서 페이지 정보 아이콘을 선택하고 페이지 정책 ​을 클릭합니다.

랜딩 페이지 템플릿에 대한 페이지 정책이 열립니다.

오른쪽에는 이 템플릿을 사용하는 모든 페이지에 포함될 클라이언트 라이브러리 범주 목록이 표시됩니다.

• venia.dependencies - venia.site이(가) 종속된 공급업체 라이브러리를 제공합니다.
• venia.site - ui.frontend 모듈이 생성하는 clientlib-site의 범주입니다.

다른 템플릿에서는 콘텐츠 페이지, 랜딩 페이지 등의 동일한 정책을 사용합니다. 동일한 정책을 재사용하여 모든 페이지에 동일한 클라이언트 라이브러리가 포함되도록 할 수 있습니다.

템플릿 및 페이지 정책을 사용하여 클라이언트 라이브러리 포함을 관리할 수 있는 이점은 템플릿별로 정책을 변경할 수 있다는 것입니다. 예를 들어 동일한 AEM 인스턴스 내에서 두 개의 다른 브랜드를 관리하는 것일 수 있습니다. 각 브랜드에는 고유한 스타일 또는 테마 ​가 있지만 기본 라이브러리와 코드는 동일합니다. 또 다른 예로, 특정 페이지에만 표시하려는 클라이언트 라이브러리가 더 큰 경우 해당 템플릿에 대해서만 고유한 페이지 정책을 만들 수 있습니다.

브라우저에서 홈 페이지로 이동하고 게시됨으로 보기: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled합니다.

페이지의 소스 및 페이지의 원시 HTML을 복사 ​합니다.

ui.frontend 모듈 아래에서 선택한 IDE로 돌아가서 ui.frontend/src/main/static/index.html 파일을 엽니다.

이전 단계에서 복사한 HTML index.html의 내용을 덮어쓰고 붙여넣기 ​합니다.

clientlib-site.min.css, clientlib-site.min.js 및 제거 ​에 대한 포함 항목을 찾습니다.

<head>
    <!-- remove this link -->
    <link rel="stylesheet" href="/etc.clientlibs/venia/clientlibs/clientlib-base.min.css" type="text/css">
    ...
</head>
<body>
    ...
     <!-- remove this link -->
    <script type="text/javascript" src="/etc.clientlibs/venia/clientlibs/clientlib-site.min.js"></script>
</body>

이러한 매개 변수는 ui.frontend 모듈에서 생성된 CSS 및 JavaScript의 컴파일된 버전을 나타내므로 제거됩니다. 다른 클라이언트 라이브러리는 실행 중인 AEM 인스턴스에서 프록시되므로 그대로 둡니다.

새 터미널 창을 열고 ui.frontend 폴더로 이동합니다. npm start 명령 실행:

$ cd ui.frontend
$ npm start

http://localhost:8080/에서 webpack-dev-server를 시작합니다.

AEM의 로그인 인스턴스와 동일한 브라우저를 사용하는 새 탭에서 http://localhost:8080/(으)로 이동합니다. webpack-dev-server를 통해 Venia 홈 페이지가 표시됩니다.

Webpack-dev-server를 실행 상태로 둡니다. 다음 연습에서 사용됩니다.

ui.frontend 모듈에서 ui.frontend/src/main/styles/commerce/_productteaser.scss에 _productteaser.scss 파일을 다시 여십시오.

제품 티저 테두리를 다음과 같이 변경합니다.

    .item__image {
-       border: #ea00ff 8px solid;
+       border-bottom: 1px solid #c0c0c0;
        display: block;
        grid-area: main;
        height: auto;
        opacity: 1;
        transition-duration: 512ms;
        transition-property: opacity, visibility;
        transition-timing-function: ease-out;
        visibility: visible;
        width: 100%;
    }

변경 사항을 저장하면 Webpack-dev-server가 자동으로 새 스타일로 새로 고침됩니다.

그림자를 추가하고 제품 티저에 둥근 모서리를 포함합니다.

 .item__root {
     position: relative;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     border-radius: 5px;
     float: left;
     margin-left: 12px;
     margin-right: 12px;
}

.item__root:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

티저 하단에 표시되도록 제품 이름을 업데이트하고 텍스트 색상을 수정합니다.

.item__name {
    color: #000;
    display: block;
    float: left;
    font-size: 22px;
    font-weight: 900;
    line-height: 1em;
    padding: 0.75em;
    text-transform: uppercase;
    width: 75%;
}

티저의 아래쪽에도 나타나도록 제품 가격을 업데이트하고 텍스트 색상을 수정합니다.

.price {
    color: #000;
    display: block;
    float: left;
    font-size: 18px;
    font-weight: 900;
    padding: 0.75em;
    padding-bottom: 2em;
    width: 25%;

    ...

992px ​보다 작은 화면에서 이름과 가격을 스택하려면 맨 아래에 있는 미디어 쿼리를 업데이트하십시오.

@media (max-width: 992px) {
    .productteaser .item__name {
        font-size: 18px;
        width: 100%;
    }
    .productteaser .item__price {
        font-size: 14px;
        width: 100%;
    }
}

이제 webpack-dev-server에 반영된 카드 스타일이 표시됩니다.

그러나 변경 사항이 아직 AEM에 배포되지 않았습니다. 솔루션 파일을 여기에서 다운로드할 수 있습니다.

명령줄 터미널에서 Maven 기술을 사용하여 AEM에 업데이트를 배포합니다.

$ cd aem-cif-guides-venia/
$ mvn clean install -PautoInstallPackage,cloud

브라우저로 돌아가서 홈 페이지를 새로 고칩니다. http://localhost:4502/editor.html/content/venia/us/en.html. 업데이트된 제품 티저 스타일이 적용된 것이 표시됩니다.

추가 제품 티저를 추가하여 실험합니다. 여러 티저를 한 행에 표시하도록 구성 요소의 너비와 오프셋을 변경하려면 레이아웃 모드 를 사용합니다.