Как добавить автоматическое оглавление в статьи

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

Зачем это нужно

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

Как это работает

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

Шаг 1. Вставьте контейнер в шаблон

В том месте страницы, где должно быть оглавление, добавьте пустой контейнер:

<div id="toc-ВАШ_ТОКЕН"></div>

Токен сайта указан в панели управления. Контейнер можно поставить сразу после вступления, перед основным текстом.

Шаг 2. Включите функцию

В панели управления сайтом отметьте функцию "Оглавление". Дополнительный код для этого не нужен.

Шаг 3. Укажите селектор статьи (необязательно)

По умолчанию заголовки берутся из родителя блока оглавления. Если структура страницы сложная, укажите селектор контейнера статьи, например .post-content или main article. Тогда в оглавление попадут только заголовки внутри этого элемента.

Уровни заголовков

В оглавление попадают заголовки от H2 до H4. Используйте H2 для разделов, H3 для подпунктов. Если понижать уровень ради размера шрифта, структура станет запутанной и в списке, и для поисковых систем.

Настройки

В панели управления можно задать:

• текст на кнопке раскрытия (по умолчанию "Оглавление");
• показывать блок развёрнутым или свёрнутым. По умолчанию оглавление свёрнуто и не занимает место.

Частые ошибки

• Контейнер не найден. Проверьте, что id в шаблоне совпадает с токеном сайта и что контейнер есть именно на этой странице.
• В оглавлении лишние заголовки. Укажите селектор статьи, чтобы ограничить область сбора.
• Заголовки не попадают в список. Убедитесь, что это настоящие теги H2-H4, а не текст, оформленный крупным шрифтом.

Итог

Автоматическое оглавление подключается одним контейнером и чекбоксом в панели. Оно помогает клиенту и повышает дочитывания длинных материалов. Если ещё не подключили скрипт, начните с инструкции "Как подключить скрипт newUX".