Подключение через CDN

Shepherd.js предоставляет удобный способ создания интерактивных туров по веб-приложению. Для быстрого использования библиотеки без установки через npm можно подключить её через CDN. Это особенно актуально для проектов, где необходима минимальная настройка или быстрый прототип.

Подключение CSS

Shepherd.js использует собственные стили для корректного отображения подсказок, стрелок и кнопок навигации. Для подключения CSS через CDN необходимо добавить в <head> HTML-документа следующую строку:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.1/dist/css/shepherd.css" />

Ключевые моменты:

  • Используется jsdelivr — надёжный CDN с высокой доступностью.
  • Версия @9.1.1 указана для стабильности и совместимости. При необходимости можно заменить на последнюю доступную версию.
  • Стили должны быть подключены до скрипта Shepherd.js, чтобы подсказки отображались корректно.

Подключение JavaScript

Для работы Shepherd.js нужен скрипт библиотеки. Его подключение производится перед закрывающим тегом </body> или в <head> с атрибутом defer:

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@9.1.1/dist/js/shepherd.min.js"></script>

Особенности подключения:

  • Минифицированная версия shepherd.min.js уменьшает время загрузки.
  • Скрипт должен быть подключён после подключения CSS.
  • Использование CDN позволяет мгновенно получить библиотеку без локальной сборки.

Подключение Popper.js (опционально)

Для корректного позиционирования подсказок Shepherd.js может использовать Popper.js. В последних версиях Shepherd.js Popper встроен, но в старых версиях подключение через CDN выглядело так:

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>

Если используется современная версия Shepherd.js (9.x и выше), отдельное подключение Popper.js не требуется.

Создание первого тура

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

<script>
  const tour = new Shepherd.Tour({
    defaultStepOptions: {
      classes: 'shepherd-theme-arrows',
      scrollTo: true
    }
  });

  tour.addStep({
    id: 'welcome',
    text: 'Добро пожаловать в тур по приложению!',
    attachTo: { element: '#startButton', on: 'bottom' },
    buttons: [
      {
        text: 'Далее',
        action: tour.next
      }
    ]
  });

  tour.start();
</script>

Разбор ключевых параметров:

  • defaultStepOptions задаёт общие настройки всех шагов, включая CSS-класс темы и прокрутку к элементу.
  • attachTo определяет привязку подсказки к конкретному элементу DOM и сторону, с которой она будет отображаться.
  • buttons управляет кнопками навигации. tour.next автоматически переходит к следующему шагу.
  • tour.start() запускает тур после создания всех шагов.

Особенности работы через CDN

  1. Версии и совместимость: При подключении через CDN важно фиксировать версию, чтобы новые релизы библиотеки не ломали существующую функциональность.
  2. Зависимости: CSS и JavaScript подключаются отдельно, порядок важен. CSS всегда должен идти раньше JS.
  3. Производительность: Использование CDN снижает нагрузку на сервер проекта и ускоряет загрузку для пользователей.
  4. Быстрая интеграция: Такой способ идеально подходит для демонстрационных страниц, тестовых прототипов и обучения.

Примеры тем оформления

Shepherd.js поставляется с несколькими готовыми темами. Через CDN можно использовать следующие CSS-классы в defaultStepOptions или для отдельных шагов:

  • shepherd-theme-arrows — стандартная тема с стрелками.
  • shepherd-theme-default — базовая минималистичная тема.
  • shepherd-theme-dark — тёмная тема для ночного интерфейса.

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

Заключение по подключению через CDN

CDN-подключение Shepherd.js обеспечивает мгновенную доступность библиотеки, упрощает тестирование и ускоряет прототипирование. Основное внимание стоит уделять корректной последовательности подключения CSS и JS, а также фиксации версии для стабильной работы интерактивных туров.

Оглавление