Или: Почему ваши читатели путаются в длинных текстах и как JS-скрипт может стать их навигатором

🧭 Пролог: Читатель устал. Помогите ему не заблудиться

Представьте: вы заходите на сайт, находите полезную статью на 15 000 знаков, начинаете читать... и через пять минут понимаете, что уже не помните, о чём было в начале, и не знаете, где искать нужный раздел.
Знакомо?
В 2026 году средняя длина текста в топе поисковой выдачи выросла на 40% . Люди пишут подробнее, стараются ответить на все вопросы сразу. Но читатель не становится усидчивее. Он хочет быстро найти то, зачем пришёл, и уйти.
Оглавление (Table of Contents) — это не просто «красивая фишка». Это:

• Навигация для тех, кто ищет конкретный ответ
  
• Структура для тех, кто хочет понять логику статьи
  
• SEO-плюшка для поисковиков (якорные ссылки, быстрые переходы)
  
• Удержание для тех, кто боится потеряться
  

Хорошая новость: вам не нужно ничего ставить со стороны. Всё, что нужно — правильно расставить заголовки в статье и подключить один скрипт.

📚 Акт 1: Зачем вообще нужны заголовки (кроме красоты)

1.1. Для читателя — карта текста

Заголовки — это дорожные указатели. Человек скроллит страницу, видит H2, H3, H4 и понимает:

• «Ага, тут про установку, а тут — про настройку»
  
• «Это мне не нужно, пропускаю»
  
• «Вот это как раз то, что я искал»
  

Без заголовков текст превращается в кирпичную стену. Читатель либо продирается сквозь неё, либо уходит.

1.2. Для поисковиков — иерархия смыслов

Яндекс и Google любят структуру. Они смотрят на заголовки, чтобы понять:

• Какая тема главная (H1)
  
• Какие подтемы раскрываются (H2, H3)
  
• Насколько логично построен текст
  

Правильная иерархия заголовков = +5% к шансу попасть в топ.

1.3. Для самого автора — дисциплина мышления

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

• «А что я хочу сказать в этом разделе?»
  
• «Не повторяю ли я сам себя?»
  
• «Не слишком ли я углубился?»
  

Вывод: Заголовки нужны всем. Но просто заголовков мало. Нужно оглавление, которое соберёт их в единую навигацию.

🔧 Акт 2: Как это работает (для тех, кому неинтересно — можно пропустить)

Мы написали небольшой jаvascript-скрипт, который:

1. Находит все заголовки H2, H3, H4 внутри вашей статьи
   
2. Генерирует им уникальные ID (если их нет), чтобы на них можно было ссылаться
   
3. Строит древовидное оглавление с учётом вложенности
   
4. Вставляет этот блок в нужное место страницы
   
5. Добавляет плавный скролл — при клике на пункт читатель перемещается к нужному месту
   

Всё это работает на стороне браузера. Никакого PHP, никакой нагрузки на сервер, никаких проблем с кэшированием. Просто вставили код — и забыли.

🎨 Акт 3: Три способа внедрения (выбирайте свой)

Вариант 1. Быстрый старт (для тех, кто не хочет копаться в шаблонах)

Если у вас сайт на DLE, но вы не хотите редактировать шаблоны глубоко — можно вставить всё сразу в fullstory.tpl.
Шаг 1. В нужном месте шаблона (там, где хотите видеть оглавление) вставьте:

html

Шаг 2. Найдите тег {full-story} и оберните его в div с классом:

html

    {full-story}

Шаг 3. В самый низ файла fullstory.tpl добавьте:

html
{include file="custom/fullstory/tcse4toc.tpl"}

Шаг 4. Создайте файл /templates/ваш_шаблон/custom/fullstory/tcse4toc.tpl и скопируйте туда содержимое стилей и скрипта (весь код, который я дал выше).
✅ Плюсы: Всё в одном месте, легко править.
❌ Минусы: Код дублируется в каждой странице, чуть медленнее загрузка.

Вариант 2. Правильный (для тех, кто дружит с CSS и JS)

Этот вариант — профессиональный. Стили выносятся в общий CSS-файл, скрипт — в общий JS-файл. В шаблоне остаётся только разметка.
Шаг 1. В ваш основной файл стилей (style.css) добавьте весь блок стилей из моего кода.
Шаг 2. В ваш основной файл скриптов (script.js) добавьте весь JS-код.
Шаг 3. В fullstory.tpl:

• Оберните {full-story} в
  
  
  
• Вставьте
  
  в нужное место
  

✅ Плюсы:

• Скрипт и стили загружаются один раз на весь сайт
  
• Легче обновлять
  
• Меньше кода в шаблоне
  

❌ Минусы:

• Нужно иметь доступ к основным файлам
  
• Чуть сложнее настройка для новичков
  

Вариант 3. Минимальный (для тех, кто хочет только навигацию, без сворачивания)

Если вам не нужна кнопка «Свернуть/Развернуть», можно упростить стили и убрать обработчик клика. Но я рекомендую оставить как есть — пользователи любят управлять интерфейсом.

🧩 Акт 4: Что умеет этот скрипт (особенности)

4.1. Правильная нумерация

Скрипт не просто выводит заголовки списком. Он строит иерархию:

1. Первый раздел (H2)
   

1.1. Подраздел (H3)
1.2. Ещё подраздел (H3)

1. Второй раздел (H2)
   

Нумерация автоматическая, сбрасывается на каждом уровне.

4.2. Сворачивание/разворачивание

По умолчанию оглавление видно полностью. Но если места мало, можно кликнуть на заголовок — блок свернётся в компактную кнопку. Это удобно на мобильных.

4.3. Адаптивность

На телефонах отступы уменьшаются, шрифт становится чуть меньше, но структура сохраняется. Всё читаемо.

4.4. Тёмная тема

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

4.5. Печать

При печати страницы оглавление остаётся (в отличие от многих плагинов) и даже нумерация сохраняется. Полезно, если кто-то захочет сохранить статью в PDF.

💡 Акт 5: Пример работы (как это выглядит)

Допустим, у вас есть статья с такой структурой:

html
Как выбрать хостинг
Текст про выбор...

Критерий 1: Скорость
Текст про скорость...

Критерий 2: Цена
Текст про цену...

Акции и скидки
Текст про акции...

Как перенести сайт
Текст про перенос...

Скрипт превратит это в:

📖 Содержание ▼
1. Как выбрать хостинг
1.1. Критерий 1: Скорость
1.2. Критерий 2: Цена
2. Как перенести сайт
При клике на «1.2. Критерий 2: Цена» страница плавно прокручивается к этому заголовку. В адресной строке появляется якорь #tcse4toc-h3-1-2, которым можно поделиться.

🎯 Акт 6: Для каких сайтов это особенно полезно

Тип сайта	Зачем им оглавление
Блоги, статьи, новости	Читатели могут быстро перейти к интересующей части
Интернет-магазины	В описаниях товаров — к характеристикам, доставке, отзывам
Документация, мануалы	Пошаговые инструкции без оглавления — мучение
Образовательные порталы	Студенты ищут конкретные темы
Корпоративные сайты	Длинные страницы «О компании» с историей и миссией

Обратная сторона: Если статья короткая (до 1000 знаков) и имеет 1-2 заголовка — оглавление не нужно. Оно будет выглядеть глупо.

⚠️ Акт 7: Технические тонкости

7.1. Что если заголовки уже имеют ID?

Скрипт проверяет: если у заголовка уже есть id, он использует его. Если нет — генерирует свой. Так что существующие якоря не сломаются.

7.2. Что если заголовки пустые?

Скрипт пропускает заголовки без текста. Не переживайте.

7.3. А если у меня H1 внутри статьи?

Скрипт игнорирует H1 по умолчанию. Обычно H1 — это заголовок самой статьи, его не включают в оглавление. Если нужно — можете поправить конфигурацию.

7.4. Совместимость с браузерами

Скрипт использует современный jаvascript (ES6), но все основные браузеры (Chrome, Firefox, Safari, Edge последних 3 лет) поддерживают его. На древнем IE работать не будет. Но у кого сейчас IE?

🚀 Эпилог: Сделайте это сегодня

Внедрение оглавления занимает 10-15 минут даже у новичка. Эффект:

• Читатели дольше остаются на сайте
  
• Показатель отказов снижается
  
• Поисковики видят структуру
  
• Вы выглядите профессионально
  

Что делать прямо сейчас:
1. Скопируйте код стилей и скрипта.
2. Выберите один из трёх способов внедрения.

1. Скопируйте код стилей и скрипта.
   
2. Выберите один из трёх способов внедрения.
   
3. Проверьте на тестовой статье.
   
4. Радуйтесь, когда читатели скажут «О, как удобно!».
   

P.S.
Главное — не забывайте сами структурировать статьи. Скрипт лишь показывает то, что вы написали. Если заголовки кривые — и оглавление будет кривым.
Удачи в навигации! 🧭

Стили и скрипты для добавления в свои шаблоны

Стили спойлера реализованного через теги DL

Ссылка на код JS скрипта

/templates/ВАШ_шаблон/js/tcse4toc.js

Готовый файл custom/fullstory/tcse4toc.tpl

[attachment=111:tcse4toc.tpl]