header-logo
了解如何以 Wix 建立網站和商家。
了解如何建立、管理並維護 Wix 網站。
管理訂閱、方案與請款單。
處理業務,與會員連繫。
學習如何購買、連結或轉移網站網域。
以進階功能提升效率。
尋求解決方法,了解已知問題,或聯絡我們。
placeholder-preview-image
以課程和教學加強技能。
學習網頁設計、行銷等範疇的秘訣。
學習如何提升來自搜尋引擎的自然網站流量。
以全端平台建立自訂網站。
與專家配對,幫助實現目標。
placeholder-preview-image

Velo:使用 CMS

5 分鐘
前往 Velo by Wix 網站即可開始使用並繼續學習。
Wix CMS (內容管理系統) 讓您在網站上使用資料庫集合、使用者輸入元件和動態頁面。本文說明如何使用 Velo 增強 CMS 功能。

啟用 Velo 開發模式

若要搭配使用 Wix CMS 與 Velo,必須先啟用 Velo 開發模式。

啟用 Velo 開發模式的方法:在編輯器工具列中,點擊開發模式並在下拉選單中開啟啟用開發者模式。編輯器左側會新增 Velo 側邊欄,且畫面底部會顯現程式碼面板

Velo 側邊欄

Velo 側邊欄 顯示組成網站的所有檔案,包括固定和動態頁面、燈箱、程式碼檔案以及資料庫集合。只有在網站啟用 Velo 開發模式時,側邊欄才會顯現。

資料庫集合會顯現在側邊欄的 資料庫 區段中。
動態頁面會顯現在側邊欄的 頁面程式碼 區段中。
請留意
動態頁面會根據動態頁面網址前綴在 Velo 側邊欄中組成群組。瞭解更多
從 Velo 側邊欄,可執行以下 CMS 操作:

集合

透過 Wix CMS,您可在網站上建立並管理資料庫集合。使用集合與程式碼時,請留意以下資訊,Velo 可讓您在處理集合時擴充功能:

欄位 ID

將欄位新增至集合時,系統會根據欄位名稱自動建立欄位 ID。只有在啟用 Velo 開發模式時,才能看到欄位 ID。如有需要,您也可以自行指定欄位 ID。
重要資訊
  • 欄位建立後,即無法變更欄位 ID。
  • 欄位 ID 開頭不得為 $,且不得包含句點「.」
使用 Data APIDataset API 透過程式碼處理欄位時,會使用欄位 ID。例如,若想使用 Data API 將品項插入集合,可使用以下程式碼:
1wixData.insert("MyCollectionName", {"someFieldKey": "someValue"});

hook

Data API 包含 hook,可讓您在與集合互動前後執行程式碼。您可從 Velo 側邊欄內新增 hook。

若要將 hook 新增至集合,請將滑鼠游標懸停在側邊欄 資料庫 區段中的集合名稱上,點擊「尚有...項操作」圖示 並選擇 新增/移除 Hook瞭解更多

非結構化欄位

使用程式碼將欄位新增至集合時,欄位不會自動新增至集合結構中,必須手動新增。在 Wix CMS 中,這些欄位會顯現警告圖示,表示該欄位尚未界定。瞭解更多。您可點擊欄位名稱來界定欄位類型並將其新增至結構中。

移除與還原集合

如果移除程式碼中引用的集合,程式碼將無法運作,並會在編輯器和已發佈的網站中產生錯誤。如有需要,您可以使用其他名稱取代集合名稱。

如果恢復已移除的集合,程式碼將再次運作。

資料 API

Velo Data APIDataset API 提供在網站中處理資料集合的額外功能。您可建立自訂搜尋和篩選條件、管理並操作資料,以及處理分頁、權限和 hook。瞭解更多

資料配額

Wix 會針對網站發出的資料請求設定配額。這些配額會影響網站每分鐘可發出的請求次數,以及請求可執行的時間長度。

若要深入了解配額資訊及處理方式,請參閱關於資料配額

使用者輸入

透過 Wix CMS,您可建立使用者輸入表單並將使用者資料儲存在集合中。處理使用者輸入元件時,Velo 提供額外的功能圖層:

輸入驗證

收集使用者輸入資料時,應確保輸入的資料有效。雖然可透過使用者輸入元件的「設定」面板進行部分驗證,但透過程式碼,您可提供額外的驗證要比較的項目。瞭解更多

將固定元件轉換為提交按鈕

在不使用程式碼的情況下,您可以使用使用者輸入元件和「提交」元件建立表單,點擊後即可將資料儲存至集合。只有已選擇的元件(例如按鈕和圖片)可以作為提交元件。

透過程式碼,您可以為「連結」面板中沒有「提交」選項的元件新增提交功能。使用這些元件進行提交時,您還可以新增提交成功和錯誤訊息

建立自訂註冊表單

透過 Velo,您可以建立專屬的自訂註冊表單來取代標準表單。接著啟用自訂註冊,訪客即可前往您的自訂表單進行網站報名。

動態頁面

使用 Wix CMS 即可建立動態頁面,在網站多個頁面中顯示資料庫集合的內容。您也可使用 Velo 與動態頁面互動:

在行動裝置中隱藏動態頁面

無需程式碼,即可使用行動版編輯器隱藏連結至頁面的元件,藉此在網站行動裝置版本中隱藏動態頁面。

If you are using code on your site, and you hide the elements using the Mobile Editor, any code connected to those elements will generate an error. Therefore it's best to use the formFactor property of the Window API to determine if the visitor is viewing the site from a mobile device, and use the elements' hide() or collapse() functions to visually remove the elements from the page.

重要提示:
使用行動版編輯器隱藏元件會將該元件從頁面中完全移除。這會導致任何依賴該隱藏元件存在的程式碼發生中斷。

動態頁面與 Hook

啟用 Velo 開發模式後,即可從頁面設定將 hook 新增至動態頁面:

  1. 點擊編輯器左側的 選單與頁面
  2. 點擊動態頁面旁的「尚有...項操作」圖示
  3. 選擇 設定 並選擇 頁面資訊 索引標籤。
  4. 點擊 新增 hook

    當收到動態頁面請求時,路由器會使用請求的網址來決定要顯示哪個頁面,以及要將哪些資料繫結至頁面的資料集。您可新增 資料繫結路由器 hook,在特定時間點攔截此程序並插入額外邏輯。

在程式碼中使用 Wix 應用程式集合

引用 Wix 應用程式新增至網站的集合,其方式與引用自行建立的集合類似,但有一點不同。

若要在程式碼中引用自行建立的集合,只需在程式碼中使用集合名稱即可。例如,以下程式碼會從名為 myCollection 的集合中擷取 ID 為 00001 的品項:
1wixData.get("myCollection", "00001")
若要引用 Wix 應用程式新增至網站的集合,還必須在集合名稱的路徑中包含應用程式名稱。例如,假設您也想擷取 ID 為 00001 的品項,但這次是從 Members 資料庫中的 PrivateMembersData 集合擷取。
在這種情況下,您需要在集合名稱的路徑中包含 Members,如下所示:
1wixData.get("Members/PrivateMembersData", "00001")
您也可使用 Wix CMS 在部分 Wix 應用程式集合中新增和更新資訊。例如:
1let collectionToInsert = {
2  "title":"New Collection"
3};
4
5wixData.insert("Portfolio/Collections", collectionToInsert)
6  .then((item) => {
7  console.log(item);
8    })
您可在 Velo 範例網站Wix StoresWix Bookings 和部落格 區段中找到許多範例。