header-logo
開始使用 Wix以 Wix 建立網站和商家。歡迎使用我們的 AI 工具來建立網站、自訂範本或雇用專業人員,樹立網上形象。
建立網站了解如何以 Wix 工具建立並管理網站。您也可在此找到更多關於 AI 工具、網站訪客隱私權和無障礙的資訊。
帳戶與帳單檢閱帳戶設定,設定訂閱與方案,查看請款單。
使用 Wix 行動應用程式歡迎使用 Wix 行動應用程式,隨時隨地處理業務,並以專屬應用程式吸引網站會員互動。
連結網域以逐步指南了解如何購買、連結或轉移網站網域,並學習如何確保網站資料安全。
Studio、夥伴與 Enterprise善用 Studio 或 Enterprise 帳戶,以進階功能提升效率。
需要協助?尋找網站與技術支援,了解已知問題,或聯絡我們要求協助。
placeholder-preview-image
Wix Learn以課程和教學加強技能。
Wix 部落格學習網頁設計、行銷等範疇的秘訣。
SEO 學習中心學習如何提升來自搜尋引擎的自然網站流量。
網站開發以全端平台建立自訂網站。
聘用專業人士與專家配對,幫助實現目標。
placeholder-preview-image

CMS:新增及設定動態清單頁面

動態清單頁面可透過條理清楚的索引,展示 CMS 集合中的各種項目。每個項目會顯示在重複項目、圖庫或資料表中,並連結至集合的動態項目頁面,供訪客深入了解特定項目。

資料集可控制頁面元件與集合欄位之間的連結。您可在資料集設定中控制每次顯示的項目數量,也可新增篩選條件,僅納入特定項目,或新增排序條件來控制項目的顯示順序。

如果要顯示大量項目,請新增「載入更多」或導覽按鈕,改善頁面載入表現。您也可使用下拉式選單、選項按鈕或核取方塊等輸入元件,讓訪客篩選頁面上顯示的項目。
開始之前:
  • 建立 CMS 集合,並加入要在動態清單頁面上顯示的項目。
  • 為集合建立動態項目頁面。接著,將動態清單頁面上的項目連結至集合的動態項目頁面。也可以在新增動態清單頁面時,同時新增動態項目頁面。操作說明請參閱下方步驟 1。

步驟 1|新增動態清單頁面

在編輯器的 CMS 面板中,為集合建立動態清單頁面。系統會新增頁面,並在重複項目中顯示集合內的不同項目,之後可再進行自訂。
  1. 前往編輯器
  2. 點擊編輯器左側的 CMS
  3. 點擊集合
  4. 點擊要用來建立動態清單頁面的集合。
  5. 點擊更多操作,然後選擇新增動態頁面
  6. 選擇清單頁面,然後點擊新增至網站
    提示:也可選擇項目頁面,同時為集合新增動態項目頁面
新增動態清單頁面的畫面截圖。

步驟 2|(選用)修改網址動態資料欄位結構

您可編輯動態清單頁面的網址動態資料欄位結構,讓動態頁面的網址井然有序。

例如,可為動態頁面建立以下網址動態資料欄位結構:
  • 動態清單頁面:https://www.{your-domain.com}/{collection-name}
  • 動態類別頁面:https://www.{your-domain.com}/{collection-name}/{category}
  • 動態項目頁面:https://www.{your-domain.com}/{collection-name}/{category}/{primary-field}

編輯網址動態資料欄位結構時,不得使用網站中其他現有頁面已採用的結構。若要讓網址動態資料欄位結構保持獨特,即使變數不同,也不得與網站中其他頁面使用相同的前置字串(例如 {Collection name})及相同數量的變數
重要:
若要讓舊的動態網址自動重新導向至建立的新網址,請先確認網站已有連結的網域。若網站尚未連結網域,舊網址將無法繼續使用,並會載入 404 錯誤頁面。

編輯動態清單頁面的網址動態資料欄位結構:


  1. 前往編輯器
  2. 點擊編輯器左側的頁面與選單
  3. 點擊「動態頁面」。
  4. 將滑鼠游標移至剛建立的動態清單頁面,然後點擊右側的「更多操作」圖示
    提示:建立的動態清單頁面預設標題為:{集合名稱}(清單)
  5. 點擊「SEO」。
  6. 編輯「網址動態資料欄位結構」欄位:
    1. 點擊「編輯」(位於「網址動態資料欄位結構」欄位旁),然後選擇要執行的操作:
      • 新增變數:點擊 +新增變數」,然後選擇「文字」或「數字」欄位,以便在網址動態資料欄位結構中使用該欄位的值。
      • 新增靜態值:點擊欄位,然後輸入要在網址動態資料欄位結構中使用的靜態值。請只使用英文字母、數字或連字號。
    2. 點擊「儲存」。
編輯動態清單頁面網址動態資料欄位結構的畫面截圖。
  1. 點擊「取代網址」確認變更。系統將刪除動態頁面的舊網址,這些網址之後將無法使用。系統會改為產生動態頁面的新網址。

步驟 3|將重複項目連結至 CMS

目前動態清單頁面包含一個重複項目,其中每個容器都有 2 個文字元件、1 張圖片和 1 個按鈕。重複項目的每個容器會顯示集合中的不同項目。

將各元件連結至相關的集合欄位,讓元件顯示所需資訊。建議將按鈕連結至集合的動態項目頁面,讓訪客點擊即可前往相關項目的專屬頁面。

若要提供各項目的更多資訊,可在重複項目中新增更多支援的元件,然後透過管理所有 CMS 連結的資料集,將這些元件連結至集合欄位。
以圖庫或資料表取代重複項目?
也可使用圖庫資料表顯示集合項目。刪除預設的重複項目,再新增專業圖庫或資料表。接著透過資料集,將圖庫或資料表的各個部分連結至 CMS 集合,連結方式與重複項目相同。
  1. (選填)在重複項目中新增元件(例如按鈕、文字或圖片),或移除不需要的元件。也可調整重複項目的大小,以容納所有元件。
  2. 點擊重複項目元件,然後選擇「連結至 CMS」圖示
  3. 在右側的「連結重複項目」面板中,點擊要連結的元件。
  4. 在「連結」下方,點擊相關下拉式選單,將元件連結至相關的集合欄位或資料集操作。可用選項會因元件類型而異。
提示:
  • 若要將按鈕元件連結至動態項目頁面,請點擊「點擊操作連結至」欄位,然後選擇名稱結尾為 (項目)的集合動態項目頁面。
  • 若要將圖片元件連結至動態項目頁面,請點擊「連結會連結至」下拉式選單,然後選擇名稱結尾為 (項目)的集合動態項目頁面。
將按鈕連結至集合動態項目頁面的畫面截圖。
  1. 點擊右側面板頂端的「中繼器連結」。
  2. 重複上述步驟 3 至 5,將元件連結至集合欄位或資料集操作。
已連結中繼器之資料集連結選項的畫面截圖。
  1. 點擊並視需要調整中繼器元件。
    提示:可隨時在中繼器中新增或移除元件。若要使用不會變更的靜態內容,請取消元件連結。
  2. 點擊「預覽」即可測試動態清單頁面。
  3. 若已準備好讓變更上線,請點擊「發布」。

步驟 4|(選填)管理資料集設定

預設情況下,動態頁面資料集最多可讓中繼器或圖庫一開始顯示 100 個項目。您可調整每次載入的項目數量,一次最多載入 1,000 個項目。也可新增篩選條件,只顯示特定項目,或新增排序,控制項目的顯示順序。
  1. 前往中繼器所連結的資料集設定:
    1. 點擊中繼器。
    2. 點擊「連結至 CMS」圖示
    3. 在右側的「連結中繼器」面板中,點擊「資料集設定」。
  2. (選填)點擊「權限」旁的權限類型,設定可在已上線網站查看、新增、更新或刪除集合內容的對象。
  3. (選填)如需編輯資料集名稱,請點擊「資料集名稱 」欄位。
  4. (僅限 Velo)點擊「資料集 ID 」欄位,編輯頁面程式碼中用來識別資料集的 ID。
  5. 點擊「資料集模式」下拉式選單,然後選擇相關選項:
    • 讀取:連結的元件可讀取並顯示集合中的內容,但無法修改集合內容。
    • 讀取與寫入:連結的元件可顯示集合中的內容。輸入元件可在集合中新增或編輯內容。
  6. 編輯「每次載入的項目數 」欄位,設定一次可載入的項目數上限。這也是訪客點擊「載入更多」按鈕、「下一頁/上一頁」按鈕或分頁列時,可載入的項目數上限。相關步驟請參閱下一節。 
    注意:此欄位不適用於資料表。若使用資料表顯示項目,請點擊資料表的「版面配置」圖示 ,接著自訂資料表高度並啟用分頁功能,以限制顯示的項目數。
「每次載入的項目數」資料集設定畫面截圖。
  1. (選填)點擊「+新增篩選條件」,讓中繼器只顯示特定項目
  2. (選填)點擊「+新增排序」,選擇項目在中繼器中的顯示順序
  3. 點擊「預覽」,測試動態清單頁面。
  4. 若已準備好讓變更上線,請點擊「發佈」。

步驟 5|(選用)建立「載入更多」或導覽按鈕

若計劃在此頁面顯示大量項目,可考慮新增「載入更多」按鈕,改善頁面的載入表現。資料集的「每次載入的項目數」欄位會決定頁面最初可載入的項目數量,以及訪客點擊「載入更多」按鈕時可額外載入的項目數量。

也可新增「下一頁/上一頁」按鈕或分頁列(僅限 Wix 編輯器),讓頁面上已連結的重複項目或圖庫顯示下一「頁」或上一「頁」項目。「每次載入的項目數」欄位會決定每「頁」最多顯示的項目數量。
選擇要執行的操作:
提示:
在 Wix 編輯器中,也可連結分頁列,讓訪客逐頁瀏覽項目。「每次載入的項目數」欄位會決定分頁列每一頁可顯示的項目數量。若希望 Studio 編輯器也提供分頁列,請在此為這項功能投票

步驟 6|(選填)讓訪客篩選項目

使用輸入元件,讓訪客篩選動態清單頁面上顯示的項目。可選擇下列任一種支援篩選的輸入元件:選項按鈕核取方塊下拉式選單選擇標籤滑桿(僅限範圍滑桿)。
顯示用於篩選動態清單頁面所列項目之輸入元件範例的螢幕截圖。

常見問題

點擊下方問題,查看設定動態清單頁面的常見問題答案。