Wix CMS:建立依類別列出項目的動態頁面
15 分鐘
透過動態頁面,在網站上按類別整理 Wix CMS(內容管理系統)集合品項。您可建立動態「類別」頁面,並為每個類別提供不同的版本。在每個版本中,訪客可檢視該類別內的品項清單,並點擊即可檢視特定品項。
例如,假設您是一位擁有推理、浪漫和魔幻等多種不同類型評論的預訂部落格作者。透過為每個類型設定動態頁面,喜愛預訂的訪客即可輕鬆導覽至感興趣的評論,進而提升體驗。
本指南將向您顯示如何為每個類別建立動態頁面、調整網址結構、個人化頁面,以及根據需求建立顯示所有類別的總體動態頁面。
步驟 1 | 新增欄位以分類系列品項
若要在網站上顯示不同類別的品項,系列中需要一個界定各品項所屬類別的欄位。請在系列中新增或選擇「類別」欄位,然後在欄位中輸入金額以將各個品項分類。
若要在集合中新增「類別」欄位:
- 前往網站管理介面的 CMS。或者,您可點擊編輯器中的 CMS
,然後點擊 您的集合。 - 點擊相關集合。
- 點擊 管理欄位。
- 點擊 + 新增欄位,選擇 文字 或 數字 欄位類型,然後點擊 選擇欄位類型。
- 輸入 欄位姓名(例如:類別)。
- (僅限 Velo 選填)更新用於網站程式碼中的 欄位 ID。您稍後無法更新此 ID。
- (選填)輸入 說明文字,該文字將作為工具提示顯現在集合檢視中的欄位姓名旁。
- (選填)點擊 驗證 索引標籤,將此欄位設為必填、限制字元數或僅接受特定金額。瞭解更多關於 新增欄位驗證 的資訊。
- (選填)點擊 預設值 索引標籤,新增會自動加入集合中每個新品項欄位的文字。瞭解更多關於 為欄位新增預設值 的資訊。
- 點擊 儲存。

- 在新的「類別」欄位中輸入各個品項所屬的類別姓名。請確保每個獨特類別的拼字、大小寫及空格數量完全一致。

步驟 2 | 新增依類別列出項目的動態頁面
為集合建立新的動態清單頁面。稍後,此動態頁面將作為範本,針對每個類別提供不同版本。每個版本僅會顯示屬於該類別的品項。
Wix 編輯器
Studio 編輯器
步驟 3 | 修改網址動態資料欄位結構
您需要將新的動態清單頁面轉換為按類別列出項目的動態項目頁面。若要執行此操作,請編輯頁面的網址動態資料欄位結構。請務必將「類別」欄位新增為變數,並確保該動態資料欄位結構在網站中是獨特的。
重要:
若變更動態頁面的網址動態資料欄位結構,所有指向這些頁面的現有連結都將失效。這會影響網站內部的連結、任何在外部分享的連結,以及搜尋引擎中的 SEO 連結。我們即將推出一項可讓您新增自動重新導向的功能,將訪客和搜尋引擎從舊網址引導至新網址。
獨特網址動態資料欄位結構
網址動態資料欄位結構不能已被網站上其他現有頁面使用。若要保持「獨特」,網址動態資料欄位結構「不能」與網站上其他頁面「具有相同的前綴」(例如 {Collection name})「且具有相同數量的變數」,即使變數不同也是如此。
如果網址動態資料欄位結構與現有結構衝突,Wix CMS 將不允許儲存變更。這就是為什麼您可能需要「更改系列中其他動態頁面的網址動態資料欄位結構」。
顯示無法使用的衝突網址動態資料欄位結構範例
如何將動態清單頁面轉換為動態品項頁面?
建立任何動態頁面時,系統都會在系列中新增一個頁面連結欄位。頁面連結欄位會根據動態頁面的網址動態資料欄位結構,為系列中的每個品項產生實際的網址動態資料欄位金額。
編輯動態頁面的網址動態資料欄位結構會導致頁面連結欄位金額隨之調整。若系列中有多個品項具有相同的頁面連結金額(網址動態資料欄位),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 | 自訂動態類別頁面
您的動態「類別」頁面現在應作為動態品項頁面運作,並針對每個類別提供不同版本。在每個版本中,重複列已有各種元件連結至 CMS 集合欄位,以顯示類別中每個品項的詳細資料。
您可以在重複列中新增或移除元件、修改其 CMS 連結,並調整重複列大小以容納所有內容。使用 預覽 工具列即可檢視頁面各個版本的樣貌。建議將頁面頂端的文字連結至 CMS 「類別」欄位,以便每個版本都在頂端顯示類別名稱。
若要自訂動態類別頁面:
Wix 編輯器
Studio 編輯器
- 前往編輯器。
- 前往動態類別頁面:
- 點擊編輯器左側的「頁面與選單」
。 - 點擊「動態頁面」。
- 點擊在上一節步驟中建立的動態類別頁面。
- 點擊編輯器左側的「頁面與選單」

- (選填)在重複列中新增元件(例如按鈕、文字、圖片)或移除不需要的元件。您可調整重複列的大小以容納所有元件。
- 點擊重複列元件,然後選擇「連結至 CMS」圖示
。 - 在右側的「連結重複列」面板中,點擊想要連結的元件。
- 在「連線」下方,點擊相關下拉式選單以將元件連結至相關系列欄位或資料集小部件。選項視元件類型而定。
提示:
- 將頁面頂端的文字連結至「類別」欄位,即可根據顯示的類別進行動態調整。
- 將重複列表中的圖片或按鈕連結至用於一次顯示一個品項的動態品項頁面。

- 點擊面板頂部的重複器連結。
- 重複上述步驟 3-7,將元件連結至集合欄位或資料集小部件。

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

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

- (選填)新增更多欄位以顯示在類別清單頁面上(例如:圖片、文字)。例如,您可以新增圖片欄位以顯示代表每個類別的圖片。
- 為每個類別新增品項:
- 點擊 + 新增品項。
- 在主要 標題 欄位中輸入其中一個類別的名稱。
- 點擊 多重參照 儲存格,然後選擇類別欄位與此品項主要 標題 欄位一致的品項。
- 填寫您為此品項/類別新增的任何其他欄位。
- 重複這些步驟以新增代表每個類別的品項。

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

- 選擇「清單頁面 」並點擊「新增至網站」。
- 新增一個連結至主系列的資料集,並設定篩選條件以包含「類別」系列中的「標題」(類別)欄位:
- 點擊編輯器左側的「CMS」
。 - 點擊「新增內容元件 」,然後選擇「資料集」。
- 點擊下拉式選單,選擇主系列,然後點擊「建立」。
- 點擊右側「資料集設定 」面板中的「+ 新增篩選條件」。
- 點擊「欄位」下拉式選單,然後選擇「類別」欄位。
- 在「金額來源」下方選擇「另一個資料集」。
- 點擊「資料集 」下拉式選單,然後選擇列出類別的系列。
- 在「欄位 」下拉式選單中保持選擇「標題」,然後點擊「新增篩選條件」。
- 點擊編輯器左側的「CMS」

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

- (選填)在重複列中新增元件(例如按鈕、文字、圖片)或移除不需要的元件。您可調整重複列的大小以容納所有元件。
- 點擊重複列並選擇「連結至 CMS」圖示
以調整元件與系列之間的連結。

- (選填)修改此動態頁面的網址動態資料欄位結構。
- 點擊「預覽」即可測試連結。
- 若準備好發佈變更,請點擊「發佈」。
下一步:
- 了解如何在網站選單中新增動態頁面連結。
- 了解如何在動態清單頁面新增「載入更多」按鈕。
- 了解如何新增可讓訪客篩選集合內容的輸入元件。
常見問題
點擊下方即可查看建立動態類別頁面的常見問題解答。
為什麼預覽新的動態類別頁面時會出現 404 錯誤訊息?
是否可以在網站選單中新增動態目錄頁面的連結?
是否可以在動態頁面新增「載入更多」或導覽按鈕?





並選擇 SEO。


