附註
Dynamics 365 Commerce 的零售興趣群組已從 Yammer 移至 Viva Engage。 如果您無法存取新的Viva Engage社群，請填寫此表單 （https://aka.ms/JoinD365commerceVivaEngageCommunity） 以新增，並繼續參與最新的討論。
本文介紹容器模組，並說明如何在 Microsoft Dynamics 365 Commerce 中將它們新增到網站頁面。
容器模組是在其中託管其他模組的模組。 容器模組的主要用途是透過為其設定的屬性來定義它所包含之模組的版面配置。 例如，這些模組能夠以兩欄、三欄、四欄或六欄的版面配置並排顯示。 它們也可以被限制為容器的寬度，或可以填滿畫面。 也可以將標題新增到每個容器模組。
支援三種容器模組：容器、雙插槽容器和三插槽容器。 任何類型的模組都可以放在這些容器中。
附註
我們建議您始終將模組放在容器模組內，以便將它們限制為容器的寬度。
電子商務中的容器模組範例
- 網站作者想要三欄版面配置，其中三個模組會並排顯示。 因此，網站作者會使用具有 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 個插槽的容器屬性
| 屬性名稱 | 值 | 說明 |
|---|---|---|
| 標題 | 標題文字和標題標籤 | 可以為容器提供選用選項。 |
| 超小型檢視埠設定 | 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 個插槽的容器屬性
| 屬性名稱 | 值 | 說明 |
|---|---|---|
| 標題 | 標題文字和標題標籤 | 可以新增選用標題到容器。 |
| 超小型檢視埠設定 | 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。
- 將另外兩個內容區塊模組新增到容器模組，並對其進行設定。
- 選取儲存，然後選取預覽以預覽頁面。 現在，您應該會看到並排顯示的三個內容區塊模組。
- 完成您想要的版面配置後，選取結束編輯以簽入夜面，然後選取發佈來發佈它。