容器模組
本文涵蓋容器模組並描述如何將它們新增至網站頁面 Microsoft Dynamics 365 Commerce。
容器模組是在其中託管其他模組的模組。 容器模組的主要目的是透過為其設定的屬性來定義它所包含的模組的配置。 例如，這些模組可以並排出現在兩列、三列、四列或六列配置 中。 它們也可以限制為容器的寬度，或者可以填滿螢幕。 也可以將標題新增至每個容器模組。
支援三種容器模組：容器、2 插槽容器和 3 插槽容器。 任何類型的模組都可以放入這些容器中。
附註
我們建議您始終將模組放入容器模組中，以便將它們限制為容器的寬度。
電子商務中的容器模組範例
- 網站 作者 想要一個三列 配置，其中三個模組並排出現。 因此，站點作者使用3槽類型容器的容器模組。
- 網站 作者 想要一個六列 配置，其中六個模組並排出現。 因此，網站 作者 使用包含類型的容器，其中包含六個欄位。
- 網站 作者 想要將模組放在頁面上，但不希望它填滿螢幕。 因此，網站 作者 將模組新增至容器模組中，並將容器的 寬度 屬性設為 適合容器。
下圖顯示了 Commerce 網站建立器 中包含輪播模組的容器模組範例。 在此範例中，容器模組的 寬度 屬性設定為 填滿螢幕。
容器模組屬性
| 屬性名稱 | 值 | 描述 |
|---|---|---|
| 標題 | 標題文字與標題標記（H1、 H2、 H3、 H4、 H5 或 H6) | 可以為容器提供可選的標題。 預設情況下， H2 標題標記用於標題。 但是，可以更改標籤以滿足可訪問性要求。 |
| 寬度 | 適合容器 或 填滿螢幕 | 如果該值設定為 適合容器 （預設值），則容器內的模組將限制為容器的寬度。 如果該值設定為 填滿螢幕，則模組不限於容器寬度，但可以填滿螢幕。 |
| 欄數目 | 1, 2, 3, 4、 6 或 12 | 此屬性定義容器中的列數。 一個容器最多可以有 12 列。 |
2槽容器
2 槽類型的容器針對兩列 配置 進行了最佳化。 這種類型的容器有兩個插槽，可以並排查看內部模組。
其他屬性可用於針對不同的視圖連接埠（行動裝置、平板電腦、電腦等）最佳化 配置。 對於每個視口，可以定義每列的寬度。 可以使用以下列寬設定：
- 75%/25% – 第一個模組的列寬為 75%，第二個模組的列寬為 25%。 也提供 25%/75% 選項。
- 50%/50% – 兩個模組具有相同的列寬。
- 67%/33% – 第一個模組的列寬為 67%，第二個模組的列寬為 33%。 也提供 33%/67% 選項。
- 100% – 兩個模組都有全列寬度。 因此，模組垂直堆疊在一列中。 儘管此單列 配置 違反了 2 插槽類型容器的意圖，但它對於某些視口（例如，行動裝置等超小視窗）可能更可取。
具有 2 槽屬性的容器
| 屬性名稱 | 值 | 描述 |
|---|---|---|
| 標題 | 標題文字和標題標籤 | 可以為容器提供可選的。 |
| X-小視圖連接埠配置 | 25%/75%、 75%/25%、 50%/50%、 67%/33%、 33%/67% 或 100% | 此屬性定義超小視窗的 配置。 |
| 小視窗配置 | 25%/75%、 75%/25%、 50%/50%、 67%/33%、 33%/67% 或 100% | 此屬性定義小視圖連接埠（例如行動裝置）的配置。 |
| 中視窗配置 | 25%/75%、 75%/25%、 50%/50%、 67%/33%、 33%/67% 或 100% | 此屬性定義中等視圖連接埠（例如平板電腦）的配置。 |
| 大視窗配置 | 25%/75%、 75%/25%、 50%/50%、 67%/33%、 33%/67% 或 100% | 此屬性定義大視圖連接埠（例如電腦）的 配置。 |
3槽容器
具有 3 插槽模組類型的容器針對三列 配置 進行了最佳化。
其他屬性可用於最佳化不同視窗的 配置。 對於每個視口，可以定義每列的寬度。 可以使用以下列寬設定：
- 33%/33%/33% – 所有三個模組都具有相同的列寬。
- 50%/25%/25% – 第一個模組的列寬為 50%，其餘兩個模組的列寬均為 25%。 另提供 25%/50%/25% 和 25%/25%/50% 選項。
- 16%/16%/67% – 前兩個模組的列寬均為 16%，第三個模組的列寬為 67%。 另提供 16%/67%/16% 和 67%/16%/16% 選項。
具有 3 槽屬性的容器
| 屬性名稱 | 值 | 描述 |
|---|---|---|
| 標題 | 標題文字和標題標籤 | 可以將可選標題新增至容器。 |
| X-小視圖連接埠配置 | 33%/33%/33%、 50%/25%/25%、 25%/50 %/25%、 25%/25%/50%、 16%/16%/67% 、 16%/67%/16%或 67%/16%/16% | 此屬性定義超小視窗的 配置。 |
| 小視窗配置 | 33%/33%/33%、 50%/25%/25%、 25%/50 %/25%、 25%/25%/50%、 16%/16%/67% 、 16%/67%/16%或 67%/16%/16% | 此屬性定義小視圖連接埠（例如行動裝置）的配置。 |
| 中視窗配置 | 33%/33%/33%、 50%/25%/25%、 25%/50 %/25%、 25%/25%/50%、 16%/16%/67% 、 16%/67%/16%或 67%/16%/16% | 此屬性定義中等視圖連接埠（例如平板電腦）的配置。 |
| 大視窗配置 | 33%/33%/33%、 50%/25%/25%、 25%/50 %/25%、 25%/25%/50%、 16%/16%/67% 、 16%/67%/16%或 67%/16%/16% | 此屬性定義大視圖連接埠（例如電腦）的 配置。 |
將容器模組新增至頁面
若要將容器播放器模組新增至新頁面並設定所需的屬性，請執行 跟隨 這些步驟。
- 前往 範本，然後選擇 新建 建立新範本。
- 在 新範本 對話方塊中的 範本名稱下，輸入 容器範本，然後選擇 確定。
- 在 正文 插槽中，選擇省略號 (...)，然後選擇 新增模組。
- 在 選擇模組 對話方塊中，選擇 預設頁面 模組，然後選擇 確定。
- 選擇 儲存，選擇 完成編輯 以簽入模板，然後選擇 發佈 以發布它。
- 前往 頁面，然後選擇 新建 以建立新頁面。
- 在 建立新頁面 對話方塊中的 頁面名稱下，輸入 容器頁，然後選擇 下一步。
- 在 選擇範本下，選擇您建立的 容器範本 ，然後選擇 下一步。
- 在 選擇 配置 下，選擇頁面 配置（例如， Flexible 配置），然後選擇 下一步。
- 在 查看並完成下，查看頁面配置。 如果您需要編輯頁面訊息，請選擇 返回。 如果頁面資訊正確，請選擇 建立頁面。
- 在新頁面的 Main 插槽中，選擇省略號 (...)，然後選擇 新增模組。
- 在 選擇模組 對話框中，選擇 容器 模組，然後選擇 確定 。
- 在容器模組的屬性窗格中，將 列數 屬性設為 1 並將 寬度 屬性 填充容器。
- 在 容器 插槽中，選擇省略號 (...)，然後選擇 新增模組。
- 在 選擇模組 對話方塊中，選擇 內容區塊 模組，然後選擇 確定。
- 在內容區塊 模組的屬性窗格中，設定標題、映像和配置。
- 選擇 儲存，然後選擇 預覽版 to 預覽版 頁面。 您應該會看到一個適合容器模組寬度的功能模組。
- 在容器模組的屬性窗格中，將 列數 屬性的值變更為 3。
- 將另外兩個 內容區塊 模組新增到容器模組中，並配置它們。
- 選擇 儲存，然後選擇 預覽版 to 預覽版 頁面。 現在您應該會看到三個並排出現的內容區塊 模組。
- 獲得所需的 配置 後，選擇 完成編輯 簽入頁面，然後選擇 發布 發布它。