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.

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'
    ]
  }
};

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：

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

固然，用 Component 替換方式更簡單直接。

Outlet 上下文

前面說過，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的原創文章，盡在："汪子熙":