SAP Commerce Cloud Accelerator 的响应式 Theme 介绍

SAP Commerce Cloud Accelerator 为 B2B、B2C、金融和电信等行业店面解决方案提供完全响应的店面实施。

Commerce Cloud Accelerator 包括一个完整的响应式店面实施，默认情况下为 B2B、B2C、金融服务加速器以及电信和公用事业加速器启用。项目实施人员无需单独配置桌面和移动店面；

根据用于查看页面的设备，网站页面会自动以四种尺寸（移动设备、平板电脑、台式机和超宽桌面）之一呈现。

下一张图片分别显示了台式机、平板电脑和手机尺寸的相同产品列表页面。

响应式店面目前仅适用于 B2B、B2C、金融服务加速器以及电信和公用事业加速器。 桌面版本仍可用于其他加速器实施。

关于 Accelerator 的主题

Commerce Cloud 提供了两个包含店面颜色和字体定义的主题。 B2C 店面默认使用 alpha（蓝色）主题，B2B 店面使用 lambda（黑色）主题。

主题使用 Less 来构建响应式店面页面。 您可以使用这些主题作为自己的起点，甚至可以从头开始创建新主题。

主题文件地址：

C:\Code\H2011\hybris\bin\custom\yb2bacceleratorstorefront\web\webroot_ui\responsive\theme-lambda\images

Commerce Cloud Accelerator 的响应式实施并未定义 Accelerator 桌面实施中包含的所有 WCMS 组件。 但是，没有任何限制可以阻止将这些组件添加到响应式页面。 功能齐全的响应页面使用已定义的 WCMS 组件。开发人员可以通过参考 /yacceleratorstorefront/web/webroot/WEB-INF/views/responsive/cms/ 文件夹中的文件来查看为响应式定义了哪些组件。 如果需要未实现的组件，开发人员可以在此目录中提供 JSP 定义。

SAP Commerce Cloud Accelerator 主题使用店面 UI 元素的变量，以便可以快速更改颜色。 例如，<@text-color> 变量定义文本颜色，<@link-color> 变量定义链接文本颜色。 SAP Commerce Cloud Accelerator 带有两个主题：alpha（蓝色）和 lambda（黑色）。

两个主题中使用的颜色在 variables.less 文件中定义，该文件位于 /hybris/bin/modules/base-accelerator/yacceleratorstorefront/web/webroot/WEB-INF/_ui-src/responsive/lib/ybase-0.1.0/less 目录。 特定主题中使用的颜色在 theme-variables.less 文件中定义，该文件位于 /hybris/bin/modules/base-accelerator/yacceleratorstorefront/web/webroot/WEB-INF/_ui-src/responsive/themes/ <主题名称>/less 目录。