SAP Spartacus的页面布局配置 - LayoutConfig

The CMS provides the page structure, but it does not provide a clear layout definition. 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.

CMS只提供了页面结构，但不包含布局定义。所谓页面结构，即slot及其包含的Component的有序列表，但是slot本身不包含其如何在布局阶段被渲染的信息。

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的配置对象，以此来按照指定的顺序渲染page slot.

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

As with any Spartacus configuration, you can provide the LayoutConfig to the ConfigModule.

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

我们可以对slot的出现顺序进行如下图所示的配置：

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

做个实验：把header section里的slots注释得只剩MiniCart和NavigationBar：

渲染出的页面：

把navigationBar也注释之后：

在app.module.ts里注入LayoutConfig：

运行时的对应数据：

在一般尺寸的屏幕里，渲染三个logo，一个minicart：

正常尺寸大小的屏幕里，显示4个logo：

更多Jerry的原创文章，尽在："汪子熙":