关于sap:SAP-Spartacus-Page-Layout-页面布局设计

2次阅读

共计 2661 个字符，预计需要花费 7 分钟才能阅读完成。

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

CMS 页面由 slots 和 components 组成。页面蕴含 slots，slots 蕴含 Components.

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.

home 页面蕴含的 Content slots：

把 SiteLogo 拿进去独自看。

在 SiteLogo 这个 Slot 里查看，他搁置了哪些 Component：

这里能查看到一个 slot 里到底调配了哪些 Components：

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 的绝对程序。

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

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：

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

当然，用 Component 替换形式更简略间接。

后面说过，outlet reference 能够关联一个 page template，一个 page slot / section 或者一个 template.

依据关联元素类型的不同，其上下文 (outlet context) 也不雷同。

看个例子：

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

毫无疑问，Section1 是一个 Slot：

留神，Backoffice 里搜寻属性须要点击 + icon，增加胜利后，能力在搜寻中失效。

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

第二个 Component：

依照 SAP 帮忙文档的介绍，outlet context 蕴含的 components$ 蕴含的是 slot 里蕴含的 Component 列表。

outlet 失效的页面：

原始界面：

另一个例子：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before">
  <div class="before-pdp">
    Campaign UI for Canon
  </div>
</ng-template>

成果：

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

正文完