容器模組
本文介紹容器模組，並介紹如何將它們添加到網站頁面 Microsoft Dynamics 365 Commerce。
容器模組是在其中託管其他模組的模組。 容器模組的主要用途是通過為其設置的屬性來定義它所包含的模組的配置。 例如，這些模組可以並排顯示在兩列、三列、四列或六列配置中。 它們也可以限制為容器的寬度，或者它們可以填滿螢幕。 還可以將標題添加到每個容器模組。
支援三種容器模組：容器、2 插槽容器和 3 插槽容器。 任何類型的模組都可以放在這些容器中。
附註
我們建議您始終將模組放在容器模組內，以便將它們限制為容器的寬度。
電子商務中的容器模組範例
- 網站作者需要一個三列配置，其中三個模組並排顯示。 因此，網站作者使用具有 3 插槽類型的容器的容器模組。
- 網站作者需要一個六列配置，其中六個模組並排顯示。 因此，網站作者使用包含類型的容器，其中包含六列。
- 網站作者想要將模組放在頁面上，但不希望它填滿螢幕。 因此，網站作者將模組添加到容器模組，並將容器的 Width 屬性設置為 適合容器。
下圖顯示了在 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% | 此屬性定義大型檢視埠 (如計算機) 的配置。 |
將容器模組新增到頁面
若要將容器播放機模組添加到新頁面並設置所需的屬性，跟隨執行以下步驟。
- 轉到 “範本”，然後選擇“ 新建 ”以創建新範本。
- 在“新建範本 ” 對話框中的“範本名稱 ”下，輸入 “容器範本”，然後選擇“ 確定”。
- 在“ 正文 ”插槽中，選擇省略號 (...)，然後選擇“ 添加模組”。
- 在“選擇模組 ” 對話框中，選擇 “默認頁面 ”模組，然後選擇“ 確定”。
- 選擇 保存，選擇 完成編輯 以簽入範本，然後選擇 發佈 以發佈它。
- 轉到 「頁面」，然後選擇「 新建 」以創建新頁面。
- 在“創建新頁面” 對話框中的“頁面名稱 ”下 ，輸入“容器頁面 ”，然後選擇“下一步 ”。
- 在“選擇範本 ”下，選擇 創建的“容器”範本 ，然後選擇“ 下一步”。
- 在 “選擇配置”下，選擇頁面配置 (例如“ 靈活配置”)，然後選擇“ 下一步”。
- 在「查看並完成 」下，查看頁面配置。 如果需要編輯頁面資訊，請選擇“ 返回”。 如果頁面資訊正確，請選擇「 創建頁面」。
- 在新頁面的主 插槽中，選擇省略號 (...)，然後選擇添加 模組。
- 在“選擇模組 ” 對話框中，選擇 “容器 ”模組，然後選擇“ 確定”。
- 在容器模組的屬性窗格中，將列 數屬性設置為 1 ，將寬度 屬性 設置為 填充容器。
- 在容器 插槽中，選擇省略號 (...)，然後選擇 添加模組。
- 在“選擇模組 ” 對話框中，選擇 內容區塊 模組，然後選擇“ 確定”。
- 在內容區塊模組的屬性窗格中，配置標題、圖像和配置。
- 選擇「 保存」，然後選擇預覽版 以預覽版頁面。 應會看到一個適合容器模組寬度的功能模組。
- 在容器模組的屬性窗格中，將列 數屬性的值 更改為 3。
- 將另外兩個內容區塊模組添加到容器模組，並對其進行配置。
- 選擇「 保存」，然後選擇預覽版 以預覽版頁面。 現在，您應該看到並排顯示的三個內容區塊模組。
- 實現所需的配置後，選擇 完成編輯 簽入頁面，然後選擇 發佈 發佈發佈頁面。