样式AEM CIF核心组件

CIF Venia Project是使用CIF核心组件的参考代码库。 在本教程中,您将检查Venia参考项目,并了解AEM CIF核心组件使用的CSS和JavaScript的组织方式。 您还将使用CSS创建新样式以更新​Product Teaser​组件的默认样式。

小贴士

启动您自己的商务实施时,请使用AEM项目原型

您将要构建的内容

在本教程中,将为类似于卡的Product Teaser组件实施新样式。 本教程中的课程可以应用到其他CIF核心组件。

将构建的内容

前提条件

需要本地开发环境才能完成本教程。 这包括已配置并连接到AEM实例的Magento实例。 查看使用AEM作为Cloud ServiceSDK设置本地开发的要求和步骤。

克隆Venia项目

我们将克隆Venia Project,然后覆盖默认样式。

注意

请随时使用现有项目 (基于包含CIF的AEM项目原型)并跳过此部分。

  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主题。 展开店面的主菜单时,您应会看到各种类别,表示连接Magento正在工作。

    使用Venia主题配置的店面

客户端库和ui.frontend模块

负责呈现店面主题/样式的CSS和JavaScript在AEM中由Client library或clientlibs来管理。 客户端库提供了一种机制,用于在项目代码中组织CSS和Javascript,然后将其交付到页面。

可通过添加和覆盖由这些客户端库管理的CSS,将特定于品牌的样式应用于AEM CIF核心组件。 了解客户端库的结构以及如何在页面上包含至关重要。

ui.frontend是一个专用的Webpack项目,用于管理项目的所有前端资产。 这允许前端开发人员使用任意数量的语言和技术,如TypeScriptSass等。

ui.frontend模块也是Maven模块,通过使用aem-clientlib-generator的NPM模块与较大的项目集成。 在生成过程中, aem-clientlib-generator会将编译的CSS和JavaScript文件复制到ui.apps模块的客户端库中。

ui.frontend到ui.apps架构

在Maven内部版本中,编译的CSS ui.frontend 和Javascript将 ui.apps 作为客户端库从模块复制到模块中

更新Teaser样式

接下来,对Teaser样式进行细微更改,以了解ui.frontend模块和客户端库的工作方式。 使用您选择的IDE导入Venia项目。 使用的屏幕截图来自Visual Studio代码IDE

  1. 导航并展开​ui.frontend​模块,然后展开文件夹层次结构以:ui.frontend/src/main/styles/commerce:

    ui.frontend商务文件夹

    请注意,文件夹下有多个Sass(.scss)文件。 这些是每个商务组件的特定于商务的样式。

  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%;
    }
    

    上述规则应在产品Teaser组件中添加一个非常粗体的粉红色边框。

  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] ------------------------------------------------------------------------
    

    Inspect终端输出。 您将看到Maven命令执行了多个NPM脚本,包括npm run buildnpm run build命令在package.json文件中定义,具有编译Webpack项目并触发客户端库生成的效果。

  6. Inspect文件ui.frontend/dist/clientlib-site/site.css:

    编译的网站CSS

    该文件是项目中所有Sass文件的编译和缩小版本。

    注意

    此类文件会从源代码管理中忽略,因为它们应在生成期间生成。

  7. 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客户端库的位置和方式。

  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的clientlibrary的一部分。 文件成为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. Inspect customheaderlibs.htmlcustomfooterlibs.htmlui.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
    

创作产品Teaser

现在,代码更新已部署,请使用AEM创作工具将产品Teaser组件的新实例添加到站点的主页。 这将允许我们查看更新的样式。

  1. 打开新的浏览器选项卡,然后导航到网站的​主页:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 在​编辑​模式下展开资产查找器(侧边栏)。 将资产筛选器切换到​Products

    展开资产查找器并按产品进行筛选

  3. 将新产品拖放到主布局容器的主页上:

    带粉色边框的产品Teaser

    您应会看到Product Teaser现在有一个基于之前创建的CSS规则更改的亮粉色边框。

验证页面上的客户端库

接下来,验证是否在页面上包含客户端库。

  1. 导航到网站的​主页:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 选择​页面信息​菜单,然后单击​查看已发布的项目:

    查看已发布的项目

    这将打开页面,且未加载任何AEM作者javascript,就像它显示在已发布的网站上一样。 请注意,URL中附加了查询参数?wcmmode=disabled。 在开发CSS和Javascript时,最好使用此参数来简化页面,而不使用AEM作者提供的任何内容。

  3. 查看页面源,您应该能够识别其中包含的多个客户端库:

    <!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文件。

包含页面模板的客户端库

有关如何包含客户端库的选项有多种。 接下来,通过页面模板检查生成的项目如何包含clientlib-site库。

  1. 在AEM编辑器中,导航到网站的​主页:http://localhost:4502/editor.html/content/venia/us/en.html

  2. 选择​页面信息​菜单,然后单击​编辑模板:

    编辑模板

    这将打开​登陆页面​模板,该模板是​Home​页面所基于的。

    注意

    要从“AEM开始”屏幕中查看所有可用的模板,请导航到​工具 > 常规 > 模板

  3. 在左上角,选择​页面信息​图标,然后单击​页面策略

    页面策略菜单项

  4. 这将打开登陆页面模板的页面策略:

    页面策略 — 登陆页面

    在右侧,您可以看到将包含在使用此模板的所有页面上的客户端库​类别​列表。

    • venia.dependencies — 提供任何依赖的供 venia.site 应商库。
    • venia.site — 这是模块生 clientlib-site 成的 ui.frontend 类别。

    请注意,其他模板使用相同的策略:内容页面登陆页面​等。通过重新使用相同的策略,我们可以确保所有页面上都包含相同的客户端库。

    使用模板和页面策略管理客户端库的包含的好处是您可以根据模板更改策略。 例如,您可能在同一AEM实例中管理了两个不同的品牌。 每个品牌将有其自己的唯一样式或​theme,但基本库和代码将相同。 另一个示例是,如果您有一个更大的客户端库,而您只希望在某些页面上显示该库,则可以仅为该模板制定唯一的页面策略。

本地Webpack开发

在上一个练习中,对ui.frontend模块中的Sass文件进行了更新,然后在执行Maven内部版本后,更改将部署到AEM。 接下来,我们将研究如何利用Webpack-dev-server来快速开发前端样式。

Webpack-dev-server代理AEM本地实例中的图像和某些CSS/JavaScript,但允许开发人员在ui.frontend模块中修改样式和JavaScript。

  1. 在浏览器中,导航到​Home​页面和​查看已发布的:http://localhost:4502/content/venia/us/en.html?wcmmode=disabled

  2. 查看页面的源,以及​copy​页面的原始HTML。

  3. 返回到在ui.frontend模块下选择的IDE,打开文件:ui.frontend/src/main/static/index.html

    静态HTML文件

  4. 覆盖在上一步中复制的HTML的index.html和​粘贴​内容。

  5. 找到clientlib-site.min.cssclientlib-site.min.js和​remove​的包含项。

    <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:

    $ cd ui.frontend
    $ npm start
    

    这将在http://localhost:8080/上启动Webpack-dev-server

    注意

    如果出现与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运行。 它将用于下一个练习。

为Product Teaser实施卡样式

接下来,修改ui.frontend模块中的Sass文件,以实现Product Teaser的类卡样式。 webpack-dev-server将用于快速查看更改。

返回到IDE和生成的项目。

  1. 在​ui.frontend​模块中,重新打开位于ui.frontend/src/main/styles/commerce/_productteaser.scss的文件_productteaser.scss

  2. 对Product 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应自动刷新新样式。

  3. 向Product 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);
    }
    
  4. 更新产品名称以显示在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%;
    }
    
  5. 更新产品价格以同时显示在Teaser底部并修改文本颜色。

    .price {
        color: #000;
        display: block;
        float: left;
        font-size: 18px;
        font-weight: 900;
        padding: 0.75em;
        padding-bottom: 2em;
        width: 25%;
    
        ...
    
  6. 更新底部的媒体查询,以在小于​992px​的屏幕中堆叠名称和价格。

    @media (max-width: 992px) {
        .productteaser .item__name {
            font-size: 18px;
            width: 100%;
        }
        .productteaser .item__price {
            font-size: 14px;
            width: 100%;
        }
    }
    

    现在,您应会看到Webpack-dev-server中反映的卡片样式:

    Webpack开发服务器Teaser更改

    但是,这些更改尚未部署到AEM。 您可以在此处下载解决方案文件

  7. 使用您的Maven技能,从命令行终端部署对AEM的更新:

    $ cd aem-cif-guides-venia/
    $ mvn clean install -PautoInstallPackage,cloud
    
    注意

    还有其他的IDE设置和工具,它们可以将项目文件直接同步到本地AEM实例,而无需执行完整的Maven生成。

查看更新的Product Teaser

将项目的代码部署到AEM后,我们现在应该能够看到对Product Teaser的更改。

  1. 返回浏览器并重新刷新主页:http://localhost:4502/editor.html/content/venia/us/en.html。 您应会看到已应用更新的产品Teaser样式。

    更新了产品Teaser样式

  2. 通过添加其他产品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核心组件的样式,并且使用了Web包开发服务器!

附加练习

使用AEM Style system创建可由内容作者打开/关闭的两个样式。 使用样式系统进 行开发,包括有关如何实现此目的的详细步骤和信息。

奖金挑战 — 风格系统

其他资源

在此页面上