Пользовательский код проекта

Открыв Настройки проекта и выбрав раздел Пользовательский код (Custom code), вы можете добавить код, который будет применен ко всему проекту, т.е. будет работать для всех страниц сайта. Это дает возможность подключать пользовательские стили для всего сайта, а также внешние скрипты и библиотеки.

Работа с пользовательским кодом доступна на тарифе хостинга Business и тарифе команды Team Pro.

Раздел Пользовательский код

Если вы хотите добавить пользовательский код для отдельной страницы сайта, это можно сделать в режиме редактирования проекта (Редактор дизайна) в Настройках страницы.

Пользовательский код можно добавить в двух местах: в теге <head> и перед тегом </body>.

Код в теге <head>

Размещение кода в теге <head> дает возможность добавить ссылки на внешние ресурсы, а также метаданные и пользовательские стили. Для этого используются теги <link>, <meta> и <style></style>.

Код перед тегом </body>

Код будет размещен в самом низу перед закрытием тега <body>. Здесь можно разместить, например, теги <script></script> для подключения кода JavaScript.

Правила оформления кода

Поддерживается код следующих типов: HTML, CSS и JavaScript. Серверные языки программирования (например, Perl, PHP, Python, Ruby) интегрировать нельзя.

  • Не забывайте использовать закрывающие теги. Для упрощения работы реализовано автоматическое закрытие тегов.
  • Не используйте в пользовательском коде теги <html>, <body> и <head>

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

Как указывать ссылки в пользовательском коде

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

Примеры относительных ссылок: "/image.png", "/images/"

Примеры абсолютных ссылок: "https://your-domain.ru/image.png", "https://your-domain.ru/images/"

Если вы укажете абсолютные ссылки, они перестанут работать, когда вы смените домен (например, подключите свой).

Если нужно подключить длинный код

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

Чтобы подключить файл с кодом к проекту:

  1. В Редакторе дизайна загрузите файл в Ресурсы проекта

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

Нажмите кнопку загрузки на вкладке Ресурсы

Файл появится в списке Ресурсов.

Файл загружен в ресурсы проекта

  1. Скопируйте ссылку на файл Кликните правой кнопкой мыши на файл и выберите — Копировать ссылкуОтносительная ссылкаКопировать для открытия.

    Скопируйте ссылку на файл

  2. Подключите файл в настройках проекта

    Перейдите в Настройки проекта в раздел Пользовательский код и добавьте следующий код в блок Перед тегом <body>, вставив в него ссылку на ваш файл: <script src="ссылка на ваш файл"></script>

    Например, <script src="/f/script.js"></script>

Подключите файл в разделе Пользовательский код → Перед тегом <body>

Готово! Файл с кодом подключен к проекту.