样式AEM CIF核心组件
此 CIF Venia项目 是一个参考代码库，用于 CIF核心组件. 在本教程中，您将检查Venia参考项目，并了解AEM CIF核心组件使用的CSS和JavaScript的组织方式。 您还将使用CSS创建样式，以更新 产品Teaser 组件。
使用 AEM项目原型 在开始您自己的commerce实施时。
您将构建的内容
在本教程中，将实施类似于信息卡的Product Teaser组件的新样式。 从本教程中吸取的经验教训可以应用于其他CIF核心组件。
前提条件
需要本地开发环境来完成本教程。 这包括正在运行的AEM实例，该实例已配置并连接到Adobe Commerce实例。 查看的要求和步骤 使用AEM设置本地开发.
克隆Venia项目
我们克隆 Venia项目 然后覆盖默认样式。
可以随意使用现有项目 (基于包含CIF的AEM项目原型)并跳过此部分。
-
运行以下git命令以克隆项目：
$ git clone git@github.com:adobe/aem-cif-guides-venia.git -
生成项目并将其部署到AEM的本地实例：
$ 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模块
在AEM中，负责呈现店面主题/样式的CSS和JavaScript由 客户端库 或clientlibs简称。 客户端库提供了一种机制，用于在项目代码中组织CSS和JavaScript，然后将其交付到页面上。
通过添加和覆盖由这些客户端库管理的CSS，可以将品牌特定的样式应用于AEM CIF核心组件。 了解如何在页面上构建和包含客户端库至关重要。
此 ui.frontend 是专用的 webpack 用于管理项目的所有前端资产的项目。 这允许前端开发人员使用任意数量的语言和技术，例如 TypeScript， 萨斯 等等。
此 ui.frontend 模块也是Maven模块，通过使用NPM模块与更大的项目集成 aem-clientlib-generator. 在构建期间， aem-clientlib-generator 将编译后的CSS和JavaScript文件复制到中的客户端库中 ui.apps 模块。
编译后的CSS和JavaScript会从 ui.frontend 模块移入 ui.apps 在Maven构建期间用作客户端库的模块
更新Teaser样式
接下来，对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规则并修改边框规则：.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文件夹：$ cd <project-location>/aem-cif-guides-venia/ui.frontend -
运行以下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 build. 此npm run build命令在package.json文件，具有编译webpack项目和触发客户端库生成的效果。 -
Inspect文件
ui.frontend/dist/clientlib-site/site.css：
该文件是项目中所有Sass文件的编译和缩小版本。
注意此类文件会从源代码管理中忽略，因为它们应在构建期间生成。
-
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客户端库的位置和方式。
-
在
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。注意此类文件也会从源代码管理中忽略，因为它们应在构建期间生成。
-
接下来，检查项目生成的其他客户端库：
这些客户端库不受
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文件
customheaderlibs.html和customfooterlibs.html下ui.apps/src/main/content/jcr_root/apps/venia/components/page：
这些脚本包括 venia.base 和 venia.cif 库作为所有页面的一部分。
注意在页面脚本中，只有基础库是“硬编码”的。
venia.site不会包含在这些文件中，而是作为页面模板的一部分包含，以便更加灵活。 稍后会检查此项。 -
从终端，构建整个项目并将其部署到AEM的本地实例：
$ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud
创作产品Teaser
现在已部署代码更新，请使用AEM创作工具将新的Product Teaser组件实例添加到网站的主页。 这允许我们查看更新的样式。
-
打开新的浏览器选项卡，然后导航到 主页 网站的： http://localhost:4502/editor.html/content/venia/us/en.html.
-
在中展开资产查找器（侧边栏） 编辑 模式。 将资源筛选器切换到 产品.
-
将新产品拖放到主布局容器的主页上：
您应该会看到，根据之前创建的CSS规则更改，产品Teaser现在具有亮粉红色边框。
验证页面上的客户端库
接下来，验证页面上是否包含客户端库。
-
导航到 主页 网站的： http://localhost:4502/editor.html/content/venia/us/en.html.
-
选择 页面信息 菜单并单击 查看已发布的项目：
这将打开页面，而不加载任何AEM创作JavaScript，就像在已发布的网站上显示的那样。 请注意，url具有查询参数
?wcmmode=disabled已附加。 在开发CSS和JavaScript时，最好使用此参数来简化页面，而无需使用AEM创作中的任何内容。 -
查看页面源，您应该能够识别包括多个客户端库：
<!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并通过提供 代理 以避免泄露任何敏感内容/apps或/libs.注意
venia/clientlibs/clientlib-site.min.css和venia/clientlibs/clientlib-site.min.js. 它们是编译的CSS和JavaScript文件，这些文件派生自ui.frontend模块。
包含客户端库和页面模板
有几个选项可用于包含客户端库。 接下来，检查生成的项目如何包含 clientlib-site 库，通过 页面模板.
-
导航到 主页 AEM网站的URL路径： http://localhost:4502/editor.html/content/venia/us/en.html.
-
选择 页面信息 菜单并单击 编辑模板：
这将打开 登陆页面 模板 主页 页面基于。
注意要从AEM开始屏幕查看所有可用的模板，请导航到 工具 > 常规 > 模板.
-
在左上角，选择 页面信息 图标并单击 页面策略.
-
这将打开登陆页面的页面策略模板：
在右侧，您可以看到客户端库的列表 类别 该模板将被包含在使用此模板的所有页面中。
venia.dependencies— 提供符合以下条件的任何供应商库：venia.site取决于。venia.site— 这是的类别clientlib-site该ui.frontend模块生成。
请注意，其他模板使用相同的策略， 内容页面， 登陆页面，等等。 通过重用相同的策略，我们可以确保在所有页面上包含相同的客户端库。
使用模板和页面策略管理客户端库包含的好处是，您可以根据模板更改策略。 例如，您可能在同一个AEM实例中管理两个不同的品牌。 每个品牌都有自己独特的风格或 主题 但基础库和代码将相同。 另一个示例是，如果您有一个更大的客户端库，而您只想显示在某些页面上，则可以为该模板制定一个唯一的页面策略。
本地Webpack开发
在上一个练习中，更新了 ui.frontend 模块，然后在执行Maven构建后，将更改部署到AEM。 接下来，我们将考虑使用webpack-dev-server快速开发前端样式。
webpack-dev-server代理来自AEM的本地实例的图像和一些CSS/JavaScript，但允许开发人员修改中的样式和JavaScript ui.frontend 模块。
-
在浏览器中，导航到 主页 页面和 查看已发布的项目： http://localhost:4502/content/venia/us/en.html?wcmmode=disabled.
-
查看页面源和 复制 页面的原始HTML。
-
返回您选择的IDE，位于
ui.frontend模块打开文件：ui.frontend/src/main/static/index.html
-
覆盖的内容
index.html和 粘贴 上一步中复制的HTML。 -
查找的包含
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实例代理的其他客户端库。 -
打开新的终端窗口并导航到
ui.frontend文件夹。 运行命令npm start：$ cd ui.frontend $ npm start这将启动webpack-dev-server on http://localhost:8080/
注意如果收到Sass相关错误，请停止服务器并运行命令
npm rebuild node-sass并重复上述步骤。 如果您有其他版本的npm和node然后在项目中指定aem-cif-guides-venia/pom.xml. -
导航到 http://localhost:8080/ 与登录的AEM实例使用同一浏览器的新选项卡中。 您应会通过webpack-dev-server看到Venia主页：
使webpack-dev-server保持运行状态。 它将在下一个练习中使用。
实施产品Teaser的卡片样式
接下来，修改 ui.frontend 模块，用于为Product Teaser实施类似卡片的样式。 webpack-dev-server用于快速查看更改。
返回到IDE和生成的项目。
-
在 ui.frontend 模块，重新打开文件
_productteaser.scss在ui.frontend/src/main/styles/commerce/_productteaser.scss. -
对产品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应自动使用新样式刷新。
-
在产品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); } -
更新产品名称以显示在Teaser底部，并修改文本颜色。
.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的底部，并修改文本颜色。
.price { color: #000; display: block; float: left; font-size: 18px; font-weight: 900; padding: 0.75em; padding-bottom: 2em; width: 25%; ... -
更新底部的媒体查询，在小于的屏幕中栈叠名称和价格 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。 您可以下载 此处为解决方案文件.
-
使用您的Maven技能从命令行终端将更新部署到AEM：
$ cd aem-cif-guides-venia/ $ mvn clean install -PautoInstallPackage,cloud注意还有其他的 IDE设置和工具 可以直接将项目文件同步到本地AEM实例，而无需执行完整的Maven构建。
查看更新的产品Teaser
将项目的代码部署到AEM后，您应该能够看到对产品Teaser所做的更改。
-
返回浏览器并刷新主页： http://localhost:4502/editor.html/content/venia/us/en.html. 您应该会看到已应用的更新后的产品Teaser样式。
-
通过添加其他产品Teaser进行试验。 使用“布局模式”可更改组件的宽度和偏移，以便一行显示多个Teaser。
疑难解答
您可以验证 CRXDE-Lite 已部署更新的CSS文件： http://localhost:4502/crx/de/index.jsp#/apps/venia/clientlibs/clientlib-site/css/site.css
在部署新的CSS和/或JavaScript文件时，确保浏览器不提供过时文件也很重要。 您可以通过清除浏览器缓存或启动新的浏览器会话来消除此情况。
AEM还会尝试缓存客户端库以提高性能。 有时，在代码部署后，会提供旧文件。 您可以使用手动使AEM客户端库缓存失效 重建客户端库工具. 如果您怀疑AEM缓存了客户端库的旧版本，首选方法是使缓存无效。 重建库效率低下且耗时。
恭喜
您创建了第一个AEM CIF核心组件的样式，并且使用了webpack开发服务器！
奖励质询
使用 AEM样式系统 创建可由内容作者打开/关闭的两种样式。 用样式系统进行开发 包括有关如何完成此操作的详细步骤和信息。
其他资源
Business.Adobe.com 资源
