Wix 編輯器：新增自訂元件至網站
使用自訂元件在網站上新增可見內容，並運用額外的 CSS 功能設計元件。
重要：
Wix 無法為未經 Wix 建立或測試的外部程式碼提供支援。如果程式碼片段發生問題，請直接聯絡提供者。
什麼是自訂元件？
自訂元件可用來建立自訂 HTML 標籤，並在 Wix 網站上使用。自訂元件適用於 Wix 支援的所有瀏覽器，也可搭配任何支援 HTML 5 的 JavaScript ES6 程式庫或框架使用。
自訂元件可用於：
- 自行設計 Wix 編輯器「新增元件」面板或應用程式尚未提供的元件。
- 運用額外的 CSS 功能設計元件，例如 CSS 動畫、倒數動畫、階層連結、工具提示、標籤、圖表、引言、游標變化和捲動互動。
- 變更已發布網站上的元件高度，例如避免頁面發生版面配置衝突。
- 改善效能（相較於以 iframe 為基礎的組件）。實際效果主要取決於自訂元件的實作方式。
注意：
您可使用第三方來源的自訂元件；將自訂元件新增至頁面時，請務必更新 標籤名稱（位於 屬性 中）。
新增自訂元件
- 點擊編輯器左側的「新增元件」
。 - 點擊「嵌入程式碼」。
- 點擊「自訂元件」，將其新增至頁面。
- 點擊「選擇來源」。
- 選擇「伺服器網址」，並輸入包含檔案名稱的網址。
注意：如果使用 Velo，可點擊「Velo 檔案」。 - 輸入「標籤名稱」。
注意：
所有元件都必須在頁面的自訂元件登錄庫中界定。標籤名稱就是註冊元件時使用的名稱，可在 JavaScript 檔案的 customElements.define() 程式碼列中找到。
設定自訂元件的屬性
重要：
屬性功能尚未開放給所有使用者。
在自訂元件的 DOM 節點上界定 HTML 屬性。請務必在自訂元件的程式碼中加入可辨識並處理這些已界定屬性的程式碼。
- 點擊自訂元件上的「設定屬性」。
- 點擊「新增屬性」。
- 輸入屬性名稱，例如「rotation」或「width」。
- 指派屬性值，例如 45。
注意：
也可編輯及移除自訂元件的 HTML 屬性。
準則與限制
- 基於安全考量，必須將網站升級至進階方案、連結網域，並移除網站上的所有廣告，才能使用自訂元件。
- 請確認程式碼使用 HTTPS，而非 HTTP，否則不會顯示在已上線的網站上。
- JavaScript 程式碼包含頁面的核心元件，但設計設定及其他複雜功能可能會分開儲存。因此，如果主要 JS 程式碼中未包含 CSS 和其他 JS 檔案等相關內容，部分元件的功能或外觀可能會有所不同。
- 請務必確認程式碼為最新版本，並與 HTML5 相容。如果使用舊版 JS 或 HTML 編寫，大多數瀏覽器將無法正確顯示頁面及指令碼。
- 可使用 Velo API 個別界定 SEO。
- 網站表現取決於自訂元件本身的實作方式。
- 如果未使用 Velo，則必須自行託管自訂元件的程式碼。
重要：
基於安全考量，自訂元件會在編輯器和預覽模式的 iFrame 中呈現，可能會影響組件的版面配置。前往已發布的網站，查看元件在已上線網站上的實際外觀。也可使用測試網站預覽已上線網站。
自訂元件範例
以下範例說明如何將基本自訂元件新增至網站。指示將說明如何在網站上新增「Hello World」文字。
首先，需要在 JavaScript 檔案中建立元件，並編寫元件及其行為的程式碼。
注意：
將網站升級至進階方案、連結網域，並確認已移除 Wix 廣告。
建立並新增自訂元件：
- 設定自訂元件的伺服器，或取得伺服器存取權。如果使用自己的外部伺服器託管，則在 Wix 編輯器中新增自訂元件時，需將自訂元件連結至伺服器網址。
- 如果在本機託管，可以使用 HTTP。
- 如果使用外部伺服器託管，則必須使用 HTTPS。了解外部伺服器託管的入門方法
注意：如果使用 Velo 並希望透過 Wix 託管，請點擊此處。
- 使用任何 IDE，以標準 ECMAScript 2015 類別語法在 JavaScript 檔案中建立自訂元件。如需完整指示和範例，請參閱 MDN 文件。
- 界定自訂元件類別：
HelloWorld類別是自訂元件的類別，註冊自訂元件時會用到此類別。connectedCallback()是生命週期回呼函式，將元件附加至 DOM 時會自動觸發。
1class HelloWorld extends HTMLElement {
2 connectedCallback() {
3 this.innerHTML = '<br/><br/><br/>Hello World!';
4 }
5}
6customElements.define('hello-world', HelloWorld);使用
customElements.define(name, class)方法註冊自訂元件類別。在編輯器中將自訂元件新增至網站時，請輸入註冊名稱作為標籤名稱。完成註冊後，即可在網站上使用自訂元件。- 第一個參數
hello-world對應至標籤名稱，稍後會在編輯器中界定（步驟 8）。 - 第二個參數
HelloWorld是自訂元件的類別名稱。
- 第一個參數
1CustomElementRegistry.define('hello-world', HelloWorld);- 在編輯器中新增自訂元件（請參閱上方說明）。
- 點擊「設定」。
- 選擇「伺服器網址」，並輸入自訂元件指令碼檔案的伺服器網址。
- 輸入標籤名稱。標籤名稱對應至上一步使用
define()函式註冊的元件名稱。此範例中的標籤名稱為hello-world。 - 儲存並發佈網站。
需要更多進階資訊嗎？