品種目錄

使用集合清單將集合的動態內容新增到您的網站。

分類目錄是合併 CMS 集合或電子商務集合中的動態內容並設定其樣式的兩種方法之一(另一種方法是利用集合頁面)。您可以將分類目錄包含到您網站上的任何 category 頁面中。

在深入研究分類目錄之前,請隨時在我們的其他教程中學習有關 CMS 和 CMS 集合的更多資訊:

  • Webflow CMS簡介
  • 動態內容概述
  • 選集

在本教程中,您將發現:

  1. 如何包含分類目錄
  2. 如何將您的分類目錄連結到集合
  3. 如何設計分類目錄的樣式
  4. 分類目錄的結構
  5. 如何配置分類目錄設定
  6. 關於分類目錄中的元件

如何合併分類目錄

如果您擁有一個或多個帶有分類商品的系列,您就可以將分類目錄合併到您網站上的任何持久頁面或系列頁面。要合併分類目錄:

  1. 發起 插入面板
  2. 點擊並繪製一個 品種目錄 到您的網站頁面

您也可以使用快速搜尋包含分類目錄: 命令 + (在 Mac 上)或 控制 + (在 Windows 上)。

如何將您的分類目錄連結到集合

分類目錄在與集合關聯之前是無效的。要將分類目錄連結到集合:

  1. 按兩下 品種目錄 展開分類目錄設定
  2. 選擇您喜歡的系列 來源 (例如,作者、部落格文章、客戶等)
所選集合項目的來源下拉式選單。有 6 個 CMS 集合,但沒有一個作為來源。
評論: 當您將分類目錄連接到集合時,集合項目名稱將不會顯示在集合目錄項目標籤上,除非您先前已在 CMS 面板中顯示集合。要解決此問題,請先在 CMS 面板中公開該系列,然後再將您的分類目錄連結到該系列。

如何設計分類目錄的樣式

將集合連接到分類目錄後,分類目錄將將該集合中的所有項目顯示為空區塊。您將能夠將元素附加到分類目錄並將這些元素連結到集合欄位。然後,這些元素將自發地填充您的集合中的資料。

包含 3 個集合項目的預設集合清單範例。

結合靜態和動態組件

將元素新增至空出的分類目錄區塊之一後,該元素將在每個分類目錄區塊中複製。這被認為是「固定」內容——並非源自集合的內容。

集合清單標題元素的元素設定模式視窗。

當您將元素連接到集合欄位時,它會自動將元素的預設內容(例如,標題元素中的「標題」一詞)替換為每個集合項目的內容。它成為「動態」內容,因為內容源自 CMS 集合。

靜態元素在畫布上具有藍色輪廓,而動態元素(具有來自 CMS 的資料的元素)具有紫色輪廓。 

將元素連結到集合字段

您可以將固定元素連結到集合欄位以動態修改該元素的內容。若要將元素連結到集合欄位:

  1. 導航至 插入面板
  2. 附加一個 元素 (例如,標題、段落等)到您的分類目錄
  3. 在分類目錄中選擇元素
  4. 導航 元素設定
  5. 驗證標有“接收”的框 文字部落格文章」(欄位類型和集合名稱可能會有所不同,具體取決於您選擇的元素和集合)
  6. 揭開 選擇字段 落下
  7. 選擇 採集領域 您希望接收來自的內容
元素設定模式視窗中的「選擇字段」下拉列表,顯示 5 個欄位選項。

了解有關如何將每個集合欄位類型連結到相關元素的更多資訊。

將元素與集合欄位分開

您也可以選擇將元素與集合欄位分開:

  1. 在分類目錄中選擇元素
  2. 導航 元素設定
  3. 取消選擇標示「接收」的方塊 文字部落格文章」(欄位類型和集合名稱可能會有所不同,具體取決於您選擇的元素和集合)
    • 您所做的選擇

    實施動態方面

    當您向集合清單中的任何元素(無論是靜態還是動態)引入樣式時,樣式將反映在該集合清單中的所有項目上。例如,如果將標題連結到集合欄位並使用綠色字體顏色設定其樣式,則該集合清單中的所有標題將繼承相同的綠色字體顏色。

    您也可以僱用 互動風格配置 透過從收藏項目內的顏色和圖像欄位中提取顏色和背景圖像來獲取收藏清單。

    元素設定面板中的動態樣式設定部分。

    集合列表的結構組成

    導航器顯示集合清單中的圖層。

    集合清單的周圍包裝

    預設情況下,集合清單包裝器包括 收藏清單 無效狀態。如果啟動分頁,它還包括 分頁 容器。您可以選擇透過複製包裝器來插入其他分頁容器。

    藏品清單

    集合清單包裝器 包含集合清單中的集合項目。無法向此包裝器添加其他元素。

    集合中的元素

    收藏品 包含您整合到集合清單中的特定內容。此處新增的任何元素都將分發到清單中的所有項目。這些元素保持靜態,直到連結到集合欄位或啟用條件可見性特徵。這些修正案將把它們轉變為動態元素。動態元素在導航器中以紫色圖示標記。

    Collection 項目的結構組成由包含影像的 div 區塊、h3、文字區塊和段落文字區塊組成。

    無效狀態

    空的 如果清單中沒有可展示的項目,狀態將取代收藏清單。預設情況下,它顯示灰色背景以及說明“未找到項目”的文字區塊。您可以修改樣式並增加或替換元素以製作個人化的無效狀態。

    分頁

    分頁包含兩個連結區塊: 事先的 按鈕和 隨後的 按鈕。其中每一個都可以個性化和設計。深入了解分頁集合清單。

    配置採集清單參數

    您可以透過收藏清單設定來調整收藏清單的顯示內容和版面。若要存取收藏清單設定:

    1. 選擇 集合清單包裝器 或者 收藏清單 在工作區中
    2. 導航至 元素設定面板
    元素設定面板中的集合清單設定部分。

    收藏

    在這裡,您可以指定與您的收藏清單配對的收藏。在選擇不同的集合連結到集合清單之前,請確保集合清單中的任何元素目前都沒有連結到集合。

    使用者介面條件

    此功能允許您在 專案 條件和 空白 編輯集合清單的兩種狀態的條件。

    請記住,調整此功能不會 建立 即時網站上集合清單的狀況。收藏清單的真實狀況由其項目決定。這 空白 只有當集合中沒有項目或它們被過濾掉時,才會出現狀態。了解有關過濾集合清單的更多資訊。

    設計

    您可以將集合清單保持在垂直堆疊中或將佈局變更為列。或者,您可以為 Collection 清單實作網格設計以形成動態網格。在這種情況下,請確保 Collection 列表 設計 設定保持配置為 全螢幕寬度.

    內幕提示: 我們建議使用 flexbox 為集合清單建立統一高度的結構。每個集合項目中的內容可能有所不同,並導致不基於 Flexbox 的列佈局錯位。

    過濾器

    合併篩選器可讓您僅顯示所需的集合項目 - 滿足一個或多個篩選條件的集合項目。取得有關過濾集合清單的更多見解。

    排列順序

    排列順序使您能夠根據特定欄位組織集合清單。了解有關排列收藏夾清單的更多資訊。

    專案分頁

    您可以對集合清單進行分頁,以在每頁顯示一定數量的項目。深入研究分頁集合清單的詳細資訊。

    顯示項目的上限

    此功能可讓您指定集合清單中顯示的項目數以及哪個項目啟動集合清單。例如,您可以從第 5 項開始清單並僅顯示 3 項。因此,您的清單將顯示項目 5、6 和 7。

    附加資訊: 除非啟用分頁,否則每個集合清單的最大上限為 100 個項目,每頁最多 20 個集合清單。了解如何使用分頁來顯示集合清單中的 100 多個項目。

    集合清單中的組件

    您可以選擇在集合清單項目中插入或產生元件。隨後,您可以將集合欄位連結到元件屬性並在元件中使用動態資料。進一步探索如何利用集合清單中的元件。

麥伊凡
Ewan Mak 的最新帖子 (看全部)