Как добавить JavaScript на сайт Weebly?

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

Запросы, найденные на сайте Weebly

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

Различные способы добавления скриптов в Weebly

Будь то Weebly или любой другой конструктор сайтов, есть три разных способа добавления скриптов в зависимости от необходимости и использования:

  1. Связывание внешнего файла сценария – действует на уровне сайта
  2. Добавление в верхний или нижний колонтитул страницы – действует на уровне страницы
  3. Встраивание в содержимое страницы – действует на уровне элемента

Связывание внешнего файла сценария в Weebly

Давайте рассмотрим пример добавления функции прокрутки вверх на сайте Weebly. Чтобы добавить эту функцию, нам нужен файл сценария, который будет централизованно связан на уровне сайта. Вы можете загрузить необходимый файл .js в разделе «Дизайн> Редактировать HTML / CSS> Активы». Щелкните значок +, затем выберите «Загрузить файл (ы)…» и загрузите файл сценария.

Загрузка скриптов в Weebly

Загрузка скриптов в Weebly

После того, как вы загрузили файл, следующим шагом будет привязка файла на уровне сайта в разделе «Настройки> SEO> Код нижнего колонтитула», используя следующий код:

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scroll-to-top.js"></script>

Теперь опубликуйте свой сайт и убедитесь, что функция (в данном случае прокрутите вверх) действует на всех страницах.

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

Добавление скрипта на уровне страницы

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

Вставьте код в «Страницы> Выберите страницу> Дополнительные настройки> Код нижнего колонтитула» и опубликуйте свой сайт. Любые скрипты, используемые в разделе нижнего / верхнего колонтитула в настройках уровня страницы, будут частью только этой страницы вашего сайта. Вы можете щелкнуть правой кнопкой мыши опубликованную страницу и просмотреть исходный код страницы, чтобы убедиться, что добавленный скрипт является частью кода.

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

Встраивание скрипта на уровне элемента

Иногда вам может потребоваться применить только к конкретному элементу. В этом случае используйте элемент «Вставить код», чтобы вставить скрипт вместе с кодом HTML / CSS.

Конфликтующие сценарии

Помимо собственно функциональности, на сайте возможны конфликты одного скрипта с другим. Это можно хорошо объяснить с помощью сценариев jQuery, где Weebly по умолчанию использует библиотеки Google для использования последней версии сценария, а другая версия, необходимая для определенных функций, может привести к конфликту. Когда вы замечаете, что сценарий ведет себя не так, как ожидалось, проверьте источник страницы, чтобы найти список сценариев, используемых на этой странице, и поищите возможные конфликты между ними.

Убедитесь, что сценарий используется в тегах