文件AEM 6.5使用手冊

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

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 管理員
  • 開發人員

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

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

您將建置的內容

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

您將建置的內容

先決條件 prerequisites

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

原地複製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專案，用於管理專案的所有前端資產。 如此一來，前端開發人員就可以使用任意數量的語言和技術，例如TypeScript、Sass等等。

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 build。 npm 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 — 這包含啟用AEM回應式格線功能所需的CSS。 使用AEM格線會在AEM編輯器中啟用佈局模式，並讓內容作者能夠調整元件大小。 類別為venia.grid且內嵌於venia.base資料庫中。

  10. Inspect ui.apps/src/main/content/jcr_root/apps/venia/components/page下的檔案customheaderlibs.html和customfooterlibs.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編寫工具將產品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.css和venia/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.css、clientlib-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並重複上述步驟。 如果您在專案aem-cif-guides-venia/pom.xml中指定了不同版本的npm和node，就可能發生這種情況。

  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
19ffd973-7af2-44d0-84b5-d547b0dffee2