# Studio Two 編輯器：使用 Aria 為網站編寫程式碼 Source: https://support.wix.com/zh-hant/article/studio-two-editor-using-aria-to-code-your-site-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)。 只要描述需求，即可使用 Wix Code 為網站新增自訂功能。 Aria 是 Wix 內建的 AI 小幫手，可協助編寫及建置程式碼。無需親自編寫任何程式碼，即可建立網站組件、自動執行後端任務、新增管理介面頁面等。 ![裁切過的螢幕截圖，顯示 Studio Two 編輯器左上角醒目提示的「設計／程式碼」切換開關。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/59ab096e-e0a0-4b06-ad46-bd78e940c7f1/2026/11/13/8438648c-7015-42b6-bd05-671ebc4c0668/casc.png) --- ## 可建置的內容 只需一段描述，Aria 就能建置各式各樣的自訂功能。以下是幾個可要求 Aria 建置的功能範例： * **公告列：**「在網站頂端放置包含訊息和按鈕的公告列，並讓我隨時變更文字和色彩。」 * **營業時間：**「在網站上逐日顯示營業時間，並醒目提示今天的資料列。」 * **自動加上標籤：**「每當有人首次下單時，自動為對方加上『首次購買』標籤。」 * **管理介面檢視：**「新增管理介面頁面，顯示今天的預訂，並依工作人員分組。」 描述越具體，結果就越準確。您可隨時要求 Aria 改善或調整已建置的內容。 --- ## 重要概念 不需要具備進階程式設計知識，也能在 Studio Two 編輯器中使用程式碼。若要檢閱或調整 Aria 建置的內容，了解以下 5 個概念會很有幫助：擴充功能、自訂組件、資料來源、函式和繫結。 點擊下方選項即可了解更多。 **擴充功能** [擴充功能](https://dev.wix.com/docs/studio-two/code-your-site/extensions/about-studio-two-extensions)是 Wix Code 的建置基礎，可透過 Wix Extension Builder 面板建立。您可建立 [Editor React Component](https://dev.wix.com/docs/studio-two/code-your-site/code-model/editor-react-components/about-editor-react-components)（可重複用於網站的 UI 組件）、Data Source（直接向 UI 提供資料和邏輯），或 Function Library（可重複使用的工具函式）。網站擴充功能也可以是直接新增至網站頁面的 Embedded Script 或 Site Plugin。 **自訂組件** 自訂組件是顯示在網站頁面上的視覺元件，例如卡片、小工具或橫幅。要求 Aria 建置可見內容時，Aria 會建立包含組件的網站擴充功能，供您放置在編輯器中。 **資料來源** [資料來源](https://dev.wix.com/docs/studio-two/code-your-site/code-model/data-sources/about-data-sources)是共用的資料層，可讓網站的不同部分讀取相同的資訊來源。例如，同一頁面上的倒數橫幅和促銷徽章可顯示相同的結束日期；只要變更一次，兩者就會自動更新。 **函式** 函式是可重複使用的邏輯。Aria 建置功能時，可能會在幕後建立函式，例如統一價格格式、計算折扣或檢查條件。網站上的多個位置都能呼叫這些函式，無需重複編寫相同邏輯。函式會儲存在[函式庫](https://dev.wix.com/docs/studio-two/code-your-site/code-model/function-libraries/about-function-libraries)中。 **繫結** 繫結可將組件與其資料和邏輯連結。Aria 建立組件時，會自動設定繫結。在編輯器中選擇組件後，即可前往[檢驗器面板](https://support.wix.com/zh-hant/article/studio-two-editor-working-with-the-inspector-panel)檢閱及調整繫結。 --- ## 開始使用 請按照以下步驟，使用 Aria 搭配 Wix Code 建立自訂組件。 ### 使用 Aria 建立功能： 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. 點擊頂端列的「**程式碼**」。 **注意：**如果是第一次使用，請在歡迎畫面點擊「**開始編寫程式碼**」。Wix 會設定程式開發環境，過程約需 1 分鐘。 ![開始使用 Studio Two 編寫程式碼，](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2914f434-9852-424e-95d0-20ac2b9d114c/2026/10/29/6e91997c-508e-4692-8c75-f87b0fed9917/start_coding.png) 1. 點擊「**詢問 AI**」即可開啟 Aria。 2. 輸入要建立的功能說明，內容越具體越好。請說明功能的外觀、顯示位置，以及應使用哪些資料。 **提示：**一次描述一項功能，效果最佳。完成第一項功能後，即可要求建立更多功能。 3. 點擊「**預覽**」，在發布前檢查功能的外觀和運作方式。 4. 點擊「**發布**」，即可將變更發布至已上線網站。 --- ## 使用 Aria 進行疑難排解 如果功能未如預期運作，Aria 可協助找出並修正問題。 ### 使用 Aria 排解功能問題： 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. 點擊「**詢問 AI**」即可開啟 Aria。 4. 使用簡單易懂的語言描述問題。例如：「公告列未顯示在首頁」或「營業時間小工具顯示錯誤的日子」。 5. 請 Aria 說明可能造成問題的原因。 6. 請 Aria 修正問題，或逐步說明需要變更的內容。 > 如果 Aria 無法解決問題，請查看編輯器底部的「**問題**」面板，了解錯誤詳細資訊。若為後端錯誤，請查看「**開發者工具**」![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2914f434-9852-424e-95d0-20ac2b9d114c/2026/10/29/8592c109-4c84-431f-a05a-a1ddd1b8de38/image.png)面板中的「**Wix 日誌**」。深入了解[建置錯誤疑難排解](https://dev.wix.com/docs/studio-two/test-your-site/troubleshoot-build-errors)。 --- ## 常見問題 點擊問題即可了解更多 Wix Code 資訊。 **「預覽」和「發布」有何不同？** 「**預覽**」會在測試環境中即時顯示變更，不會影響已上線網站。 「**發布**」會將變更發布至已上線網站，讓訪客看見變更。 **可以手動編寫或編輯程式碼嗎？** 可以。程式開發環境是以瀏覽器為基礎的 Visual Studio Code 版本。您可開啟 Aria 建立的任何檔案，並直接編輯。專案使用 TypeScript 和 JavaScript，並可存取完整的 @wix/\* SDK 套件庫。您可透過「**Wix Extension Builder**」面板從頭建立新的擴充功能。 **可以將功能連結至資料庫集合嗎？** 可以。側邊欄中的 **Wix Data** 面板會顯示網站的所有資料庫集合。可要求 Aria 將組件連結至集合，或使用 @wix/data 套件自行撰寫連結程式碼。 **如何還原已發布的程式碼變更？** Wix Code 使用 Git 進行版本控制。可在編輯器中開啟**原始檔控制**面板，檢閱變更記錄，並視需要還原至先前版本。 **可以使用外部程式庫或套件嗎？** 專案以 React 和 TypeScript 框架建置，並可安裝其他 npm 套件。可要求 Aria 協助新增套件，或開啟終端機，使用標準 npm 指令手動安裝。