官方文档

Spartacus 基于单页面应用程序设计模式，但仍有页面呈现在店面中。 “页面”的概念是网络的关键并且无法避免：页面由 URL 标识、由搜索引擎索引、通过社交媒体共享、存储在浏览器历史记录中等等。页面是最终用户的基础，也是内容创建过程的基础。

Page structure

CMS 中的页面由槽和组件构成。页面包含插槽，插槽包含组件。为了组织公共插槽和组件，Spartacus 支持页面模板。页面模板包含可全局使用的布局和组件，例如页眉和页脚部分。

CMS 提供了页面结构，但没有提供清晰的布局定义。页面结构只为每个插槽提供一个有序的组件列表，但插槽本身没有关于它们应该如何在布局中呈现的元信息。

为了向视图逻辑提供布局信息，Spartacus 使用 LayoutConfig 配置对象以给定的顺序呈现页面插槽。此外，您可以使用 CSS 规则来提供特定的布局。

如何配置布局

Spartacus 不区分页面模板和页面部分，您可以使用 LayoutConfig 配置两者。与任何 Spartacus 配置一样，您可以向 ConfigModule 提供 LayoutConfig。

对于每个模板或部分，可以按特定顺序配置插槽。下面是一个例子：

const defaultLayoutConfig: LayoutConfig = {header: {slots: ['TopHeaderSlot','NavigationSlot']},footer: {slots: ['FooterSlot']},LandingPageTemplate: {slots: ['Section1','Section2A','Section2B']}
};

为了简化项目的初始设置，如果页面布局配置不完整，则所有页面槽都在页面上呈现。此外，还会向控制台打印一条警告，以及有关可配置的可用页槽的信息。

Using Outlets to Override Page Templates

outlet 无法完全重定义新的 Component，只能插入自定义 HTML 代码到标准 Component 的 HTML 里。

当页面模板、插槽或组件在 Spartacus 中动态呈现时，Spartacus 将为每个插槽添加 Outlets。 Outlets 可用于替换 Spartacus 中的部分页面模板。插槽的出口很容易找到，因为它们的标签对应于被包装元素的名称。

以下是如何使用插座替换 ProductAddToCartComponent 的示例：

<ng-template cxOutletRef="ProductAddToCartComponent"><div>Custom Title</div><custom-add-to-cart></custom-add-to-cart>
</ng-template>

Outlet Context

插座包含一个上下文，它是一个对象，包含可以在插座内使用的各种属性。每个出口的上下文根据其包含的元素而不同。

以下示例演示了如何使用上下文来获取插槽内的组件列表：

<ng-template cxOutletRef="Section1" let-model>"Section1" position<pre>{{ model.components$ | async | json }}</pre>
</ng-template>

CSS Layout Rules

在呈现页面布局或部分布局的插槽时，页面模板名称的值被添加为 DOM 元素的 CSS 类。您还可以使用插槽的 cx-page-slot 或位置名称来选择每个插槽。您可以使用这些 CSS 类以松散耦合的方式将特定的样式规则映射到布局。 Spartacus 提供的 CSS 是可选的，因此您可以添加新样式或修改现有样式。

由于页面布局由页面模板代码和位置名称驱动，因此布局与后端的安装数据紧密耦合。如果您决定添加或替换页面模板和插槽位置，您还需要调整相关的 CSS 规则。

Choosing an Adaptive or Responsive Layout

Spartacus 店面是使用响应式设计而非自适应设计实现的。对于店面软件开发以及内容制作，响应式设计被广泛接受，因为它实施速度更快且更具成本效益。

但是，没有什么能阻止您在 Spartacus 店面中使用自适应设计方法。 SAP Commerce Cloud 后端支持多站点实施，并且可以针对不同站点配置不同的内容（目录）。

UI 层中的自适应设计可以在可访问性和性能方面为最终用户带来更好的体验。对于这两个方面，Spartacus 允许为每个断点进行自适应配置。可以为每个断点提供特定的插槽配置。下面的示例配置显示了用于超小 (xs) 屏幕的替代插槽配置，具有不同的顺序（以提高可访问性）和有限数量的插槽（以提高性能）。

const defaultLayoutConfig: LayoutConfig = {header: {slots: ['FirstSlot','SecondSlot','LastSlot'],xs: ['LastSlot','FirstSlot']}
};

Accessibility

仅响应式方法无法解决可访问性的所有用例，例如重新排序组件的能力。您可能还需要重新对组件排序以优化访问您店面的不同设备的用户体验。 Spartacus 中的标题就是一个很好的例子：对于大屏幕，所有元素都是可见的，但在小设备上，一些组件隐藏在汉堡菜单后面，一些组件被重新排列。

尽管 CSS 支持 DOM 元素的重新排序，包括 flex-box 和 grid，但重新排序的 DOM 元素与 HTML Tab 系统不同步。这不会为使用标签系统浏览店面的人提供最佳体验。每个断点的插槽配置解决了这个问题。为每个断点（重新）构建布局。

服务器端渲染

使用服务器端呈现 (SSR) 在服务器上呈现页面时需要特别注意。每当 SSR 进程或边缘缓存层无法寻址客户端设备时，该进程应决定合适的断点来呈现屏幕。能够完整呈现所有内容的断点更适合搜索引擎，这对于桌面断点来说是典型的。另一方面，针对性能进行优化的断点可为在移动设备上访问店面的最终用户提供更好的体验。

在 Spartacus 中，始终呈现所有内容。如果可能的话，可以根据设备检测改进服务器端渲染，或者提供标准视口（移动优先）。

SAP Spartacus 的页面布局相关推荐

如何定制化SAP Spartacus的页面布局
新建一个Layout Module,源代码如下: import { NgModule } from '@angular/core'; import { ConfigModule } from '@sp ...
SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
通过 Feature Level 动态控制 SAP Spartacus 的页面显示
ng-container 标签只在 design time 可见,运行时会完全从渲染出的 HTML 源代码里被移除.通过 ng-container 加上 SAP Spartacus 自定义实现的 cx ...
SAP Spartacus login 页面看不到 UI 控件的问题解决
问题截图:Login 页面下面是空的我直接修改 Spartacus-core.js 不现实: 因为我没有能力去修改对应的 source code map 文件: 这个 getDetails 只是一个 ...
SAP Spartacus CMS 页面加载逻辑和性能的优化
https://github.com/SAP/spartacus/issues/3649 SAP Commerce Cloud CMS 页面加载的一些优化点: Payload of the CMS p ...
如何在SAP Spartacus category 页面里拿到当前的category信息
需求 https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category ...
SAP Spartacus B2B页面Budget页面的设计原理
打开SAP Spartacus My Company菜单,第一个banner即为Budgets页面的入口: http://localhost:4200/powertools-spa/en/USD/or ...
SAP Spartacus 的页面设计思路
CMS提供了page structure,但不提供clear layout definition. 所谓CMS page structure,即CMS只提供了一个有序清单,包含了slots和Compo ...

SAP Spartacus 的页面布局