自訂代碼嵌入 - Webflow 幫助
使用代碼嵌入元素將自訂代碼塊添加到您的網站,以解鎖各種自訂功能。
<style>標籤中的CSS和<script>標籤中的JS。您無法在代碼嵌入元素中整合伺服器端語言(例如,Perl、PHP、Python、Ruby)。如何添加代碼嵌入元素
您可以在設計中的任何位置或富文本元素中嵌入第三方代碼或您自己的自訂代碼。
如何直接將自訂代碼添加到您的設計中
- 複製您想嵌入的代碼到剪貼板
- 打開添加面板並將代碼嵌入元素添加到Webflow 畫布
- 將您在步驟 1 中複製的自訂代碼粘貼進去
- 保存並關閉模態框
<html>、<body>或<head>標籤,否則您的網站/佈局將會崩潰。如何將自訂代碼添加到豐富文本元素
- 將您想嵌入的代碼複製到剪貼板
- 將光標放置在您想添加自訂代碼的豐富文本元素中
- 點擊“加號”圖標以打開插入菜單,然後點擊自訂代碼按鈕
- 將您在步驟1中複製的自訂代碼粘貼進去
如何在自訂代碼中使用動態內容
您可以將集合欄位整合到嵌入代碼中,以動態提取各種用途的信息。 了解更多:請參閱 Webflow 幫助中心的動態嵌入。
如何編輯代碼嵌入元素
有多種方法可以打開代碼編輯器並編輯代碼嵌入元素中的代碼。您可以:
- 在畫布上選擇代碼嵌入元素並雙擊
- 在畫布上選擇代碼嵌入元素並按下回車鍵
- 在畫布上選擇代碼嵌入元素並點擊設置“齒輪”圖標
- 在畫布上選擇代碼嵌入元素,然後在設置面板的代碼嵌入設置下點擊打開代碼編輯器
如何設置代碼嵌入元素的尺寸
如果代碼嵌入元素中的自定義代碼沒有明確設置大小或尺寸,內容通常會佔據其父元素的全部寬度。您可以在自定義代碼中附加 height="100%" width="100%",這將允許您從樣式面板調整嵌入元素和內容的寬度和高度。
如何預覽嵌入的內容
用 <iframe></iframe> 或 <style> 標籤包裹的自定義代碼將在畫布或富文本元素中顯示預覽,但某些代碼嵌入只能在實時網站上查看。每當在代碼編輯器中使用標籤時,您會在設計器中看到該元素的佔位符。
一旦您預覽、發布或導出您的網站,腳本和自定義代碼將在您放置的位置呈現。
此處的所有代碼將被排除
了解更多: 請參閱使用 .webflow.io 作為測試和反饋的暫存域。
常見問題和故障排除提示
我可以在代碼嵌入元素中使用服務器端語言嗎?
您無法在代碼嵌入元素中集成服務器端語言(例如,Perl、PHP、Python、Ruby)。代碼嵌入元素僅支持 HTML、CSS 在 <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 社群(包括工作人員)可以提供額外的幫助和資源。