建立AEM CIF核心元件的樣式 style-aem-cif-core-components

CIF Venia專案是使用CIF核心元件的參考程式碼基底。 在本教學課程中,您需檢查Venia參考專案,瞭解AEM CIF核心元件所使用的CSS和JavaScript如何進行組織整理。 您也可以使用CSS建立樣式,以更新​ Product Teaser ​元件的預設樣式。

TIP
啟動您自己的商務實作時使用AEM專案原型

您將建置的內容

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

您將建置的內容

先決條件 prerequisites

本機開發環境是完成本教學課程的必要條件。 此環境包含設定並連線至Adobe Commerce執行個體的AEM執行個體。 檢閱使用AEM as a Cloud Service SDK設定本機開發的需求和步驟。

原地複製Venia專案 clone-venia-project

您即將複製Venia專案,然後覆寫預設樣式。

NOTE
您可以隨意使用現有的專案 (根據包含CIF的AEM專案原型)並略過此區段。
  1. 執行下列git命令,以便複製專案:

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

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
  3. 新增必要的OSGi設定,以便將AEM執行個體連線至Adobe Commerce執行個體,或將設定新增至已建立的專案。

  4. 此時,您應該有已連線至Adobe Commerce執行個體的有效店面版本。 瀏覽至US > Home頁面,網址為: http://localhost:4502/editor.html/content/venia/us/en.html

    您應該會看到店面目前使用Venia佈景主題。 展開店面的「主要」功能表,應該會看到各種類別,表示與Adobe Commerce的連線正常運作。

    已設定Venia佈景主題 的店面

使用者端程式庫和ui.frontend模組 introduction-to-client-libraries

負責轉譯店面主題/樣式的CSS和JavaScript由使用者端資料庫或「clientlibs」(簡稱)在AEM中管理。 使用者端資料庫提供的機制,可讓您以專案的程式碼來整理CSS和JavaScript,然後將內容傳送至頁面。

可透過新增和覆寫這些使用者端資料庫所管理的CSS,將品牌特定樣式套用至AEM CIF核心元件。 瞭解使用者端程式庫如何建構並包含在頁面上至關重要。

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

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

ui.frontend到ui.apps架構

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

更新Teaser樣式 ui-frontend-module

接下來,對Teaser樣式進行小幅變更,以瞭解ui.frontend模組和使用者端程式庫如何運作。 使用您選擇的IDE匯入Venia專案。 使用的熒幕擷取畫面來自Visual Studio Code IDE

  1. 瀏覽並展開​ ui.frontend ​模組,並將資料夾階層展開至: ui.frontend/src/main/styles/commerce

    ui.frontend商務資料夾

    請注意,資料夾下有多個Sass (.scss)檔案。 這些檔案是每個Commerce元件的Commerce專屬樣式。

  2. 開啟檔案_productteaser.scss

  3. 更新.item__image規則並修改框線規則:

    code language-scss
    .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%;
    }
    

    上述規則應為產品Teaser元件新增粗粉紅色邊框。

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

    code language-shell
    $ cd <project-location>/aem-cif-guides-venia/ui.frontend
    
  5. 執行下列Maven命令:

    code language-shell
    $ 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檔案的編譯及縮製版本。

    note note
    NOTE
    原始檔控制會忽略這類檔案,因為它們應該在建置期間產生。
  7. Inspect檔案ui.frontend/clientlib.config.js

    code language-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。

    note note
    NOTE
    原始檔控制也會忽略這類檔案,因為它們應該在建置期間產生。
  9. 接下來,檢查專案產生的其他使用者端程式庫:

    其他使用者端資料庫

    這些使用者端程式庫不是由ui.frontend模組管理。 這些使用者端資料庫會包含由Adobe提供的CSS和JavaScript相依性。 這些使用者端資料庫的定義位於每個資料夾下方的.content.xml檔案中。

    clientlib-base — 空白的使用者端程式庫,僅嵌入AEM核心元件的必要相依性。 類別是venia.base

    clientlib-cif — 空白的使用者端程式庫,僅嵌入AEM CIF核心元件的必要相依性。 類別是venia.cif

    clientlib-grid — 包含CSS以啟用AEM回應式格線功能。 使用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 ​資料庫作為所有頁面的一部分。

    note note
    NOTE
    只有基底程式庫會在頁面指令碼中「以硬式編碼」。 venia.site未包含在這些檔案中,而是包含在頁面範本中,以擁有更大的彈性。 稍後會檢查此程式。
  11. 從終端機,建置並部署整個專案到AEM的本機執行個體:

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

編寫產品Teaser author-product-teaser

現在已部署程式碼更新,請使用AEM編寫工具將Product Teaser元件的執行個體新增到網站的首頁。 這麼做可讓我們檢視更新的樣式。

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

  2. 在​ 編輯 ​模式中展開資產尋找器(側邊欄)。 將資產篩選器切換為​ 產品

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

  3. 將新產品拖放至主配置容器的首頁:

    粉色邊框的產品Teaser

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

驗證頁面上的使用者端程式庫 verify-client-libraries

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

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

  2. 選取​ 頁面資訊 ​功能表,然後按一下​ 以發佈的形式檢視

    以發佈的形式檢視

    此頁面會開啟,但不載入任何AEM作者JavaScript,如同發佈網站上顯示的一樣。 請注意,該url已附加查詢引數?wcmmode=disabled。 開發CSS和JavaScript時,最好使用此引數來簡化頁面,而無需AEM作者採取任何動作。

  3. 檢視頁面來源,您應該能夠識別已包含數個使用者端程式庫:

    code language-html
    <!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檔案。

頁面範本包含使用者端資料庫 client-library-inclusion-pagetemplates

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

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

  2. 選取​ 頁面資訊 ​功能表,然後按一下​ 編輯範本

    編輯範本

    已開啟​ 首頁 ​頁面所依據的​ 登陸頁面 ​範本。

    note note
    NOTE
    若要從AEM開始畫面檢視所有可用的範本,請瀏覽至​ 工具 > 一般 > 範本
  3. 在左上角,選取​ 頁面資訊 ​圖示並按一下​ 頁面原則

    頁面原則功能表專案

  4. 「頁面原則」會針對登入頁面範本開啟:

    頁面原則 — 登陸頁面

    在右側,您可以看到包含在使用此範本的所有頁面上的使用者端資料庫​ 類別 ​清單。

    • venia.dependencies — 提供venia.site所依賴的任何廠商程式庫。
    • venia.site - ui.frontend模組產生的clientlib-site類別。

    請注意,其他範本使用相同的原則、內容頁面登陸頁面 ​等。 透過重複使用相同原則,可確保在所有頁面上包含相同的使用者端程式庫。

    使用範本和頁面原則來管理使用者端資料庫之包含專案的優點在於,您可以根據範本變更原則。 例如,您可能在同一個AEM執行個體中管理兩個不同的品牌。 每個品牌都有自己的獨特樣式或​ 佈景主題,但基底程式庫和程式碼相同。 另一個範例,如果您有一個大型使用者端程式庫,您只想讓它出現在某些頁面上,您可以為該範本制定唯一的頁面原則。

本機Webpack開發 local-webpack-development

在上一個練習中,已對ui.frontend模組中的Sass檔案進行更新,然後在執行Maven組建後,會將變更部署到AEM。 接下來,您會考慮使用webpack-dev-server來快速開發前端樣式。

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

  1. 在瀏覽器中導覽至​ 首頁 ​和​ 以發佈的形式檢視http://localhost:4502/content/venia/us/en.html?wcmmode=disabled

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

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

    靜態HTML檔案

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

  5. 尋找clientlib-site.min.cssclientlib-site.min.js和​ 移除 ​它們的「包含」。

    code language-html
    <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

    code language-shell
    $ cd ui.frontend
    $ npm start
    

    此命令會啟動http://localhost:8080/上的webpack-dev-server

    note caution
    CAUTION
    如果您收到Sass相關錯誤,請停止伺服器並執行命令npm rebuild node-sass並重複上述步驟。 如果您的npmnode版本與專案aem-cif-guides-venia/pom.xml中指定的版本不同,則會發生此錯誤。
  7. 使用與AEM登入執行個體相同的瀏覽器,在新的索引標籤中導覽至http://localhost:8080/。 您應該會透過webpack-dev-server看到Venia首頁:

    連線埠80 上的Webpack開發伺服器

    讓webpack-dev-server保持執行。 它將在下一個練習中使用。

實作產品Teaser的卡片樣式 update-css-product-teaser

接下來,修改ui.frontend模組中的Sass檔案,以實作產品Teaser的卡片樣式。 webpack-dev-server用於快速檢視變更。

返回IDE和生成的專案。

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

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

    code language-diff
        .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. 在「產品Teaser」中新增投影並包含圓角。

    code language-scss
     .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. 更新產品名稱以顯示於Teaser底部,並修改文字顏色。

    code language-css
    .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. 更新產品的價格,使其也出現在Teaser底部,並修改文字顏色。

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

    code language-css
    @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:

    code language-shell
    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    note note
    NOTE
    還有其他的IDE設定和工具可以直接將專案檔案同步到本機AEM執行個體,而不需要執行完整的Maven建置。

檢視更新的產品Teaser view-updated-product-teaser

將專案的程式碼部署到AEM後,您現在應該能夠檢視產品Teaser的變更。

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

    已更新產品Teaser樣式

  2. 新增其他產品Teaser以進行實驗。 使用「版面模式」來變更元件的寬度和位移,以在一列中顯示多個Teaser。

    多個產品預告

疑難排解 troubleshooting

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

部署新的CSS檔案或JavaScript檔案(或兩者)時,請務必確保瀏覽器不會提供過時的檔案。 您可以清除瀏覽器快取或啟動新的瀏覽器工作階段,藉此消除此潛在問題。

AEM也會嘗試快取使用者端程式庫以提高效能。 在程式碼部署後,偶爾會提供舊檔案。 您可以使用Rebuild Client Libraries工具,手動使AEM的使用者端程式庫快取失效。 如果您懷疑AEM已快取舊版的使用者端程式庫,建議使用​ 使快取無效的方法。 重新建置程式庫效率低下且耗時。

恭喜 congratulations

您已完成第一個AEM CIF核心元件的樣式,而且使用的是Webpack開發伺服器!

額外挑戰 bonus-challenge

使用AEM樣式系統建立兩個可由內容作者切換的樣式。 使用樣式系統進行開發包含有關如何完成此工作的詳細步驟和資訊。

額外挑戰 — 樣式系統

其他資源 additional-resources

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab