建立AEM CIF核心元件的樣式 style-aem-cif-core-components
CIF Venia專案是使用CIF核心元件的參考程式碼基底。 在本教學課程中,您需檢查Venia參考專案,瞭解AEM CIF核心元件所使用的CSS和JavaScript如何進行組織整理。 您也會使用CSS建立樣式,以更新 Product Teaser 元件的預設樣式。
您將建置的內容
在本教學課程中,將針對類似卡片的Product Teaser元件實作新樣式。 在本教學課程中吸取的課程可套用至其他CIF核心元件。
先決條件 prerequisites
本機開發環境是完成本教學課程的必要條件。 這包括已設定並連線至Adobe Commerce執行個體的AEM執行個體。 檢閱使用AEM設定本機開發的需求和步驟。
原地複製Venia專案 clone-venia-project
我們複製Venia專案,然後覆寫預設樣式。
-
執行下列git命令以複製專案:
code language-shell $ git clone git@github.com:adobe/aem-cif-guides-venia.git
-
建立專案並將其部署到AEM的本機執行個體:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
-
新增必要的OSGi設定以將您的AEM執行個體連線到Adobe Commerce執行個體,或將設定新增到新建立的專案。
-
此時,您應該有已連線至Adobe Commerce執行個體的有效店面版本。 瀏覽至
US
>Home
頁面,網址為: http://localhost:4502/editor.html/content/venia/us/en.html。您應該會看到店面目前使用Venia佈景主題。 展開店面的「主要」功能表,應該會看到各種類別,表示與Adobe Commerce的連線正常運作。
的店面
使用者端程式庫和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
模組中的使用者端程式庫中。
在Maven組建期間,已編譯的CSS和JavaScript會從ui.frontend
模組複製到ui.apps
模組,作為使用者端程式庫
更新Teaser樣式 ui-frontend-module
接下來,對Teaser樣式進行小幅變更,以瞭解ui.frontend
模組和使用者端程式庫如何運作。 使用您選擇的IDE匯入Venia專案。 使用的熒幕擷取畫面來自Visual Studio Code IDE。
-
瀏覽並展開 ui.frontend 模組,並將資料夾階層展開至:
ui.frontend/src/main/styles/commerce
:請注意,資料夾下有多個Sass (
.scss
)檔案。 這些是每個Commerce元件的Commerce特定樣式。 -
開啟檔案
_productteaser.scss
。 -
更新
.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元件新增粗粉紅色邊框。
-
開啟新的終端機視窗並瀏覽至
ui.frontend
資料夾:code language-shell $ cd <project-location>/aem-cif-guides-venia/ui.frontend
-
執行下列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專案及觸發使用者端程式庫產生的效果。 -
Inspect檔案
ui.frontend/dist/clientlib-site/site.css
:此檔案是專案中所有Sass檔案的編譯及縮製版本。
note note NOTE 原始檔控制會忽略這類檔案,因為它們應該在建置期間產生。 -
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使用者端程式庫的位置和方式。
-
在
ui.apps
模組中檢查檔案:ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-site/css/site.css
:這會將
site.css
檔案複製到ui.apps
專案。 它現在是名為clientlib-site
的使用者端資料庫的一部分,類別為venia.site
。 一旦檔案成為ui.apps
模組的一部分,就可以將其部署到AEM。note note NOTE 原始檔控制也會忽略這類檔案,因為它們應該在建置期間產生。 -
接下來,檢查專案產生的其他使用者端程式庫:
這些使用者端程式庫不是由
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
資料庫中。 -
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
未包含在這些檔案中,而是包含在頁面範本中,以擁有更大的彈性。 稍後會檢查此專案。 -
從終端機,建置並部署整個專案到AEM的本機執行個體:
code language-shell $ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
編寫產品Teaser author-product-teaser
現在程式碼更新已部署,請使用AEM編寫工具將產品Teaser元件的新執行個體新增到網站的首頁。 這可讓我們檢視更新的樣式。
-
開啟新的瀏覽器分頁,並瀏覽至網站的 首頁: http://localhost:4502/editor.html/content/venia/us/en.html。
-
在 編輯 模式中展開資產尋找器(側邊欄)。 將資產篩選器切換為 產品。
-
將新產品拖放至主配置容器的首頁:
您應該會看到,根據先前建立的CSS規則變更,產品Teaser現在有亮粉紅色邊框。
驗證頁面上的使用者端程式庫 verify-client-libraries
接下來,驗證頁面上是否包含使用者端程式庫。
-
瀏覽至網站的 首頁: http://localhost:4502/editor.html/content/venia/us/en.html。
-
選取 頁面資訊 功能表,然後按一下 以發佈的形式檢視:
如此將可開啟頁面,而不載入任何AEM作者JavaScript,如發佈網站中所示。 請注意,該url已附加查詢引數
?wcmmode=disabled
。 開發CSS和JavaScript時,最好使用此引數來簡化頁面,而無需AEM作者採取任何動作。 -
檢視頁面來源,您應該能夠識別已包含數個使用者端程式庫:
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
資料庫。
-
導覽至AEM編輯器內網站的 首頁: http://localhost:4502/editor.html/content/venia/us/en.html。
-
選取 頁面資訊 功能表,然後按一下 編輯範本:
這會開啟 首頁 頁面所依據的 登陸頁面 範本。
note note NOTE 若要從AEM開始畫面檢視所有可用的範本,請導覽至 工具 > 一般 > 範本。 -
在左上角,選取 頁面資訊 圖示並按一下 頁面原則。
-
這樣會開啟登入頁面範本的頁面原則:
在右側,您可以看到使用者端資料庫 類別 的清單,這些類別會包含在使用此範本的所有頁面中。
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。
-
在瀏覽器中導覽至 首頁 和 以發佈的形式檢視: http://localhost:4502/content/venia/us/en.html?wcmmode=disabled。
-
檢視頁面的來源,以及 複製 頁面的原始HTML。
-
在
ui.frontend
模組下方返回您選擇的IDE開啟檔案:ui.frontend/src/main/static/index.html
-
覆寫
index.html
和 貼上 上一步中複製的HTML的內容。 -
尋找
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執行個體進行代理。 -
開啟新的終端機視窗並瀏覽至
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
,就可能發生這種情況。 -
使用與AEM登入執行個體相同的瀏覽器,在新的索引標籤中導覽至http://localhost:8080/。 您應該會透過webpack-dev-server看到Venia首頁:
上的Webpack開發伺服器
讓webpack-dev-server保持執行。 它將在下一個練習中使用。
實作產品Teaser的卡片樣式 update-css-product-teaser
接下來,修改ui.frontend
模組中的Sass檔案,以實作產品Teaser的卡片樣式。 webpack-dev-server用於快速檢視變更。
返回IDE和生成的專案。
-
在 ui.frontend 模組中,於
ui.frontend/src/main/styles/commerce/_productteaser.scss
重新開啟檔案_productteaser.scss
。 -
對產品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應該會使用新樣式自動重新整理。
-
在「產品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); }
-
更新產品名稱以顯示於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%; }
-
更新產品的價格,使其也出現在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%; ...
-
更新底部的媒體查詢,以在小於 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中:
不過,這些變更尚未部署至AEM。 您可以在此下載解決方案檔案。
-
從命令列終端機,使用您的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的變更。
-
返回瀏覽器並重新整理首頁: http://localhost:4502/editor.html/content/venia/us/en.html。 您應該會看到已套用的更新產品Teaser樣式。
-
新增其他產品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樣式系統建立兩個可由內容作者開啟/關閉的樣式。 使用樣式系統開發包含詳細的步驟和如何完成此工作的資訊。