Studio Two 編輯器：資料來源簡介

使用資料來源，即可在網站任何位置顯示即時內容。資料來源可以是 CMS 集合、Wix 應用程式（例如 Wix Blog）或自訂程式碼。您可決定每個元件要顯示的內容，例如文章標題或產品圖片。

為元件的每個部分選擇欄位，例如按鈕文字和連結。舉例來說，可在按鈕上顯示文章標題，並將按鈕連結至文章頁面。系統只會顯示相符的欄位，因此文字元件不會顯示圖片欄位。

將來源附加至頁面或容器，即可讓其中每個元件使用該來源的內容。連結元件前不必先執行這項操作。選擇來源後，編輯器會自動將來源附加至下列其中一處：

• 頁面：適用於大多數元件。
• 元件本身：適用於可包含來源的元件，例如重複器。
• 全域區段：適用於全域區段中的元件，例如頁首。

設計時，已連結的元件會顯示來源中的實際內容。如果沒有可顯示的項目，系統會改為顯示預留位置資料（例如「文章標題」），方便繼續設定元件樣式。

1. 前往編輯器。
2. 選擇要連結的元件。
3. 點擊編輯器右上角的「開啟檢驗器」圖示 。
4. （如果尚未開啟）點擊「設定」索引標籤。
5. 點擊相關屬性（例如「文字」、「連結」、「替代文字」）旁的「連結資料」圖示 。
6. 點擊「選擇來源」，然後選擇包含該內容的來源。
7. 點擊「選擇欄位」，然後選擇要讓元件顯示的欄位。
8. （如有需要）填寫欄位下方顯示的參數（例如「頁面連結參數」）。
9. 點擊「套用」。

選擇包含欲顯示內容的來源。「連結來源」清單包含以下來源類型：

• CMS 集合：在 CMS（內容管理系統）中建立的任何集合。
• Wix 應用程式：Wix Stores 和 Wix Blog 等應用程式會在各自的應用程式名稱下新增專屬來源。例如，Wix Blog 會新增文章（單篇文章）、文章清單（多篇文章的清單）和相關文章。
• 自訂程式碼：使用程式碼建立的來源。說明需求並透過 AI 建立來源，或自行撰寫程式碼。

也可從同一份清單建立新來源，或透過 AI 設定來源。若需要不同位置的內容，可在頁面或區段中新增多個來源。例如，在同一頁面顯示 CMS 集合中的作品集和最新部落格文章。

將來源附加至內容所在的容器，例如頁面、區段、容器、重複項目、頁首或頁尾。該容器內的所有元件都可使用此來源，無需逐一設定。

前往檢驗器面板的「設定」索引標籤，查看容器可使用的來源：

• 可用來源：附加至上層容器的來源，例如目前容器所在的區段或頁面。只有存在可顯示的來源時，才會出現此清單。
• 已連結來源：直接附加至此容器的來源。

附加至頁面的來源可供該頁面的所有區段和容器使用。頁首和頁尾不屬於頁面，因此無法取得頁面的來源。請直接將來源附加至頁首和頁尾。

容器外的元件無法使用該容器的來源。例如，若要將「載入更多」按鈕連結至重複項目的清單，請將來源附加至同時包含兩者的區段，再將重複項目和按鈕連結至該區段的來源。

查看畫布上的粉紅色標籤，即可確認哪些項目已連結至資料。附加來源的容器會在標籤上顯示來源名稱；靜態元件則會顯示藍色標籤。

1. 前往編輯器。

2. 選擇相關頁面、區段或容器。

3. 點擊編輯器右上角的「開啟檢驗器」圖示 。

4. （若尚未開啟）點擊「設定」索引標籤。

5. 點擊「＋連結來源」（位於「資料來源」下方）。

6. 選擇要使用的來源：

   • CMS 集合：選擇其中一個集合。若尚未建立集合，請點擊「新建」。

   • 自訂程式碼：選擇其中一個自訂程式碼來源。若尚未建立來源，請點擊「新建」。

   • Wix 應用程式：從應用程式清單中選擇來源（例如 Wix Blog 下方的「文章」）。

變更來源設定、前往來源內容，或將來源從容器中移除。容器所連結的來源會顯示在檢驗器的「設定」索引標籤中，位於「已連結的來源」下方。

1. 前往編輯器。
2. 選擇已連結該來源的頁面、區段或容器。
3. 點擊編輯器右上角的「開啟檢驗器」圖示 。
4. （若尚未開啟）點擊「設定」索引標籤。
5. 點擊來源旁的「更多操作」圖示 ；來源位於「已連結的來源」下方。
6. 選擇要執行的操作：
   • 資料設定：變更來源設定，例如篩選條件、排序方式，以及一次顯示的項目數量。這些設定會套用至所有與此來源連結的元件。此選項只會顯示於具有設定的來源。
   • 管理資料：前往來源內容的管理位置，例如 CMS 集合、應用程式管理介面（例如部落格貼文）或來源程式碼。
   • 移除：解除來源與此容器的連結。已連結的元件會保留在頁面上，但不再顯示來源內容。

使用重複器，以相同設計顯示項目清單，例如部落格貼文或作品集專案。將重複器連結至資料來源並設計一個項目後，每個項目都會以該設計顯示各自的內容。

深入了解如何新增及設定重複器。

新增集合頁面，並選擇項目頁面，以相同設計一次顯示一個項目。頁面元件已連結至集合。設計時，可使用畫布頂端的預覽工具列，預覽各個項目在頁面上的顯示效果。

也可新增含重複器的頁面，列出集合中的所有項目。深入了解如何新增及設定項目頁面。

新增 Wix 應用程式的元件，即可直接使用其中已有的資料。可在新增元件面板中應用程式名稱下方找到這些元件（例如 Wix Bookings）。舉例來說，新增 Wix Blog 動態消息和文章清單後，網站文章會立即顯示。Wix Bookings 的服務清單則會顯示服務。新增集合頁面上的元件也會自動連結；重複器連結後，其中的元件也會一併連結。

仍可透過操作列或直接在畫布上，自訂這些元件的設計和版面配置。

若要完全掌控內容的顯示位置，請新增文字和圖片等標準元件，再自行連結。深入了解如何在 Studio Two 中設定 Wix Stores 產品頁面。

設定條件，即可根據內容中的真／假欄位隱藏元件。在符合以下條件時隱藏中選擇真或假，決定何時隱藏元件。例如，可在仍可購買的每幅畫作上隱藏「售出」標籤。前往檢驗器的設定索引標籤，在進階下方即可找到條件式可見度。

• 可使用的欄位：僅限真／假欄位，包括計算結果為真／假的欄位。
• 無法新增條件的位置：頁面或全域區段本身（例如頁首或頁尾）。仍可為其中的元件新增條件。
• 畫布上的隱藏元件：如果編輯器能判斷元件將會隱藏（例如集合頁面或重複器中的元件），便會在元件上顯示條紋。選擇該元件後，條紋就會消失。

使用事件處理常式，在訪客與元件互動時執行其中一個來源的函式。可選擇點擊時、按兩下時、滑鼠移入時、滑鼠移出時、取得焦點時或失去焦點時。

1. 前往編輯器。
2. 選擇元件。
3. 點擊編輯器右上方的「開啟檢驗器」圖示 。
4. （如果尚未開啟）點擊「設定」索引標籤。
5. 向下捲動至「進階」下方的「事件處理常式」。
6. 點擊相關事件（例如「點擊時」）下方的「選擇函式」。
7. 點擊「選擇來源」，然後選擇來源。
8. 點擊「選擇欄位」，然後選擇要執行的函式。
9. （如有需要）填寫函式下方顯示的參數。
10. 點擊「套用」。

點擊下方問題，深入了解 Studio Two 編輯器中的資料來源。