Структура текстового контента

Shepherd.js — библиотека для построения интерактивных пошаговых инструкций (tours) на веб-страницах. Центральным элементом любого тура является текстовый контент, который формирует интерфейс подсказок и направляет пользователя. В Shepherd.js текст представлен с помощью ключевых опций, таких как title, text и buttons.

Заголовок (`title`)

Опция title используется для отображения основного заголовка шага тура. Она может быть передана как строка или как функция, возвращающая строку. Например:

const step = {
  id: 'intro',
  title: 'Добро пожаловать в приложение',
  text: 'Здесь показаны основные функции интерфейса.',
  attachTo: { element: '.header', on: 'bottom' }
};

Статический заголовок — строка, переданная напрямую.
Динамический заголовок — функция, возвращающая текст, что позволяет формировать заголовок в зависимости от состояния страницы.

title: () => `Шаг ${tour.currentStep.index + 1}`

Основной текст (`text`)

Опция text определяет основное содержание шага и может быть как строкой, так и массивом строк или HTML-элементов.

Строка — простой текстовый блок.
Массив строк — каждая строка формируется в отдельный абзац.
HTML-содержимое — позволяет вставлять ссылки, списки, изображения, таблицы.

Пример с массивом строк:

text: [
  'Нажмите на кнопку "Добавить", чтобы создать новый элемент.',
  'Используйте панель фильтров для поиска.'
]

Пример с HTML:

text: '<p>Для быстрого доступа используйте <a href="/help">справку</a>.</p>'

Кнопки и взаимодействие

Кнопки создаются через опцию buttons и позволяют пользователю переходить между шагами тура. Каждая кнопка описывается объектом с ключами text, action и classes.

Пример:

buttons: [
  {
    text: 'Назад',
    action: tour.back,
    classes: 'shepherd-button-secondary'
  },
  {
    text: 'Далее',
    action: tour.next,
    classes: 'shepherd-button-primary'
  }
]

action может быть функцией, вызываемой при нажатии, или встроенными методами Shepherd.js (tour.next, tour.back).
classes позволяют применять собственные стили для каждой кнопки, что важно для соответствия дизайну сайта.

Форматирование текста и мультимедийный контент

Shepherd.js позволяет вставлять HTML-разметку в текст, что открывает возможности для:

Списков — упорядоченных <ol> и неупорядоченных <ul>.
Ссылок и кнопок — <a> и <button> с кастомным стилем.
Изображений и иконок — <img> и встроенные SVG.
Кастомных контейнеров — использование <div> для структурирования сложного контента.

Пример интеграции изображений:

text: `
  <p>Пример нового элемента:</p>
  <img src="example.png" alt="Пример" style="width:100px;">
`

Динамическое обновление текста

Shepherd.js поддерживает изменение содержимого шага в процессе выполнения тура через методы updateStepOptions и setContent.

const step = tour.addStep({
  id: 'dynamic',
  title: 'Начало',
  text: 'Первоначальный текст'
});

step.updateStepOptions({
  title: 'Обновлённый заголовок',
  text: 'Теперь текст изменён динамически'
});

Метод setContent позволяет напрямую менять текст без пересоздания шага:

step.setContent('<p>Новый HTML-контент</p>');

Локализация и мультиязычность

Для поддержки нескольких языков удобно использовать функции, возвращающие текст, основанный на текущей локали:

text: () => translations[currentLanguage].tourStep1

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