SAP Spartacus Page Layout - 页面布局设计

简介: SAP Spartacus Page Layout - 页面布局设计

Page Structure - 页面结构

Pages in CMS are constructed with slots and components. A page contains slots, and slots contain components.


CMS 页面由 slots 和 components 组成。 页面包含 slots,slots 包含 Components.


image.png


To organize common slots and components, Spartacus supports page templates.


为了支持通用 slots 和 Components,Spartacus 支持 page template.


A page template contains layout and components that can be used globally, such as header and footer sections.


下面这张图展示了 id 为 homepage 的页面,其页面模板为 Landing Page 2 Template.


image.png


home 页面包含的 Content slots:


image.png

把 SiteLogo 拿出来单独看。


在 SiteLogo 这个 Slot 里查看,他放置了哪些 Component:


image.png


这里能查看到一个 slot 里到底分配了哪些 Components:


image.png

The CMS provides the page structure, but it does not provide a clear layout definition.


CMS 只定义了页面结构,但不负责提供页面布局定义。


The page structure only provides an ordered list of components per slot, but the slots themselves do not have meta info on how they should be rendered in the layout.


页面结构只定义了一个 slots的有序列表,每个 slots 里又包含了一个 Components 的有序列表。Slots 本身并不包含布局信息。


To provide layout information to the view logic, Spartacus uses a LayoutConfig configuration object to render the page slots in a given order. Additionally, you can use CSS rules to provide a specific layout.


Spartacus 使用 LayoutConfig 配置对象,来按照顺序渲染页面 slots.


Spartacus makes no distinction between page templates and page sections, and you can configure both with the LayoutConfig.


Spartacus 不区分 Page template 和 page section.


For each template or section, the slots can be configured in a specific order.


对于每一个 page template,Spartacus 还提供了额外的配置自由度:可以再次调整 slots 的相对顺序。


image.png

image.png

Using Outlets to Override Page Templates

When page templates, slots or components are rendered dynamically rendered in Spartacus, outlets get added for each slot.


每个 outlet 都关联了一个 outlet.


Outlets can be use to replace part of a page template in Spartacus.


outlet 可以被用来替换 Spartacus page template 的一部分。


The outlets for the slots are easy to find as their label corresponds to name of the element being wrapped.


下列是一个例子,如何用自定义 HTML 片段替换标准的 Component:


image.png

image.png

当然,用 Component 替换方式更简单直接。


Outlet 上下文

前面说过,outlet reference 可以关联一个 page template,一个 page slot / section 或者一个 template.


根据关联元素类型的不同,其上下文(outlet context) 也不相同。


image.png


看个例子:


image.png

image.png

毫无疑问,Section1 是一个 Slot:

image.png



注意,Backoffice 里搜索属性需要点击 + icon,添加成功后,才能在搜索中生效。


Section1 slot 里包含的是如下两个 Splash Banner Components:类型都为SimpleResponsiveBannerComponent.



image.png

image.png


第二个 Component:


image.png


按照 SAP 帮助文档的介绍,outlet context 包含的 components$ 包含的是 slot 里包含的 Component 列表。


image.png


outlet 生效的页面:


image.png


原始界面:


image.png


另一个例子:


image.png

image.png

效果:

image.png

相关文章
|
4月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
42 0
|
4月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
25 0
|
7月前
|
编解码 监控 开发者
关于 SAP UI5 Page Map 里 Flex Enabled 标志位
关于 SAP UI5 Page Map 里 Flex Enabled 标志位
33 0
|
7月前
|
数据可视化 Android开发 开发者
SAP Fiori Tools Application Modeler Page Map 标题的数据源
SAP Fiori Tools Application Modeler Page Map 标题的数据源
36 0
|
7月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
40 0
|
7月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
52 0
|
7月前
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
66 0
|
7月前
|
API
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
50 0
|
7月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
48 0