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(內容管理系統)集合中各項目的圖片。您可控制各項目要使用的「圖片」欄位,並將集合欄位連結至圖片標題、描述、替代文字和連結。此設定適用於動態清單頁面和靜態頁面,也可將圖片連結至對應項目的動態項目頁面。
專業圖庫資料集連結選項的畫面截圖。
重要:
本文說明如何將專業圖庫連結至「圖片」欄位,以便為每個集合項目顯示一張圖片。或者,也可將專業圖庫連結至「媒體圖庫」欄位,在動態項目頁面上顯示單一集合項目的多張圖片或多部影片。

步驟 1|建立 CMS 集合

建立多項目集合,用來儲存要在圖庫中顯示的圖片。新增「圖片」欄位類型,以及用於圖片標題、描述和替代文字的文字欄位。接著,為集合中的各個項目新增圖片和欄位值。如有需要,可調整集合權限。預設的「顯示內容」設定允許任何人查看內容。

建立集合以儲存圖庫圖片:

  1. 前往網站管理介面的「CMS」。
  2. 點擊「建立集合」。
  3. 點擊「從頭開始」。
    提示:也可點擊「使用 AI 建立」,讓 AI(人工智慧)建立集合
  4. 點擊「下一步」。 
  5. 輸入集合名稱。
  6. (僅限編寫程式碼時)輸入要在程式碼中使用的集合 ID。
  7. 保留選擇「多個項目集合(預設)」,然後點擊「建立」。
  8. 手動新增欄位,或匯入 CSV 檔案至集合:
提示:
請務必新增「圖片」欄位類型,用來儲存每個項目的圖片。也可新增「文字」欄位類型,作為圖片標題、描述和替代文字。
  1. 新增項目至集合:
    1. 點擊「+新增項目」。
    2. 在每個相關欄位中新增項目內容。
    3. 重複此步驟,建立所需數量的項目。
在 CMS 集合中新增項目的畫面截圖。
  1. 設定集合權限
    1. 點擊「更多操作」,然後選擇「權限與隱私權」。
    2. 選擇要套用至集合的權限:
      • 顯示內容:允許所有人或僅限網站會員在已上線網站查看集合內容。管理員和具備 CMS 存取權的共同作業者一律擁有完整權限,可查看、新增、更新或刪除集合項目。
      • 收集內容:允許所有人或僅限網站會員透過輸入元件或 API,從已上線網站新增項目至集合。此外,請指定可以查看內容的對象。管理員和具備 CMS 存取權的共同作業者一律擁有完整權限,可查看、新增、更新或刪除集合項目。
      • 進階:為每個使用者身分設定自訂權限,控制哪些人可以查看、新增、更新或刪除集合內容。管理員和具備 CMS 存取權的共同作業者擁有完整權限。不過,您可為特定共同作業者身分設定權限,限制其集合存取權。
    3. 點擊「儲存」。

設定集合權限的畫面截圖。

將專業圖庫新增至網站,並連結至與集合欄位綁定的資料集。接著,將圖庫的圖片來源連結至集合的圖片欄位。也可將標題、描述和替代文字連結至集合中的欄位。使用「連結目標」下拉式選單,將項目連結至各自的動態項目頁面,或連結至「網址」、「圖片」或「影片」欄位。
  1. 前往編輯器
  2. 前往要使用圖庫顯示不同集合項目圖片的頁面。
  3. 點擊編輯器左側的「新增元件」
  4. 點擊「圖庫」
  5. 點擊要使用的專業圖庫,並拖曳至頁面。
在 Wix 編輯器中新增專業圖庫的畫面。
  1. 移除圖庫中的預設圖片:
    1. 點擊圖庫上的「管理媒體」
    2. 點擊「全選」,然後點擊「刪除」
    3. 點擊「完成」
  2. 點擊「連結至 CMS」圖示
  3. 點擊「選擇資料集」下拉式選單,然後選擇已連結至集合的現有資料集。也可選擇「新增資料集」,再選擇要連結的集合。
  4. 點擊相關下拉式選單,將集合欄位連結至圖庫:
    • 圖片來源連結至:選擇要顯示的「圖片」欄位。
    • 標題連結至:選擇要用於圖片標題的欄位。
    • 描述連結至:選擇要用於圖片描述的欄位。
    • 替代文字連結至:選擇要用於圖片替代文字的欄位。
    • 連結目標:選擇圖片要連結至的動態頁面、「網址」欄位或「圖片」欄位。
圖庫資料集連結選項的畫面。
  1. 點擊圖庫並選擇「設定」,即可自訂圖庫的版面配置、設計等。深入了解如何自訂專業圖庫

步驟 3|管理資料集設定

前往資料集設定,設定每次可載入的項目總數、篩選不顯示的特定項目、排列項目的顯示順序,或變更資料集模式。若要讓訪客更新圖庫所連結的集合項目,請將模式設為「讀取與寫入」。
  1. 前往圖庫所連結的資料集設定:
    1. 點擊圖庫。
    2. 點擊「連結至 CMS」圖示
    3. 點擊右側「連結圖庫」面板中的「資料集設定」
  2. (選用)點擊權限類型(位於「權限」旁),設定哪些人可以查看、新增、更新或刪除集合內容。
  3. (選用)如需編輯資料集名稱,請點擊「資料集名稱」欄位。
  4. (僅限 Velo)點擊「資料集 ID」欄位,編輯頁面程式碼中用來識別資料集的 ID。
  5. 點擊「資料集模式」下拉式選單,並選擇適用的選項:
    • 讀取:連結的元件可以讀取並顯示集合內容,但無法修改內容。
    • 讀取與寫入:連結的元件可以顯示集合內容。輸入元件可以新增或編輯集合內容。
  6. 編輯「每次載入的項目數」欄位,設定每次可載入的項目數上限
    注意:這也是訪客點擊「載入更多」按鈕、「下一頁/上一頁」按鈕或分頁列時,可載入的項目數上限。操作步驟請參閱下一節。
資料集「每次載入的項目數」設定畫面。
  1. (選用)點擊「+新增篩選條件」,讓圖庫僅顯示特定項目
  2. (選用)點擊「+新增排序」選擇集合項目在圖庫中的顯示順序

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

如果集合中有大量項目,可新增「載入更多」按鈕,改善頁面的載入效能。資料集的「每次載入的項目數」欄位最多可設為 1,000 個項目。此欄位可控制圖庫最初載入的項目數,以及訪客點擊「載入更多」按鈕時可載入的額外項目數。

如果連結「下一頁/上一頁」按鈕或分頁列,此欄位也會決定圖庫每個「頁面」顯示的項目數。
選擇要執行的操作:

常見問題

點擊下方,查看將圖庫連結至 CMS 的常見問題答案。