# 集合列表 集合列表是在CMS集合或電子商務集合中添加和設計動態內容的兩種方式之一。 您可以在任何類型的頁面上添加集合列表。另一種添加動態內容的方式是使用集合頁面。 本文會提到： 1. 添加集合列表 2. 將集合列表連接到集合 3. 設計集合列表 4. 理解集合列表的結構 5. 配置集合列表的設置 ## 添加集合列表 只要有一個或多個帶有項目的集合，就可以在您的項目中的任何靜態頁面或集合頁面上添加集合列表。您可以簡單地從添加面板上拖動集合列表，或者從快速查找（CMD/CTRL+E）中添加一個。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FRnNZ1JG0Q4XtA6sMIjhn%2Fimage.png?alt=media\&token=8237b8f1-561b-4429-b0bb-b8dca0461921) ## 連接到集合 除非連接到集合體，否則集合體列表是沒有用的。\ 雙擊集合列表，打開集合列表設置，從下拉選單中選擇您想要的集合。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FR2fHWVZJ1yehsChNqQw5%2Fimage.png?alt=media\&token=8898f3e4-68d0-44c1-a122-eac2dd43f49a) ## 設計集合列表 選擇集合之後，集合列表將顯示該集合中的所有項目，作為空塊。\ 您將能夠向列表中添加元素，將其連接到集合字段後，將會自動獲得每個集合項目的正確數據。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F1OmfcTKkp5LNn8MxvoI7%2Fimage.png?alt=media\&token=9e03b788-c7c3-4564-b96e-37aa220034c9) ### 添加靜態和動態元素 把元素放到空的集合項目塊中時，這個項目會對該集合中的所有項目進行重複。這被稱為"靜態"內容，或不來自集合的內容。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F5eeYxof6Ph2m1mgZue84%2Fimage.png?alt=media\&token=05c27302-eca6-432c-b60b-06a293ea299b) 現在當元素連接到集合字段時，那麽它將自動用每個集合項的內容替換該元素中的內容。這就變成了"動態"內容，因為這些內容來自CMS。 ### 將元素連接到集合字段 您可以將靜態元素連接到集合字段，並動態地更新該元素的內容。\ 靜態元素呈現藍色，而動態元素或CMS的數據的元素呈現紫色。 要連接元素到集合字段： 1. 在集合列表中選擇該元素 2. 打開元素設置 3. 勾選標有 "從獲取"的方框。 4. 打開下拉選單，選擇想獲得內容的集合字段 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FtqZmDOEaZZWT9THKmhB0%2Fimage.png?alt=media\&token=a168fc12-2c0c-4ae5-af23-fe0759e6238b) ### 動態元素的樣式 就像將靜態元素添加到集合列表中會重復這些項目一樣，將樣式添加到任何元素（靜態或動態）中會在該列表中的所有集合項目中應用該樣式。\ 例如我們將標題連接到一個字段，然後將該標題樣式化為綠色文本顏色，該列表中的所有項目將有不同的內容，但有相同的綠色樣式。 您可以透過從顏色和圖像字段中提取顏色和背景圖像來應用動態樣式設置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fkrrwal9xrNzWJUjaMuvH%2Fimage.png?alt=media\&token=0f587f24-7569-4905-ab57-2ae4fb450c2d) ## 理解收集清單的解剖結構 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FwiMkzcoRbwfS3DLJMyp8%2Fimage.png?alt=media\&token=f77f77bb-85f7-4bed-9106-0d93efa832bf) ### 集合列表包裝器 默認情況下，一個集合列表包裝器包含以下組件：集合列表和空狀態。如果分頁功能被啟用，它還包含分頁包裝器。您可以通過複製包裝器來添加多個分頁包裝器。 ### 集合列表 集合列表組件包含列表的集合項，您不能向這個組件添加其他元素。 ### 集合項目 集合項目組件包含添加到集合列表中的實際內容。 任何丟在這裡的項目都會填充到列表中的所有項目。這些元素是靜態的，直到它們被連接到集合字段或有條件的可見性應用到它們後，才會把它們轉換為動態元素。 在導航器中，動態元素用紫色圖標表示。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FlwOdj3m6pvEpnqHb939k%2Fimage.png?alt=media\&token=4451eb90-6ff4-428e-8888-8be27a25a481) ### 空狀態 當列表沒有項目可供顯示時，空狀態會取代集合列表。默認情況下，它有灰色背景並包含文本塊，這可以改變風格，替換或添加更多的元素來創建自定義的空狀態。 ### 分頁 分頁組件包含兩個連結塊：上一個按鈕和下一個按鈕。每一個都可以進行樣式設計和設定，但是不能在這個包裝上添加其他元素。 ## 配置集合列表的設置 集合列表有自己的設置來控制被顯示的內容，還可以通過多種方式改變列表的布局。透過選擇集合列表包裝器或集合列表元素，然後按Enter鍵或按D鍵打開元素設置面板來訪問這些設置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FaBH84pjG7EEsLU6SSIuG%2Fimage.png?alt=media\&token=2d362129-1303-4ee1-ae7e-d3f15c23f911) ### 集合 在這裡您可以選擇想連接到集合列表的哪個項目。只有當列表裡面的元素都沒有連接到當前連接的集合的字段時，您才能改變連接到集合列表的項目。 ### UI狀態 這個設置允許您在項目視圖和空狀態視圖之間切換，以便可以編輯集合列表的那個狀態。 這個設置並不設置實時站點上的集合列表的狀態。集合列表的實際狀態是由其項目決定的。空狀態只在集合中沒有項目或被過濾掉時顯示。 ### 布局 可以保持列表的垂直堆疊，或者可以把布局改為列，類似於列元素。 也可以將網格應用到集合列表中以創建一個動態網格，請確保將集合列表設置中的布局設置為"列表"。 **專業提示**\ 建議使用flexbox來為Collection列表建立等高的布局。每個集合項目中的內容可能會有所不同，並導致非基於flexbox的列布局出現錯位。 ### 篩選器 添加過濾器可以只顯示您想要的集合項目--符合設置中規定的一個或多個標準的集合項目。 ### 排序順序 排序順序可以讓根據特定的字段對集合列表進行排序。 ### 分頁顯示項目 給集合列表分頁以顯示特定數量的項目/頁。 ### 限制項目 這個選項可以讓您定義在集合列表中顯示多少個項目，以及從哪個項目開始列出。例如可以設定讓列表從項目5開始，只顯示3個項目。這將顯示項目5、6和7。 除非啟用分頁功能，否則每個集合列表的最大限制是100個項目，每頁20個列表。