CMS:建立依類別列出項目的動態頁面
使用動態頁面,依類別整理網站上的 CMS(內容管理系統)集合項目。您可建立動態「類別」頁面,為每個類別提供不同版本。訪客可在各版本中查看該類別的項目清單,並點擊查看特定項目。
舉例來說,假設您是書評部落客,撰寫了推理、愛情、魔幻等各種不同類型的書評。為每種類型設定動態頁面後,喜愛閱讀的訪客就能輕鬆前往感興趣的書評,享有更好的瀏覽體驗。
本指南將說明如何為每個類別建立動態頁面、調整網址結構、自訂頁面,以及視需要建立顯示所有類別的總覽動態頁面。
步驟 1|新增集合項目的分類欄位
若要在網站上顯示不同類別的項目,集合中需有一個欄位,用來界定各項目所屬的類別。在集合中新增或選擇「類別」欄位,再於欄位中輸入值,為每個項目分類。
若要在集合中新增「類別」欄位:
- 前往網站管理介面的 CMS。或者,也可點擊編輯器中的 CMS
,再點擊「您的集合」。 - 點擊相關集合。
- 點擊「管理欄位」。
- 點擊「+新增欄位」,選擇「文字」或「數字」欄位類型,再點擊「選擇欄位類型」。
- 輸入「欄位名稱」(例如「類別」)。
- (選填,僅適用於 Velo)更新網站程式碼中使用的「欄位 ID」。此 ID 日後無法更新。
- (選填)輸入「說明文字」,這段文字會在集合檢視畫面中顯示為欄位名稱旁的工具提示。
- (選填)點擊「驗證」索引標籤,將此欄位設為必填、限制字元數,或限定只能輸入特定值。深入了解如何新增欄位驗證。
- (選填)點擊「預設值」索引標籤,新增文字,之後集合中的每個新項目都會自動在此欄位加入該文字。深入了解如何新增欄位預設值。
- 點擊「儲存」。

- 在新的「類別」欄位中,輸入每個項目所屬的類別名稱。每個獨特類別的拼字、英文字母大小寫和空格數量都必須一致。

步驟 2|新增依類別列出項目的動態頁面
為集合建立新的動態清單頁面。之後,此動態頁面將作為範本,並為每個類別提供不同版本。各版本只會顯示所屬類別的項目。
Wix 編輯器
Studio 編輯器
步驟 3|修改網址動態資料欄位結構
需將新的動態清單頁面轉換為依類別列出項目的動態項目頁面。若要進行轉換,請編輯頁面的網址動態資料欄位結構。請務必將「類別」欄位新增為變數,並讓動態資料欄位結構在網站中保持獨特。
重要:
若變更動態頁面的網址動態資料欄位結構,這些頁面的所有現有連結將無法繼續使用。這會影響網站內的連結、已分享到外部的連結,以及搜尋引擎中的 SEO 連結。我們即將推出可新增自動重新導向的功能,將訪客和搜尋引擎從舊網址導向新網址。
獨特的網址動態資料欄位結構
網址動態資料欄位結構不得與網站上的其他現有頁面重複。若要保持獨特,網址動態資料欄位結構不可同時與網站上的其他頁面使用相同的前置字串(例如 {集合名稱})和相同數量的變數,即使變數不同也一樣。
如果網址動態資料欄位結構與現有結構衝突,CMS 將不允許儲存變更。因此,建議調整集合中其他動態頁面的網址動態資料欄位結構。
顯示無法使用的網址動態資料欄位結構衝突範例
動態清單頁面為何會轉換成動態項目頁面?
建立任何動態頁面時,系統都會在集合中新增「頁面連結」欄位。此欄位會根據動態頁面的網址動態資料欄位結構,為集合中的每個項目產生實際的網址動態資料欄位值。
編輯動態頁面的網址動態資料欄位結構後,「頁面連結」欄位值也會隨之調整。如果集合中的多個項目具有相同的「頁面連結」值(網址動態資料欄位),Wix CMS 會判定這些項目應共用同一個頁面。因此,動態頁面會轉換成動態項目頁面,並為每個獨特的「頁面連結」值(網址動態資料欄位)建立不同版本。
顯示集合中重複「頁面連結」欄位值的範例
透過合併欄位變數建立動態「類別」頁面:
您可建立動態「類別」頁面,並為每個獨特的欄位值組合建立不同版本。如果在動態頁面的網址動態資料欄位結構中新增多個欄位變數,這些值會合併至「頁面連結」欄位。如果多個項目的此欄位值相同,動態頁面便會轉換成動態項目頁面,並為每個獨特的「頁面連結」值(網址動態資料欄位)建立不同版本。
可建立的網址動態資料欄位結構範例
您可使用任何文字或數字欄位,作為動態頁面網址動態資料欄位結構中的變數。例如,可為動態頁面建立以下網址動態資料欄位結構:
- 動態項目頁面:https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}
- 動態類別頁面:https://www.{your-domain.com}/{collection-name}/{category}
- 動態清單頁面:https://www.{your-domain.com}/{collection-name}
若要編輯動態頁面的網址動態資料欄位結構:
Wix 編輯器
Studio 編輯器
- 前往編輯器。
- 點擊編輯器左側的頁面與選單
。 - 點擊動態頁面。
- 編輯連結至集合的動態頁面網址動態資料欄位結構。請點擊下方相關的動態頁面類型,查看操作說明:
動態項目頁面(用於顯示個別項目)
動態頁面(將依類別顯示項目)
動態清單頁面(用於顯示所有集合項目)
步驟 4|自訂動態類別頁面
動態「類別」頁面現在應可作為動態項目頁面,並為每個類別顯示不同版本。在各個版本中,重複項目的多個元件已連結至 Wix CMS 集合欄位,可顯示該類別中每個項目的詳細資料。
可在重複項目中新增或移除元件、修改元件與 Wix CMS 的連結,並調整重複項目的大小以容納所有內容。使用工具列中的「預覽」查看各個頁面版本的顯示方式。建議將頁面頂端的文字連結至 Wix CMS 的「類別」欄位,讓每個版本都能在頂端顯示類別名稱。
自訂動態類別頁面:
Wix 編輯器
Studio 編輯器
- 前往編輯器。
- 前往動態類別頁面:
- 點擊編輯器左側的 「頁面與選單」
。 - 點擊 「動態頁面」。
- 點擊依照上一部分步驟建立的動態類別頁面。
- 點擊編輯器左側的 「頁面與選單」

- (選用)在中繼器中新增元件(例如按鈕、文字、圖片),或移除不需要的元件。您可調整中繼器的大小,使其容納所有元件。
- 點擊中繼器元件,然後選擇 「連結至 CMS」圖示
。 - 在右側的 「連結中繼器」面板中,點擊要連結的元件。
- 在 「連結」下方,點擊相關下拉式選單,將元件連結至相關的集合欄位或資料集操作。選項會因元件類型而異。
提示:
- 將頁面頂端的文字連結至「類別」欄位,使文字根據顯示的類別動態調整。
- 將中繼器中的圖片或按鈕連結至動態項目頁面,該頁面一次會顯示一個項目。

- 點擊面板頂端的 「中繼器連結」。
- 重複上述步驟 3 至 7,將元件連結至集合欄位或資料集操作。

- 視需要點擊並調整中繼器元件。
提示:您隨時可在中繼器中新增或移除元件。若要使用不會變動的靜態內容,請取消元件連結。 - 點擊 「預覽」,並使用工具列測試動態類別頁面的各個版本。
提示:若進入預覽模式時出現 404 錯誤訊息,請儲存並重新載入編輯器,然後再試一次。

- 若已準備好讓變更上線,請點擊 「發布」。
步驟 5|(選用)建立列出類別的動態頁面
現在,每個類別都有各自版本的動態頁面。您可能還想建立一個列出所有類別的頁面。如此一來,訪客就能查看所有類別的索引,再點擊前往先前建立的動態「類別」頁面相關版本。
若要進行此設定,需要建立另一個集合,並為每個類別新增一個項目。「類別」集合還需包含一個多重參照欄位,用於參照主要集合中的項目。也可為每個類別新增圖片欄位來顯示圖片,並新增文字欄位來提供簡短描述。
接著,為「類別」集合新增動態列表頁面。請新增連結至主要集合的資料集,並設定篩選條件,納入「類別」集合中的標題(「類別」)欄位。自訂頁面,並視需要修改網址動態資料欄位結構。
a|建立用於列出類別的集合
- 前往網站管理介面的 CMS。
- 點擊右上角的+建立集合。
- 點擊從頭開始,然後點擊下一步。
- 輸入集合名稱。
- (僅限程式碼)輸入要在程式碼中使用的集合 ID。
- 維持選擇多項目集合(預設),然後點擊建立。
- 新增參照主要集合的多重參照欄位:
- 點擊新增欄位,選擇多重參照,然後點擊選擇欄位類型。
- 輸入欄位名稱。
- 點擊參照的集合下拉式選單,選擇包含「類別」欄位的主要集合,然後點擊儲存。

- (選填)新增更多欄位,以顯示在類別清單頁面上(例如圖片、文字)。舉例來說,可新增圖片欄位,顯示代表各類別的圖片。
- 為每個類別新增項目:
- 點擊 + 新增項目。
- 在主要「標題」欄位中輸入其中一個類別的名稱。
- 點擊「多重參照」儲存格,並選擇類別欄位與此項目主要「標題」欄位相符的項目。
- 填寫為此項目/類別新增的其他欄位。
- 重複上述步驟,新增代表各類別的項目。

b|新增顯示類別清單的動態頁面
Wix 編輯器
Studio 編輯器
- 前往編輯器。
- 點擊編輯器左側的 CMS
。 - 點擊「集合」。
- 將滑鼠游標移至剛才為列出類別而建立的集合,然後點擊「更多操作」圖示
。 - 點擊「新增動態頁面」。

- 選擇「清單頁面」,然後點擊「新增至網站」。
- 新增連結至主要集合的資料集,並加入篩選條件,納入「類別」集合中的「標題」(「類別」)欄位:
- 點擊編輯器左側的 CMS
。 - 點擊「新增內容元件」,然後選擇「資料集」。
- 點擊下拉式選單並選擇主要集合,然後點擊「建立」。
- 點擊右側「資料集設定」面板中的 + 新增篩選條件。
- 點擊「欄位」下拉式選單,然後選擇「類別」欄位。
- 在「值來源」下選擇「其他資料集」。
- 點擊「資料集」下拉式選單,然後選擇列出類別的集合。
- 在「欄位」下拉式選單中保留選擇「標題」,然後點擊「新增篩選條件」。
- 點擊編輯器左側的 CMS

- 將重複項目中的「閱讀更多」按鈕連結至動態類別頁面:
- 點擊重複項目中的按鈕,然後選擇「連結至 CMS」圖示
。 - 點擊「選擇資料集」下拉式選單,然後選擇剛新增且連結至主要集合的資料集。
- 點擊「點擊操作連結至」下拉式選單,然後選擇動態「類別」頁面。
- 點擊重複項目中的按鈕,然後選擇「連結至 CMS」圖示

- (選填)在重複項目中新增元件(例如按鈕、文字、圖片),或移除不需要的元件。您可調整重複項目的大小,使其容納所有元件。
- 點擊重複項目,然後選擇「連結至 CMS」圖示
,即可調整元件與集合之間的連結。

- (選填)修改此動態頁面的網址動態資料欄位結構。
- 點擊「預覽」以測試連結。
- 若已準備好讓變更上線,請點擊「發布」。
下一步:
常見問題
點擊下方即可查看建立動態類別頁面的常見問題答案。
類別集合與這個手動替代方法有何不同?
為什麼預覽新的動態類別頁面時會出現 404 錯誤訊息?
可以在網站選單中新增動態類別頁面的連結嗎?
可以在動態頁面新增「載入更多」或導覽按鈕嗎?



,然後選擇SEO。
