# 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.

![](https://img-blog.csdnimg.cn/img_convert/f08a5908ca1605bc715d33afd9ed62dd.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.

![](https://img-blog.csdnimg.cn/img_convert/7e88560e2808c39faebbe8139d42f829.png)

home 頁面包含的 Content slots：
![](https://img-blog.csdnimg.cn/img_convert/7e705a975d29cb5bd1c78e0a8362f407.png)

把 SiteLogo  拿出來單獨看。

在 SiteLogo 這個 Slot 裡檢視，他放置了哪些 Component：

![](https://img-blog.csdnimg.cn/img_convert/999f137089e7932036b6f523b7d6a365.png)

這裡能檢視到一個 slot 裡到底分配了哪些 Components：

![](https://img-blog.csdnimg.cn/img_convert/a806a6ec4db90d83ab146715f34443d5.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 的相對順序。

```typescript
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：

```html
<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) 也不相同。

![](https://img-blog.csdnimg.cn/img_convert/ec683d393f8be85803307c0fc749fbb6.png)

看個例子：

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

毫無疑問，Section1 是一個 Slot：

![](https://img-blog.csdnimg.cn/img_convert/d706e16617fed2b09bff54453fa27186.png)

注意，Backoffice 裡搜尋屬性需要點選 + icon，新增成功後，才能在搜尋中生效。

Section1 slot 裡包含的是如下兩個 Splash Banner Components：型別都為SimpleResponsiveBannerComponent.

![](https://img-blog.csdnimg.cn/img_convert/8f281768eb3e446ed3a74fc930035140.png)

![](https://img-blog.csdnimg.cn/img_convert/cd66975a98f7a1dec65801ad7c0e0df6.png)

第二個 Component：

![](https://img-blog.csdnimg.cn/img_convert/731167f5a2d2a5f1ad852598b4155773.png)

按照 SAP 幫助文件的介紹，outlet context 包含的 components$ 包含的是 slot 裡包含的 Component 列表。

![](https://img-blog.csdnimg.cn/img_convert/d8559141f14d9529097b02c29d5f0e3d.png)

outlet 生效的頁面：

![](https://img-blog.csdnimg.cn/img_convert/d828c1e819c275a95938bb23685df186.png)

原始介面：

![](https://img-blog.csdnimg.cn/img_convert/9d975b7213dd7ac45588b82cfcdbc5d0.png)

另一個例子：

```html
<ng-template cxoutletref="ProductDetailsPageTemplate" cxoutletpos="before">
  <div class="before-pdp">
    Campaign UI for Canon
  </div>
</ng-template>
```

![](https://img-blog.csdnimg.cn/img_convert/0cd9ed7d3714836a20ee6ab3345f3d68.png)

效果：

![](https://img-blog.csdnimg.cn/img_convert/312d00b293d689e24ae528b699c39286.png)

SAP Spartacus Page Layout - 頁面佈局設計

相關文章