樣式AEM CIF核心元件

CIF Venia Project是使用CIF核心元件的參考代碼基。 在本教學課程中,您將檢查Venia參考專案,並了解AEM CIF核心元件所使用的CSS和JavaScript如何組織。 您也將使用CSS建立新樣式,以更新​Product Teaser​元件的預設樣式。

秘訣

開始您自己的商務實作時,請使用AEM專案原型

您要建置的

在本教學課程中,將針對類似卡片的產品預告元件實作新樣式。 本教學課程中的課程可套用至其他CIF核心元件。

您將建置的

必備條件

完成本教學課程需要本機開發環境。 這包括已設定並連線至AEM執行個體的執行中執行個體。 檢閱使用AEM設定本機開發的需求和步驟。

克隆Venia項目

我們將複製Venia Project,然後覆寫預設樣式。

注意

歡迎使用現有專案 (根據包含CIF的AEM專案原型),並略過本節。

  1. 執行下列git命令以複製專案:

    $ git clone git@github.com:adobe/aem-cif-guides-venia.git
    
  2. 建立專案並部署至AEM的本機執行個體:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. 新增必要的OSGi設定,將您的AEM例項連線至Magento例項,或將設定新增至新建立的專案。

  4. 此時,您應該有連接至Magento例項的店面工作版本。 導覽至US > Home頁面,網址為:http://localhost:4502/editor.html/content/venia/us/en.html

    您應該會看到店面目前使用Venia主題。 展開店面的「主菜單」時,您應該會看到各種類別,表明連接Magento正在工作。

    Venia主題配置的店面

客戶端庫和ui.frontend模組

負責轉譯店面主題/樣式的CSS和JavaScript在AEM中由用戶端程式庫或clientlibs管理。 用戶端程式庫提供一種機制,可在專案的程式碼中組織CSS和Javascript,然後傳送至頁面。

借由新增和覆寫由這些用戶端程式庫管理的CSS,可將品牌特定樣式套用至AEM CIF核心元件。 了解用戶端程式庫的結構化及包含在頁面上的方式至關重要。

ui.frontend是專用的webpack專案,可管理專案的所有前端資產。 這可讓前端開發人員使用任意數量的語言和技術,例如TypeScriptSass等。

ui.frontend模組也是Maven模組,通過使用aem-clientlib-generator的NPM模組與較大的項目整合。 在建置期間,aem-clientlib-generator會將編譯的CSS和JavaScript檔案複製到ui.apps模組中的用戶端程式庫。

ui.frontend to ui.apps architecture

在Maven建置期間,編譯的CSS ui.frontend 和Javascript會從模 ui.apps 組複製到模組,作為用戶端程式庫

更新預告樣式

接下來,對預告樣式進行小幅變更,以了解ui.frontend模組和用戶端程式庫的運作方式。 使用您選擇的IDE🔗導入Venia項目。 使用的螢幕截圖來自Visual Studio代碼IDE

  1. 導覽並展開​ui.frontend​模組,然後展開資料夾階層以:ui.frontend/src/main/styles/commerce:

    ui.frontend商務資料夾

    請注意,資料夾下方有多個Sass(.scss)檔案。 這些是每個商務元件的商務特定樣式。

  2. 開啟檔案_productteaser.scss

  3. 更新.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%;
    }
    

    上述規則應在「產品預告元件」中新增非常粗體的粉紅色邊框。

  4. 開啟新的終端機視窗,並導覽至ui.frontend資料夾:

    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. 運行以下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指令碼,包括npm run buildnpm run build命令在package.json檔案中定義,具有編譯Webpack項目和觸發客戶端庫生成的效果。

  6. Inspect檔案ui.frontend/dist/clientlib-site/site.css:

    編譯的網站CSS

    該檔案是項目中所有Sass檔案的編譯和縮製版本。

    注意

    類似的檔案會從原始碼控制項中忽略,因為它們應在建置期間產生。

  7. Inspect檔案ui.frontend/clientlib.config.js

    /* 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用戶端程式庫。

  8. ui.apps模組中檢查檔案:ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css:

    ui.apps中的已編譯網站CSS

    這會將site.css檔案複製到ui.apps專案。 它現在是名為clientlib-site且類別為venia.site的用戶端程式庫的一部分。 一旦檔案屬於ui.apps模組,就可以部署至AEM。

    注意

    類似的檔案也會從原始碼控制項中忽略,因為這些檔案應在建置期間產生。

  9. 接下來檢查項目生成的其他客戶端庫:

    其他用戶端程式庫

    這些客戶端庫不由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程式庫中。

  10. Inspect ui.apps/src/main/content/jcr_root/apps/venia/components/page下方的檔案customheaderlibs.htmlcustomfooterlibs.html:

    自訂頁首與頁尾指令碼

    這些指令碼包含所有頁面中的​venia.base​和​venia.cif​程式庫。

    注意

    只有基礎程式庫會在頁面指令碼中「硬式編碼」。 venia.site 未包含在這些檔案中,而是包含在頁面範本中,以獲得更大的彈性。稍後會檢查。

  11. 從終端機,建立整個專案並部署至本機AEM例項:

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

製作產品預告

現在程式碼更新已部署完畢,請使用AEM製作工具將Product Teaser元件的新例項新增至網站的首頁。 這可讓我們檢視更新的樣式。

  1. 開啟新的瀏覽器標籤,並導覽至網站的​首頁:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 在​Edit​模式中展開「資產尋找器」(側邊欄)。 將「資產」篩選器切換為​Products

    展開「資產尋找器」並依產品篩選

  3. 將新產品拖放至主「版面容器」的首頁:

    粉紅色邊框的產品預告

    您應該會看到Product Teaser現在已根據先前建立的CSS規則變更,有亮粉色邊框。

驗證頁面上的客戶端庫

接下來,驗證頁面上是否包含用戶端程式庫。

  1. 導覽至網站的​首頁:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 選擇​Page Information​菜單,然後按一下​View as Published:

    以已發佈狀態檢視

    這會開啟頁面而未載入任何AEM作者javascript,就像顯示在已發佈的網站上一樣。 請注意,URL已附加查詢參數?wcmmode=disabled。 開發CSS和Javascript時,最好使用此參數來簡化頁面,而不需要AEM作者提供任何內容。

  3. 檢視頁面來源,您應能識別包含的數個用戶端程式庫:

    <!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前置詞,並透過proxy提供,以避免顯示/apps/libs中的任何敏感項目。

    注意venia/clientlibs/clientlib-site.min.cssvenia/clientlibs/clientlib-site.min.js。 這些是從ui.frontend模組衍生的已編譯CSS和Javascript檔案。

包含頁面範本的用戶端程式庫

如何包含用戶端程式庫有數個選項。 接下來,檢查產生的專案如何透過頁面範本包含clientlib-site資料庫。

  1. 在AEM編輯器中導覽至網站的​首頁:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 選擇「頁資訊」菜單,然後按一下「編輯模板」:

    編輯範本

    這會開啟​登錄頁面​範本,此範本是​首頁​頁面所依據。

    注意

    若要從「AEM開始」畫面檢視所有可用的範本,請導覽至「工具 > 一般 > 範本」。

  3. 在左上角,選擇​頁面資訊​表徵圖,然後按一下​頁面策略

    頁面策略菜單項

  4. 這會開啟「登錄頁面」範本的「頁面原則」:

    頁面原則 — 登錄頁面

    在右側,您可以看到將包含在使用此範本的所有頁面上的用戶端程式庫​categories​清單。

    • venia.dependencies — 提供任何依賴的供 venia.site 應商庫。
    • venia.site — 這是模組產 clientlib-site 生的 ui.frontend 類別。

    請注意,其他範本使用相同的原則,例如​內容頁面登陸頁面​等。 通過重新使用相同的策略,我們可以確保所有頁面上都包含相同的客戶端庫。

    使用模板和頁面策略來管理包含客戶端庫的好處是,您可以按模板更改策略。 例如,您可能在同一個AEM例項內管理兩個不同的品牌。 每個品牌都有其獨特的樣式或​theme,但基本程式庫和程式碼會相同。 另一個範例是,如果您有一個較大的客戶端庫,而您只想在某些頁面上顯示,則可以僅針對該範本建立唯一的頁面原則。

本地Webpack開發

在上一個練習中,對ui.frontend模組中的Sass檔案進行了更新,然後在執行Maven構建後,將更改部署到AEM。 接下來,我們將探討如何利用Webpack-dev-server來快速開發前端樣式。

Webpack-dev-server代理影像和來自AEM本機例項的部分CSS/JavaScript,但允許開發人員修改ui.frontend模組中的樣式和JavaScript。

  1. 在瀏覽器中,導覽至​Home​頁面和​View as Published:http://localhost:4502/content/venia/us/en.html?wcmmode=disabled

  2. 檢視頁面來源,以及頁面的​copy​原始HTML。

  3. ui.frontend模組下返回您選擇的IDE,開啟檔案:ui.frontend/src/main/static/index.html

    靜態HTML檔案

  4. 覆寫在上一步中複製的HTML index.html和​貼上​的內容。

  5. 找到clientlib-site.min.cssclientlib-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執行個體中複製。

  6. 開啟新的終端機視窗,並導覽至ui.frontend資料夾。 運行命令npm start:

    $ cd ui.frontend
    $ npm start
    

    這將在http://localhost:8080/上啟動Webpack-dev-server

    注意

    如果出現與Sass相關的錯誤,請停止伺服器並運行命令npm rebuild node-sass,然後重複上述步驟。 如果您在專案aem-cif-guides-venia/pom.xml中指定了不同版本的npmnode,便會發生此情況。

  7. 在與AEM登入例項具有相同瀏覽器的新索引標籤中,導覽至http://localhost:8080/。 您應該會透過webpack-dev-server看到Venia首頁:

    埠80上的Webpack開發伺服器

    讓Webpack-dev-server保持運行。 它將用於下一練習。

為Product Teaser實作卡樣式

接下來,修改ui.frontend模組中的Sass檔案,為Product Teaser實作類似卡片的樣式。 webpack-dev-server將用於快速查看更改。

返回到IDE和生成的項目。

  1. 在​ui.frontend​模組中,於ui.frontend/src/main/styles/commerce/_productteaser.scss重新開啟檔案_productteaser.scss

  2. 對Product Teaser邊框進行下列變更:

        .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應會自動以新樣式重新整理。

  3. 在Product Teaser中添加陰影並包括圓角。

     .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);
    }
    
  4. 更新產品名稱以顯示在預告底部,並修改文字顏色。

    .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%;
    }
    
  5. 更新產品價格以同時顯示在宣傳預告底部,並修改文字顏色。

    .price {
        color: #000;
        display: block;
        float: left;
        font-size: 18px;
        font-weight: 900;
        padding: 0.75em;
        padding-bottom: 2em;
        width: 25%;
    
        ...
    
  6. 更新底部的媒體查詢,以在小於​992px​的畫面中堆疊名稱和價格。

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

    您現在應該會看到Webpack-dev-server反映的卡片樣式:

    Webpack Dev Server Teaser更改

    不過,這些變更尚未部署至AEM。 您可以在此處🔗下載解決方案檔案。

  7. 使用您的Maven技能,從命令列終端機部署更新至AEM:

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

    還有其他IDE設定和工具,它們可以直接將項目檔案同步到本地AEM實例,而無需執行完整的Maven生成。

查看更新的Product Teaser

將專案的程式碼部署至AEM後,我們現在應該就能看到產品預告的變更。

  1. 返回瀏覽器並重新整理首頁:http://localhost:4502/editor.html/content/venia/us/en.html。 您應該會看到已套用更新的產品預告樣式。

    更新產品預告樣式

  2. 加入其他產品茶匙來試驗。 使用「佈局模式」更改元件的寬度和偏移,以便在行中顯示多個茶匙。

    多產品茶匙

疑難排解

您可以在CRXDE-Lite中驗證已部署更新的CSS檔案:http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css

部署新的CSS和/或JavaScript檔案時,請務必確保瀏覽器不提供過時檔案的服務。 您可以清除瀏覽器快取或啟動新的瀏覽器工作階段,以消除此情況。

AEM也會嘗試快取用戶端程式庫以提升效能。 有時,在程式碼部署後,會提供舊版檔案。 您可以使用Rebuild Client Libraries tool手動使AEM用戶端程式庫快取失效。 如果您懷疑AEM已快取舊版用戶端程式庫,建議使用「無效快取」。重建庫效率低下且耗時。

恭喜

您剛設定好第一個AEM CIF核心元件的樣式,且使用Webpack開發伺服器!

獎金挑戰

使用AEM樣式系統建立可由內容作者開啟/關閉的兩種樣式。 使用樣式系統開 發包含完成此作業的詳細步驟和資訊。

獎金挑戰 — 風格系統

其他資源

本頁內容