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

Source: https://support.wix.com/zh-hant/article/studio-two-editor-about-data-sources-zh-hant (updated 2026-11-13)
Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt

> 本文適用於 2026 年 11 月發布的新版 Studio Two 編輯器。若不確定目前使用的是 Studio 編輯器還是 Studio Two 編輯器，請[在此查看詳細資訊](https://support.wix.com/zh-hant/article/studio-two-editor-the-difference-between-studio-editor-and-studio-two-editor)。

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

---

## 將元件連結至要顯示的內容

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

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

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

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

> **提示：**
>
> * 若是文字和媒體（例如圖片或影片），也可從操作列連結主要內容。點擊主要操作（例如**「編輯文字」**、**「取代圖片」**）旁的下拉式箭頭，然後選擇**「連結資料」**。
> * 若是其他元件，請點擊操作列上的**「更多操作」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/01/12/ddca5540-73d4-4e55-8426-8b70d4d70199/9c7b2e12-826b-486f-ba65-c1b9220e7808.png)，然後選擇**「連結資料」**。

### 將元件連結至欄位：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 選擇要連結的元件。
3. 點擊編輯器右上角的**「開啟檢驗器」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png)。
4. （如果尚未開啟）點擊**「設定」**索引標籤。
5. 點擊相關屬性（例如**「文字」**、**「連結」**、**「替代文字」**）旁的**「連結資料」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2026/07/31/5b9616f3-b367-4151-9641-1aae4c08c996/ConnectCMSicon.png)。
6. 點擊**「選擇來源」**，然後選擇包含該內容的來源。
7. 點擊**「選擇欄位」**，然後選擇要讓元件顯示的欄位。
8. （如有需要）填寫欄位下方顯示的參數（例如**「頁面連結參數」**）。
9. 點擊**「套用」**。

> **提示：** 若要變更或移除連結，請點擊屬性旁的**「更多操作」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/01/12/ddca5540-73d4-4e55-8426-8b70d4d70199/9c7b2e12-826b-486f-ba65-c1b9220e7808.png)，然後選擇**「編輯連結」**或**「取消連結」**。

---

## 選擇內容來源

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

* **CMS 集合：**在 [CMS（內容管理系統）](https://support.wix.com/zh-hant/article/cms-content-management-system-an-overview)中建立的任何集合。
* **Wix 應用程式：**Wix Stores 和 Wix Blog 等應用程式會在各自的應用程式名稱下新增專屬來源。例如，Wix Blog 會新增**文章**（單篇文章）、**文章清單**（多篇文章的清單）和**相關文章**。
* **自訂程式碼：**使用程式碼建立的來源。說明需求並透過 AI 建立來源，或自行撰寫程式碼。

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

---

## 統一設定容器內的來源

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

前往[檢驗器面板](https://support.wix.com/zh-hant/article/studio-two-editor-working-with-the-inspector-panel)的「**設定**」索引標籤，查看容器可使用的來源：

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

> **提示：** 容器內的元件已可使用「**可用來源**」下的來源，無需再次附加。若重複項目使用所屬區段或頁面的來源，該來源也會顯示在此處，而非「**已連結來源**」下。

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

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

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

### 將來源附加至容器：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 選擇相關頁面、區段或容器。
3. 點擊編輯器右上角的**「開啟檢驗器」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png)。
4. （若尚未開啟）點擊**「設定」**索引標籤。
5. 點擊**「＋連結來源」**（位於**「資料來源」**下方）。
6. 選擇要使用的來源：  
   * **CMS 集合：**選擇其中一個集合。若尚未建立集合，請點擊**「新建」**。  
   * **自訂程式碼：**選擇其中一個自訂程式碼來源。若尚未建立來源，請點擊**「新建」**。  
   * **Wix 應用程式：**從應用程式清單中選擇來源（例如 **Wix Blog** 下方的**「文章」**）。

---

## 管理來源

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

### 管理來源：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 選擇已連結該來源的頁面、區段或容器。
3. 點擊編輯器右上角的**「開啟檢驗器」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png)。
4. （若尚未開啟）點擊**「設定」**索引標籤。
5. 點擊來源旁的**「更多操作」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/01/12/ddca5540-73d4-4e55-8426-8b70d4d70199/9c7b2e12-826b-486f-ba65-c1b9220e7808.png)；來源位於**「已連結的來源」**下方。
6. 選擇要執行的操作：  
   * **資料設定：**變更來源設定，例如篩選條件、排序方式，以及一次顯示的項目數量。這些設定會套用至所有與此來源連結的元件。此選項只會顯示於具有設定的來源。  
   * **管理資料：**前往來源內容的管理位置，例如 CMS 集合、應用程式管理介面（例如部落格貼文）或來源程式碼。  
   * **移除：**解除來源與此容器的連結。已連結的元件會保留在頁面上，但不再顯示來源內容。

![檢驗器面板中已連結來源的「更多操作」選單螢幕截圖。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2026/11/04/787b3c7b-e5fc-4951-9019-7e1118550991/DataSources-ManageSource-v3.png)

> **提示：** 若來源具有設定，也可選擇容器，然後點擊操作列上的**「管理 \[來源名稱\]」**（例如**「管理作品集」**），即可開啟來源的**「資料設定」**面板。

---

## 使用重複器顯示項目清單

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

深入了解如何[新增及設定重複器](https://support.wix.com/zh-hant/article/studio-two-editor-adding-and-setting-up-repeaters)。

---

## 為每個項目建立頁面

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

也可新增含重複器的頁面，列出集合中的所有項目。深入了解如何[新增及設定項目頁面](https://support.wix.com/zh-hant/article/studio-two-editor-adding-and-setting-up-item-pages)。

---

## 使用已連結的元件開始設計

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

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

若要完全掌控內容的顯示位置，請新增文字和圖片等標準元件，再自行連結。深入了解如何[在 Studio Two 中設定 Wix Stores 產品頁面](https://support.wix.com/zh-hant/article/wix-stores-adding-and-setting-up-the-studio-two-product-page)。

---

## 根據內容顯示或隱藏元件

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

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

---

## 讓元件回應訪客操作

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

### 新增事件處理常式：

1. [前往編輯器](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26)。
2. 選擇元件。
3. 點擊編輯器右上方的**「開啟檢驗器」**圖示 ![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2026/07/03/7a2108d4-e689-4bc2-ab56-4cd429ad0062/7e829fa7-aefd-41bf-9201-836a19bff654.png)。
4. （如果尚未開啟）點擊**「設定」**索引標籤。
5. 向下捲動至**「進階」**下方的**「事件處理常式」**。
6. 點擊相關事件（例如**「點擊時」**）下方的**「選擇函式」**。
7. 點擊**「選擇來源」**，然後選擇來源。
8. 點擊**「選擇欄位」**，然後選擇要執行的函式。
9. （如有需要）填寫函式下方顯示的參數。
10. 點擊**「套用」**。

---

## 常見問題

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

**為什麼移動元件後，元件不再顯示內容？**

只有在元件移入的容器使用相同來源時，元件才會保留連結。若來源不同，拖曳時會顯示警告。放開元件後，編輯器會移除連結並顯示訊息，其中包含**「復原」**選項。點擊**「復原」**即可恢復連結，或在新容器中重新連結元件。

**刪除集合或移除應用程式後會發生什麼情況？**

系統會從所有已連結的容器中移除來源。與該來源連結的元件會保留在網站上，但不再顯示其內容。若移除應用程式，系統也會刪除其頁面和應用程式元件。

**將區段設為全域區段後，資料來源會發生什麼情況？**

區段中的元件會保持連結。編輯器會將元件使用的來源從頁面移至全域區段。若之後將其改回一般區段，編輯器會將來源複製到該區段。