Оглавление (анг. table of contents) — важный элемент юзабилити, который при правильном исполнении значительно упрощает пользователям навигацию по веб-странице, а также даёт представление о контенте. В этом материале мы разберёмся, как сделать правильное автоматическое оглавление страниц сайта на Joomla 3, 4 или 5.

Каким должно быть правильное оглавление? 

Под оглавлением понимается список разделов основного контента веб-страницы, однако это не просто список, а нумерованный список кликабельных ссылок, каждая из которых ведёт к соответствующему разделу. Например, вы можете видеть такой список на текущей странице, а также этот список дублируется в последнем модуле в сайдбаре. Приведём список требований к списку с оглавлением:

  1. Оглавление страницы — это нумерованный список ссылок.
  2. Элементы списка должны отражать внутреннюю структуру страницы.
  3. Каждый элемент списка — это ссылка, ведущая к определённому разделу страницы.
  4. Анкор ссылки — это заголовок соответствующего раздела.
  5. Желательно, чтобы переход к разделам при клике по ссылке осуществлялся плавно (в Bootstrap 5 это работает автоматически).
  6. Желательно, чтобы стиль элементов списка, которые соответствуют текущему разделу, динамически изменялся.

Как можно создавать оглавление страницы?

  1. Вручную 
    Когда вы можете самостоятельно создавать список содержания для каждой страницы в редакторе.
  2. Автоматически 
    Для этого можно написать свой скрипт или использовать плагин Quick Index (только для материалов Joomla).

Создание оглавлений вручную

Первый способ не сложный, но затратный по времени, т. к. вам придётся:

  1. составить список разделов,
  2. расставить якоря по разделам,
  3. сделать пункты списка активными ссылками.

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

Автоматическое оглавление страниц

Рассмотрим вариант автоматического создания оглавлений для страниц сайта на Joomla посредством плагина Quick Index.

Важная информация!
Плагин Quick Index ориентирован на com_content и не подходит для обработки элементов других CCK, таких как ZOO, K2 и т. д.

После того, как вы установите и активируете данный плагин, вам достаточно вставить шорткод (по умолчанию index в фигурных скобках, синтаксис можно менять в настройках плагина) там, где вы хотите, чтобы выводилось оглавление.

Сравнение платной и бесплатной версий плагина Quick Index
ВозможностиБесплатнаяПлатная
Создание оглавлений
Оглавления с помощью шорткода в виде списка ссылок, основанных на заголовках H1-H6 в контенте.
✔️ ✔️
Определение заголовков для оглавлений
Возможность определить, какие заголовки следует включать в оглавления в зависимости от CSS-класса.
✔️ ✔️
Нумерованное или маркированное оглавление
Возможность выбрать тип списка для оглавлений.
✔️ ✔️
Кастомизация CSS
Возможность задавать CSS-классы для элементов оглавления.
✔️ ✔️
Автоматические оглавления
Возможность автоматического создания оглавлений в начале всех статей или отдельных категорий статей.
✔️
Оглавления в модулях
Возможность вывода оглавлений в модулях посредством шорткода
✔️
Определение глубины оглавления
Возможность выбрать, какие заголовки (от H1 до H6) следует включать в оглавление.
✔️
Стили нумерованных списков
Возможность выбрать стиль для пронумерованных оглавлений.
✔️
Индивидуальные стили для уровней вложенности
Возможность выбрать стиль для конкретного уровня вложенности от 1 до 6.
✔️
Нумерация заголовков в контенте
Автоматическое добавление порядкового номера к заголовкам и подзаголовкам, из которых формируется оглавление.
✔️

Какой должна быть структура страницы?

Чтобы плагин формировал правильное оглавление, у контента страницы должна быть правильная структура, которая подразумевает применение тегов H1-H6 в качестве заголовков и подзаголовков контента текущей веб-страницы. Это не только требование для автоматического формирования оглавлений в Joomla с помощью Quick Index, но и важный фактор качества контента в глазах поисковых алгоритмов. 

Важная информация
Раздел с заголовком <h3> (заголовок 3 уровня) должен быть внутри раздела с заголовком <h2> (заголовок 2 уровня), в то время как заголовок первого уровня <h1> является видимым названием всего контента и быть только один на странице.

Иначе говоря, с точки зрения SEO и семантической разметки структура должна быть такой:

<h1>Название материала</h1>
<p>Текст.</p>
<h2>Заголовок раздела</h2>
<p>Текст.</p>
<h3>Подзаголовок раздела</h3>
<p>Текст.</p>
<h3>Подзаголовок раздела</h3>
<p>Текст.</p>
<h2>Заголовок раздела</h2> <p>Текст.</p>

При такой структуре плагин Quick Index сформирует следующее оглавление:

  1. Заголовок раздела
    1. Подзаголовок раздела
    2. Подзаголовок раздела
  2. Заголовок раздела

Где размещать оглавление страницы?

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

Бесплатная версия Quick Index позволяет выводить оглавление только при применении шорткода, он должен быть вставлен в начале контента (иначе оглавление может быть не полным).

Как дублировать оглавление в модуль?

Платная версия позволяет Quick Index выводить оглавление автоматически, а также в модулях при применении шорткода index index article="current" (по умолчанию в фигурных скобках) и при включенной опции Auto Index. Однако плагин не позволяет выводить список содержания и в начале страницы, и в модуле, т. е. если на странице выводится модуль с оглавлением, то в самой статье оно отображаться не будет даже если туда вставлен шорткод.

Решением данной проблемы является применение JS-кода, который будет копировать тег с оглавлением в модуль.

Для этого:

  1. Установите платную версию плагина Quick Index.
  2. В настроках плагина активируйте опцию Auto Index (вкладка Поведение) и выберите нужные категории материалов, если не хотите, чтобы оглавление формировалось для всех материалов.
  3. Создайте модуль типа HTML-код для вывода оглавления и задайте ему CSS-класс .table-of-contents (вкладка Доплнительные параметры) и привяжите его к нужным страницам (вкладка Привязка к пунктам меню).
  4. Добавьте следующий JS-код (в зависимости от шаблона его можно добавить в настройках шаблона либо в JS-файл шаблона):
    jQuery(function ($) {
    //Переносим содержание в sidebar из main
    	if($('.rl_quickindex').length && $('.table-of-contents').length === 1){
    		$('.rl_quickindex').clone().appendTo('.table-of-contents');
    	}else if($('.table-of-contents').length === 1){
                    $('.table-of-contents').remove();
       }
    
    //Активные ссылки в оглавлении
    const qi_links = document.querySelectorAll('.table-of-contents .rl_quickindex a.index-link');
    
    if (qi_links) {
    	qi_links.forEach((link) => {
    		link.anchor = document.querySelector('#' + link.dataset['heading']);
    		if (!link.anchor) {
    			return;
    		}
    
    		link.heading = link.anchor.parentElement;
    	});
    
    	function updateLinks() {
    		const clientHeight = document.documentElement.clientHeight;
    		const scrollTop    = document.documentElement.scrollTop;
    		const scrollHeight = document.documentElement.scrollHeight;
    
    		const heading_max_top  = 0;
    		let heading_max_bottom = clientHeight * .6;
    		let next_max_top       = clientHeight * .3;
    
    		// Adjust the heading_max_bottom if near the end of the page
    		if (scrollTop + (clientHeight * 1.2) >= scrollHeight) {
    			heading_max_bottom = clientHeight;
    		}
    
    		qi_links.forEach((link, index) => {
    			if (!link.anchor) {
    				return;
    			}
    			const top    = link.heading.getBoundingClientRect().top;
    			const bottom = link.anchor.getBoundingClientRect().top
    				+ link.heading.getBoundingClientRect().height;
    
    			// The heading is in the top 60% of the page, so active
    			if (bottom >= heading_max_top && top <= heading_max_bottom) {
    				link.classList.add('active');
    				return;
    			}
    
    			const next     = qi_links[index + 1];
    			const next_top = (next !== undefined && next.heading !== undefined)
    				? next.heading.getBoundingClientRect().top
    				: 0;
    
    			// The next heading is under the top 30% of the page, so active
    			if (bottom < heading_max_top && next_top >= next_max_top) {
    				link.classList.add('active');
    				return;
    			}
    
    			link.classList.remove('active');
    		});
    	}
    	updateLinks();
    	document.addEventListener('scroll', updateLinks);
    }
    });
  5. Добавьте CSS-свойства для класса .index-link.active, чтобы элементы оглавления, соответствующие текущему отображаемому разделу, выделялись на фоне остальных.

В результате на информационных страницах вашего сайта будет выводится правильное оглавление в начале материала, а также в модуле. Кроме этого, активным элементам оглавления будет автоматически присваиваться CSS-класс active, для которого можно прописать свои CSS-свойства, чтобы активный элемент отличался от остальных. Например, если вы хотите, чтобы активные элементы списка имели жирное начертание, вы можете добавить следующий CSS-код  (в зависимости от шаблона его можно добавить в настройках шаблона либо в CSS-файл шаблона):

.index-link.active{font-weight:bold;} 

Видео по теме

Упоминаемые термины:

Joomla, CCK, SEO, Bootstrap