Show Menu
主題×

樣式AEM CIF核心元件

CIF Venia Project ( CIF Venia Project )是使用 CIF Core Components的參考代碼庫。 在本教學課程中,您將檢視Venia參考專案,並瞭解AEM CIF核心元件所使用的CSS和JavaScript的組織方式。 您也可以使用CSS建立新樣式,以更新「產品摘要」元件的 預設樣式

您將建立的

在本教學課程中,類似卡片的產品摘要元件將會建置新樣式。 本教學課程可套用至其他CIF核心元件。

必備條件

完成本教學課程時,需要有本機開發環境。 這包括已設定並連線至Magento例項的AEM執行個體。 檢閱使用AEM做為雲 端服務SDK設定本機開發的需求和步驟

複製Venia專案

我們將仿製 Venia Project ,然後覆寫預設樣式。
您可以隨意使用現有的專案 (根據包含CIF的AEM Project Archetype),並略過本節。
  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主題。 展開店面的「Main Menu(主菜單)」時,您應該會看到各種類別,指出Magento連線正在運作。

用戶端程式庫和ui.frontend模組

負責轉譯店面主題/樣式的CSS和JavaScript,由 Client資料庫或clientlibs在AEM中管理 。 用戶端程式庫提供一種機制,可在專案程式碼中組織CSS和Javascript,然後傳送至頁面。
品牌特定樣式可套用至AEM CIF核心元件,方法是新增和覆寫這些用戶端程式庫所管理的CSS。 瞭解用戶端程式庫的結構化及包含在頁面上,是十分重要的。
ui. frontend 是專屬的 webpack專案,可管理專案的所有前端資產。 這可讓前端開發人員使用任何語言和技術,例如 TypeScript Sass 等。
ui.frontend 塊也是Maven模組,通過使用NPM模組aem-clientlib-generator與較大的項目 整合 。 在建置期間, aem-clientlib-generator 會將編譯的CSS和JavaScript檔案複製至模組的用戶端程式 ui.apps 庫。
在Maven建置期間,編譯的CSS ui.frontend 和Javascript會從模 ui.apps 塊複製到模組中,當做用戶端程式庫

更新摘要樣式

接下來,對摘要樣式進行小幅變更,以瞭解模組和clientlibraries ui.frontend 的運作方式。 使 用您選擇的IDE ,匯入Venia專案。 使用的螢幕擷取畫面來自 Visual Studio程式碼IDE
  1. 導覽並展開 ui.frontend模組 ,並展開資料夾階層至: ui.frontend/src/main/styles/commerce :
    請注意,資料夾下面有 .scss 多個Sass()檔案。 這些是每個「商務」元件的「商務」特定樣式。
  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] ------------------------------------------------------------------------
    
    
    檢查終端輸出。 您將看到Maven命令執行了包括在內的多個NPM指令碼 npm run build 。 該 npm run build 命令在檔案中定 package.json 義,具有編譯webpack項目和觸發客戶端庫生成的效果。
  6. 檢查檔案 ui.frontend/dist/clientlib-site/site.css :
    該檔案是項目中所有Sass檔案的相容和精簡版。
    這類檔案會從來源控制項中忽略,因為它們應在建立時產生。
  7. 檢查檔案 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 :
    將複製的 site.css 檔案匯入專 ui.apps 案。 它現在是clientlibrary的一部分,該程式 clientlib-site 庫的類別為 venia.site 。 一旦檔案成為模組的一 ui.apps 部分,就可以部署至AEM。
    類似的檔案也會從來源控制項中忽略,因為它們應在建立時產生。
  9. 接下來,檢查項目生成的其他客戶端庫:
    這些客戶端庫不由模組管 ui.frontend 理。 這些用戶端程式庫包含Adobe提供的CSS和JavaScript相依性。 這些clientlibraries的定義位於每個檔案夾 .content.xml 下方的檔案中。
    clientlib-base —— 此為空的用戶端程式庫,只會內嵌 AEM核心元件的必要相依性 。 類別是 venia.base
    clientlib-cif —— 這也是一個空的用戶端程式庫,只會內嵌 AEM CIF核心元件的必要相依性 。 類別是 venia.cif
    clientlib-grid —— 這包括啟用AEM的「互動式格線」功能所需的CSS。 使用AEM格線可在AEM編輯 器中啟用「版面模式 」,並讓內容作者能夠重新調整元件大小。 類別已 venia.grid 內嵌在程式 venia.base 庫中。
  10. 檢查檔案 customheaderlibs.html customfooterlibs.html 下方 ui.apps/src/main/content/jcr_root/apps/venia/components/page :
    這些指令 碼包含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. 在「編輯」模式中展開「資產搜尋器」(側 )。 將「資產」篩選器切換 為「產品 」。
  3. 將新產品拖放至主版面容器的首頁:
    您應該會看到「產品摘要」現在會根據先前建立的CSS規則變更,顯示亮粉色邊框。

驗證頁面上的客戶端庫

接下來驗證頁面上是否包含用戶端程式庫。
  1. 選取「頁 面資訊 」功能表,然後按 一下「檢視為已發佈 :
    如此會開啟頁面,而未載入任何AEM作者javascript,因為它會顯示在發佈的網站上。 請注意,URL已附加查詢 ?wcmmode=disabled 參數。 在開發CSS和Javascript時,最好使用此參數來簡化頁面,而不需AEM作者提供任何資訊。
  2. 檢視頁面來源,您應該能夠識別包含的數個用戶端程式庫:
    <!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.css venia/clientlibs/clientlib-site.min.js 。 這些是從模組衍生的已編譯CSS和Javascript ui.frontend 檔案。

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

如何包含用戶端程式庫有幾個選項。 接下來,檢查產生的專案如何透過「頁面范 clientlib-site 本」包 含程式庫
  1. 導覽至AEM 編輯器中 ,網站的首頁: http://localhost:4502/editor.html/content/venia/us/en.html .
  2. 選取「頁 面資訊 」功能表,然後按 一下「編輯範本 :
    這會開啟首 頁所依據 的「著陸頁面 」範本。
    若要從「AEM開始」畫面檢視所有可用範本,請導覽至「工 >一般 >范 」。
  3. 在左上角,選取「頁面資訊」圖 示並按一下 「頁 面原則」
  4. 這會開啟「著陸頁面」範本的頁面政策:
    在右側,您可以看到將包含在使用此範本 的所有頁面 ,的客戶程式庫類別的清單。
    • venia.dependencies -提供任何依賴的供 venia.site 應商庫。
    • venia.site -這是模組生 clientlib-site 成的類 ui.frontend 別。
    請注意,其他範本使用相 同的原則 內容頁面 、著陸頁面等……透過重新使用相同的原則,我們可以確保所有頁面上都包含相同的用戶端程式庫。
    使用「範本」和「頁面」原則管理包含用戶端程式庫的好處是,您可以依範本變更原則。 例如,您可能是在同一個AEM實例中管理兩個不同的品牌。 每個品牌都有其獨特的風格或 主題 ,但基本資料庫和程式碼會相同。 另一個範例是,如果您有較大的用戶端程式庫,而您只想要顯示在特定頁面上,則可針對該範本建立唯一的頁面原則。

本機網頁套件開發

在先前的練習中,模組中的Sass檔案已進行更新, ui.frontend 然後在執行Maven組建後,變更會部署至AEM。 接下來,我們將探討如何運用webpack-dev-server來快速開發前端樣式。
webpack-dev-server proxy影像和AEM本機例項中的部分CSS/JavaScript,但可讓開發人員修改模組中的樣式和JavaScript ui.frontend
  1. 在瀏覽器中導覽至「首頁」 和「檢視 為已發佈」 : http://localhost:4502/content/venia/us/en.html?wcmmode=disabled .
  2. 檢視頁面的來源和 復本 ,頁面的原始HTML。
  3. 返回到模組下選擇的IDE, ui.frontend 開啟檔案: ui.frontend/src/main/static/index.html
  4. 覆寫上一 index.html 步中 複製 的HTML內容並貼上。
  5. 查找包含 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>
    
    
    這些值會移除,因為它們代表由模組產生的CSS和JavaScript編譯版 ui.frontend 本。 保留其他用戶端程式庫,因為它們將會從執行中的AEM例項中複製。
  6. 開啟新的終端機視窗並導覽至資料 ui.frontend 夾。 運行命令 npm start :
    $ cd ui.frontend
    $ npm start
    
    
    這將在http://localhost:8080/上啟動webpack-dev-server
    如果出現與Sass相關的錯誤,請停止伺服器並運行該命令, npm rebuild node-sass 然後重複上述步驟。 如果項目中指定了不同版本 npm , node 則可能出現此情況 aem-cif-guides-venia/pom.xml
  7. 使用與 AEM登入例項相同的瀏覽器,在新標籤中導覽至http://localhost:8080/。 您應透過webpack-dev-server查看Venia首頁:
    讓webpack-dev-server繼續運作。 它將用於下次練習。

實作產品摘要的資訊卡樣式

接著,修改模組中的Sass ui.frontend 檔案,為「產品摘要」實作類似卡片的樣式。 webpack-dev-server將用於快速查看更改。
返回到IDE和生成的項目。
  1. ui.frontend 模組中,重新開啟 _productteaser.scss 檔案 ui.frontend/src/main/styles/commerce/_productteaser.scss
  2. 對「產品摘要」邊框進行下列變更:
        .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. 新增下垂式陰影並將圓角加入「產品摘要」中。
     .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. 更新底部的媒體查詢,將名稱和價格堆疊在小於 992像素的螢幕上
    @media (max-width: 992px) {
        .productteaser .item__name {
            font-size: 18px;
            width: 100%;
        }
        .productteaser .item__price {
            font-size: 14px;
            width: 100%;
        }
    }
    
    
    您現在應該會看到webpack-dev-server中反映的卡片式:
    不過,這些變更尚未部署至AEM。 您可以在此處下 載解決方案檔
  7. 使用您的Maven技能,從命令列終端部署AEM的更新:
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    
    還有其他 IDE設定和工具 ,可直接將專案檔案同步至本機AEM例項,而不需執行完整的Maven組建。

檢視更新的產品摘要

在專案的程式碼已部署至AEM後,我們現在應該可以看到產品摘要的變更。
  1. 返回瀏覽器並重新整理首頁: http://localhost:4502/editor.html/content/venia/us/en.html . 您應該會看到已套用更新的產品摘要樣式。
  2. 加入額外的產品預告來嘗試。 使用「版面模式」變更元件的寬度和偏移,以一列顯示多個預告。

疑難排解

部署新的CSS和/或JavaScript檔案時,請務必確保瀏覽器不提供舊檔。 您可以清除瀏覽器快取或啟動新的瀏覽器工作階段,以消除這種情況。
AEM也會嘗試快取用戶端程式庫以取得效能。 有時,在程式碼部署後,會提供舊版檔案。 您可以使用「重建用戶端程式庫」工具手動使AEM的用戶端程 式庫快取失效 如果您懷疑AEM已快取舊版用戶端程式庫,則偏好使用「使快取無效」方法。 重建庫效率低下,耗時。

恭喜

您剛剛設計好第一個AEM CIF Core Component的樣式,而且使用了webpack dev server!

獎金挑戰

使用 AEM Style系統 ,建立兩種樣式,供內容作者開啟/關閉。 使用Style System進行開發 ,包括詳細步驟和資訊,說明如何完成此作業。