Скрипт блок "Содержание" для материалов

Сегодня мы рассмотрим уникальное решение для более удобной навигации по материалу / статье / новости, блок "Содержание" с списком ссылок / якорей.

Зачем нужен скрипт блок "Содержание" ?

1. Блок выполняет функцию быстрой навигации по материалу.
2. Блок содержит якоря на основные разделы / заголовки статьи.

Как работает скрипт блок "Содержание" ?

Скрипт имеет заранее прописанную функцию и указание поиска по вашему материалу / статье / новости, заголовков, которые завернуты в теги h2 и h3. При обнаружении тегов h2 и h3, скрипт добавляет заголовки, которые внутри этих тегов в блок над статьей и добавляет к ним ссылки / якоря. В результате мы имеем удобный блок навигации, который позволяет быстро перемещаться по содержанию статьи используя созданный список якорей.

Как установить скрипт блок "Содержание" ?

В шаблоне страницы материала и комментариев перед тегом </body> установить такой скрипт:

<script type="text/javascript">
$(document).ready(function(){
 if ( $('.posto-mes h3').length || $('.posto-mes h2').length ) {
 $('.posto-mes h3,.posto-mes h2').each(function(){
 var thisText = $(this).text();
 var anchorText = thisText.replace(/"/g, "'").replace(/ /g, "-");
 var anchorLink = '<a name="' + anchorText + '"></a>';
 var anchorText = '<a href="#' + anchorText + '"><li>' + thisText + '</li></a>'; 
 $(this).before(anchorLink);
 $(anchorText).appendTo('#marker');
 });
 } else {
 $('#marker-remove').remove();
 }
 });
</script>

Важно! Выше выделено красным, класс posto-mes это див внутри которого у нас находится оператор $MESSAGE$ где мы и занимаемся поиском тегов h2 и h3, если у вас другой класс, вам нужно заменить название на свое в скрипте примере выше.

Далее чтобы выводился блок содержание, в шаблоне страницы материала и комментариев модуля где используете скрипт, где-то над оператором $MESSAGE$ прописать код:

<div class="alert alert-secondary" id="marker-remove" role="alert"><p style="text-align:center;font-weight: bold;">Содержание</p>
<ol><div id="marker"></div></ol> 
</div>

Скрипт работает по следующему принципу, если теги h2-h3 обнаруживаются в тексте статьи, блок "Содержание" отображается, в том случае если такие теги не обнаруживаются в тексте материала, блок вырезается скриптом автоматически, чтобы не занимал место на странице материала.

Если вы используете другой скрипт блока "Содержимое страницы", буду благодарен за ссылку на пример реализации которую вы используете.