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

動態頁面會顯現在側邊欄的 頁面程式碼 區段中。

請留意
動態頁面會根據動態頁面網址前綴在 Velo 側邊欄中組成群組。瞭解更多。
從 Velo 側邊欄,可執行以下 CMS 操作:
管理集合
管理動態頁面
檢視頁面設定
集合
透過 Wix CMS,您可在網站上建立並管理資料庫集合。使用集合與程式碼時,請留意以下資訊,Velo 可讓您在處理集合時擴充功能:
欄位 ID
將欄位新增至集合時,系統會根據欄位名稱自動建立欄位 ID。只有在啟用 Velo 開發模式時,才能看到欄位 ID。如有需要,您也可以自行指定欄位 ID。

重要資訊
- 欄位建立後,即無法變更欄位 ID。
- 欄位 ID 開頭不得為 $,且不得包含句點「.」
使用 Data API 或 Dataset API 透過程式碼處理欄位時,會使用欄位 ID。例如,若想使用 Data API 將品項插入集合,可使用以下程式碼:
1wixData.insert("MyCollectionName", {"someFieldKey": "someValue"});hook
非結構化欄位
使用程式碼將欄位新增至集合時,欄位不會自動新增至集合結構中,必須手動新增。在 Wix CMS 中,這些欄位會顯現警告圖示,表示該欄位尚未界定。瞭解更多。您可點擊欄位名稱來界定欄位類型並將其新增至結構中。

移除與還原集合
如果移除程式碼中引用的集合,程式碼將無法運作,並會在編輯器和已發佈的網站中產生錯誤。如有需要,您可以使用其他名稱取代集合名稱。
如果恢復已移除的集合,程式碼將再次運作。
如果恢復已移除的集合,程式碼將再次運作。
資料 API
資料配額
使用者輸入
透過 Wix CMS,您可建立使用者輸入表單並將使用者資料儲存在集合中。處理使用者輸入元件時,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 新增至動態頁面:
- 點擊編輯器左側的 選單與頁面
。 - 點擊動態頁面旁的「尚有...項操作」圖示
。 - 選擇 設定 並選擇 頁面資訊 索引標籤。
- 點擊 新增 hook。
當收到動態頁面請求時,路由器會使用請求的網址來決定要顯示哪個頁面,以及要將哪些資料繫結至頁面的資料集。您可新增 資料繫結路由器 hook,在特定時間點攔截此程序並插入額外邏輯。
在程式碼中使用 Wix 應用程式集合
引用 Wix 應用程式新增至網站的集合,其方式與引用自行建立的集合類似,但有一點不同。
若要在程式碼中引用自行建立的集合,只需在程式碼中使用集合名稱即可。例如,以下程式碼會從名為 myCollection 的集合中擷取 ID 為 00001 的品項:
若要在程式碼中引用自行建立的集合,只需在程式碼中使用集合名稱即可。例如,以下程式碼會從名為 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 Stores、Wix Bookings 和部落格 區段中找到許多範例。


Plus 圖示,然後點擊 新集合。
,點擊 編輯設定,然後點擊 此集合的用途為何? 中的下拉式選單。選擇其中一個權限預設格式,或選擇 自訂使用,然後點擊 設定自訂權限 以自訂權限設定。
並點擊 移除集合。
並點擊 新增動態頁面。
並選擇 新增/移除 Hook。