自訂代碼嵌入 - Webflow 幫助

Last updated on 10/23/2025@mrbirddev
自訂代碼嵌入 - Webflow 幫助

使用代碼嵌入元素將自訂代碼塊添加到您的網站,以解鎖各種自訂功能。

代碼嵌入元素僅支持HTML<style>標籤中的CSS<script>標籤中的JS。您無法在代碼嵌入元素中整合伺服器端語言(例如,Perl、PHP、Python、Ruby)。
自訂代碼是一種高級修改,可能會與 Webflow 的基本功能衝突。因此,Webflow 無法保證任何自訂代碼的功能或完全相容性。此外,我們的支援團隊無法直接協助自訂代碼的設置或故障排除,因為這些主題超出了我們的客戶支援政策範圍。如果您在使用自訂代碼時遇到問題,請在 Webflow 論壇上告訴我們,整個 Webflow 社群(包括工作人員)可以提供額外的幫助和資源。

如何添加代碼嵌入元素

您可以在設計中的任何位置或富文本元素中嵌入第三方代碼或您自己的自訂代碼。

代碼嵌入元素中的自訂代碼不能超過 50,000 個字符。如果您要嵌入的代碼較長,可以將其存儲在其他伺服器上並在嵌入中引用該腳本。您還可以使用第三方工具壓縮自訂代碼,或將代碼拆分為多個嵌入元素(前提是不會破壞任何 JavaScript 函數)。

如何直接將自訂代碼添加到您的設計中

  • 複製您想嵌入的代碼到剪貼板
  • 打開添加面板並將代碼嵌入元素添加到Webflow 畫布
  • 將您在步驟 1 中複製的自訂代碼粘貼進去
  • 保存並關閉模態框
如果您的自訂代碼有開啟和/或關閉標籤,請確保添加這些標籤以確保您的代碼正常運行。此外,不要在自訂代碼中包含<html><body><head>標籤,否則您的網站/佈局將會崩潰。
為了更方便地查看和編輯代碼,預設啟用了自動換行功能,但您可以通過取消勾選代碼編輯器中的自動換行選項來關閉此設置。您還可以點擊“最大化”圖標來啟用全螢幕編輯。
專業提示:如果您希望在整個網站中重複使用相同的嵌入內容,可以使用元件將您的代碼嵌入元素轉換為可重用的元件。

如何將自訂代碼添加到豐富文本元素

  • 將您想嵌入的代碼複製到剪貼板
  • 將光標放置在您想添加自訂代碼的豐富文本元素
  • 點擊“加號”圖標以打開插入菜單,然後點擊自訂代碼按鈕
  • 將您在步驟1中複製的自訂代碼粘貼進去

如何在自訂代碼中使用動態內容

您可以將集合欄位整合到嵌入代碼中,以動態提取各種用途的信息。 了解更多:請參閱 Webflow 幫助中心的動態嵌入。

如何編輯代碼嵌入元素

有多種方法可以打開代碼編輯器並編輯代碼嵌入元素中的代碼。您可以:

  • 畫布上選擇代碼嵌入元素並雙擊
  • 畫布上選擇代碼嵌入元素並按下回車鍵
  • 畫布上選擇代碼嵌入元素並點擊設置“齒輪”圖標
  • 畫布上選擇代碼嵌入元素,然後在設置面板代碼嵌入設置下點擊打開代碼編輯器
值得注意:如果您無法在畫布上看到您的代碼嵌入元素,可以從導航器面板中找到並選擇它。然後,打開設置面板,在代碼嵌入設置下點擊打開代碼編輯器來編輯您的代碼。

如何設置代碼嵌入元素的尺寸

如果代碼嵌入元素中的自定義代碼沒有明確設置大小或尺寸,內容通常會佔據其父元素的全部寬度。您可以在自定義代碼中附加 height="100%" width="100%",這將允許您從樣式面板調整嵌入元素和內容的寬度和高度。

如何預覽嵌入的內容

<iframe></iframe><style> 標籤包裹的自定義代碼將在畫布或富文本元素中顯示預覽,但某些代碼嵌入只能在實時網站上查看。每當在代碼編輯器中使用標籤時,您會在設計器中看到該元素的佔位符。

一旦您預覽、發布或導出您的網站,腳本和自定義代碼將在您放置的位置呈現。

自定義代碼的效果會在預覽模式中顯示,但在您的網站發布之前不會生效。
要在預覽和評論模式中排除自定義腳本,請將您的代碼包裹在以下HTML註釋中:
此處的所有代碼將被排除

了解更多: 請參閱使用 .webflow.io 作為測試和反饋的暫存域。

常見問題和故障排除提示

我可以在代碼嵌入元素中使用服務器端語言嗎? 您無法在代碼嵌入元素中集成服務器端語言(例如,Perl、PHP、Python、Ruby)。代碼嵌入元素僅支持 HTMLCSS<style> 標籤中,以及 JS<script> 標籤中。

我可以增加 Code Embed 元素的 50,000 字元限制嗎?

Code Embed 元素中的自訂程式碼不能超過 50,000 字元。如果您要嵌入的程式碼較長,可以將其儲存在其他伺服器上,並在嵌入中引用該腳本。您也可以使用第三方工具壓縮您的自訂程式碼,或將程式碼拆分成多個 Code Embed 元素(前提是這不會破壞任何 JavaScript 函數)。

幫助!我的自訂程式碼無法運作! 仔細檢查您的程式碼是否包含適當的開頭和/或結尾標籤,並且不包含 <html><body><head> 標籤。

自 2020 年 8 月起,新發佈的 Webflow 網站包含 jQuery v3.5.1。使用自訂程式碼匯入其他版本的 jQuery 可能會導致網站上的衝突和意外行為。影響 DOM 事件的腳本,如 onClick、onHover 等,也可能導致意外行為。

請記住,自訂程式碼是一種進階修改,可能會與 Webflow 的基本功能發生衝突。因此,Webflow 無法保證任何自訂程式碼的功能或完全相容性。

我們的支援團隊無法直接協助自訂程式碼的設置或故障排除,因為這些主題不在我們的客戶支援政策範圍內。如果您在使用自訂程式碼時遇到問題,請在 Webflow 論壇上告訴我們,整個 Webflow 社群(包括工作人員)可以提供額外的幫助和資源。

返回 webflow 幫助

Last updated on 10/23/2025@mrbirddev
Recent Articles
Loading...