Встраивание пользовательского кода - помощь Webflow

Last updated on 10/23/2025@mrbirddev

Добавьте пользовательские блоки кода на ваш сайт с помощью элемента Code Embed, чтобы разблокировать все виды пользовательской функциональности.

Элемент Code Embed поддерживает только HTML, CSS в тегах <style> и JS в тегах <script>. Вы не можете интегрировать серверные языки (например, Perl, PHP, Python, Ruby) в элемент Code Embed.

Пользовательский код — это сложная модификация, которая может конфликтовать с основной функциональностью Webflow. Таким образом, Webflow не может гарантировать функциональность или полную совместимость любого пользовательского кода. Кроме того, наша служба поддержки не может предоставить прямую помощь в настройке или устранении неполадок пользовательского кода, так как эти темы выходят за рамки нашей политики поддержки клиентов. Если у вас возникнут проблемы с пользовательским кодом, пожалуйста, сообщите нам на форуме Webflow, где вся сообщество Webflow (включая сотрудников) может предоставить дополнительную помощь и ресурсы.

Как добавить элемент Code Embed

Вы можете встроить сторонний код или ваш собственный пользовательский код в любом месте вашего дизайна или в элементе с богатым текстом.

Пользовательский код в элементе Code Embed не может превышать 50,000 символов. Если код, который вы хотите встроить, длиннее, вы можете хранить его на другом сервере и ссылаться на скрипт в вашем встраивании. Вы также можете минимизировать ваш пользовательский код с помощью стороннего инструмента или разделить код на несколько элементов Embed (при условии, что это не нарушает функции JavaScript).

Как добавить пользовательский код непосредственно в ваш дизайн

Скопируйте код, который вы хотите встроить, в буфер обмена
Откройте панель добавления и добавьте элемент Code Embed на холст Webflow
Вставьте пользовательский код, который вы скопировали на шаге 1
Сохраните и закройте модальное окно

Если ваш пользовательский код содержит открывающие и/или закрывающие теги, обязательно добавьте их, чтобы ваш код работал как ожидается. Кроме того, не включайте теги <html>, <body> или <head> в ваш пользовательский код, иначе ваш сайт/макет сломается.

Перенос строк включен по умолчанию для удобства просмотра и редактирования кода, но вы можете отключить эту настройку, сняв флажок Перенос строк в редакторе кода. Вы также можете включить полноэкранное редактирование, нажав на значок «максимизировать».

Совет: Если вы хотите повторно использовать один и тот же встроенный контент на всем сайте, вы можете использовать компоненты, чтобы превратить ваш элемент Code Embed в повторно используемый компонент.

Как добавить пользовательский код в элемент с форматированным текстом

Скопируйте код, который вы хотите встроить, в буфер обмена
Поместите курсор в элемент с форматированным текстом, куда вы хотите добавить пользовательский код
Нажмите на значок «плюс», чтобы открыть меню вставки, и нажмите кнопку пользовательский код
Вставьте пользовательский код, который вы скопировали на шаге 1

Как использовать динамический контент в вашем пользовательском коде

Вы можете включать поля коллекции в встроенный код, чтобы динамически извлекать информацию для различных целей. Узнать больше: См. Динамические встраивания в Справочном центре Webflow.

Как редактировать элемент Code Embed

Существует несколько способов открыть редактор кода и отредактировать код в элементе Code Embed. Вы можете:

Выбрать элемент Code Embed на холсте и дважды щелкнуть
Выбрать элемент Code Embed на холсте и нажать Enter
Выбрать элемент Code Embed на холсте и нажать на значок настройки «шестеренка»
Выбрать элемент Code Embed на холсте и нажать Открыть редактор кода в панели настроек под настройками Code Embed

Полезно знать: Если вы не видите свой элемент Code Embed на холсте, вы можете найти и выбрать его в панели Navigator. Затем откройте Settings panel и нажмите Open code editor в разделе Code Embed settings, чтобы отредактировать ваш код.

Как установить размеры для элемента Code Embed

Если пользовательский код в элементе Code Embed явно не задает размеры, содержимое может занимать всю ширину родительского элемента. Вы можете добавить height="100%" width="100%" в ваш пользовательский код, что позволит вам регулировать ширину и высоту элемента встраивания и содержимого из Style panel.

Как просмотреть встроенное содержимое

Пользовательский код, обернутый в теги <iframe></iframe> или <style>, будет показывать предварительный просмотр на холсте или в вашем элементе с богатым текстом, но некоторые встраивания кода можно просмотреть только на живом сайте. Каждый раз, когда тег используется в редакторе кода, вы увидите заполнитель для этого элемента в Designer.

После предварительного просмотра, публикации или экспорта вашего сайта скрипт и пользовательский код внутри будут отображаться там, где вы их разместили.

Эффекты пользовательского кода появляются в режиме предварительного просмотра, но они не будут активны, пока ваш сайт не будет опубликован.

Чтобы исключить пользовательские скрипты из режимов предварительного просмотра и комментариев, оберните ваш код в следующий HTML-комментарий:
Весь код здесь будет исключен

Узнать больше: См. Использование .webflow.io в качестве домена для тестирования и обратной связи.

Часто задаваемые вопросы и советы по устранению неполадок

Могу ли я использовать серверные языки в элементе Code Embed? Вы не можете интегрировать серверные языки (например, Perl, PHP, Python, Ruby) в элемент Code Embed. Элемент Code Embed поддерживает только HTML, CSS в тегах <style> и JS в тегах <script>.

Могу ли я увеличить лимит в 50 000 символов для элемента Code Embed?
Пользовательский код в элементе Code Embed не может превышать 50 000 символов. Если код, который вы хотите встроить, длиннее, вы можете хранить его на другом сервере и ссылаться на скрипт в вашем встраивании. Вы также можете минимизировать ваш пользовательский код с помощью стороннего инструмента или разделить код на несколько элементов Code Embed (при условии, что это не нарушает функции JavaScript).

Помогите! Мой пользовательский код не работает!
Проверьте, что ваш код включает соответствующие открывающие и/или закрывающие теги и не содержит теги <html>, <body> или <head>.

С августа 2020 года на вновь опубликованных сайтах Webflow используется jQuery v3.5.1. Импорт других версий jQuery с пользовательским кодом может вызвать конфликты и непредвиденное поведение на вашем сайте. Скрипты, которые влияют на события DOM, такие как onClick, onHover и т.д., также могут вызвать непредвиденное поведение.

Важно помнить, что пользовательский код — это сложная модификация, которая может конфликтовать с базовой функциональностью Webflow. Поэтому Webflow не может гарантировать функциональность или полную совместимость любого пользовательского кода.

Наша служба поддержки не может предоставить прямую помощь в настройке или устранении неполадок пользовательского кода, так как эти темы выходят за рамки нашей политики поддержки клиентов. Если у вас возникли проблемы с пользовательским кодом, пожалуйста, сообщите нам на форуме Webflow, где вся сообщество Webflow (включая сотрудников) может предоставить дополнительную помощь и ресурсы.

Назад к помощи Webflow

Last updated on 10/23/2025@mrbirddev