1. Зачем нужен скрипт блока "Содержание"?
2. Как работает данное решение?
3. Пошаговая инструкция по установке скрипта
   • Добавление скрипта в шаблон
   • Установка стилей для оформления блока
   • Добавление кода для вывода блока "Содержание"

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

Пример материала с блоком "Содержание"

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

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

Как работает данное решение?

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

Пошаговая инструкция по установке скрипта

1. Добавление скрипта в шаблон

Перейдите во вкладку "Дизайн" → "Управление дизайном" → "Редактирование шаблонов" → "Страница материалов и комментариев к нему" перед тегом </body> добавьте следующий скрипт:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
 const headings = document.querySelectorAll('.eMessage h2, .eMessage h3');
 const marker = document.getElementById('marker');
 const markerRemove = document.getElementById('marker-remove');

 if (headings.length > 0 && marker) {
 headings.forEach(heading => {
 const thisText = heading.textContent;
 const hash = self.crypto.randomUUID()
 
 // Создаем элемент якоря
 const anchorLink = document.createElement('a');
 anchorLink.name = hash;
 heading.parentNode.insertBefore(anchorLink, heading);

 // Создаем cсылку в списке
 const listItem = document.createElement('a');
 listItem.href = `#${hash}`;
 listItem.textContent = thisText;

 // Создаем элемент списка
 const anchorItem = document.createElement('li');
 anchorItem.appendChild(listItem);

 // Добавляем ссылку в список маркеров
 marker.appendChild(anchorItem);
 });

 // Удаляем класс u-hidden с content-wrapper
 const contentWrapper = document.getElementById('contentwrapper');
 if (contentWrapper) {
 contentWrapper.classList.remove('u-hidden');
 }
 
 } else if (markerRemove) {
 // Удаляем блок с маркером, если не найдены заголовки или маркер
 markerRemove.remove();
 }
});
</script>

Важно! Класс .eMessage — это <div>, внутри которого находится оператор $MESSAGE$, где производится поиск тегов <h2> и <h3>. Если у вас другой класс, замените его название в скрипте.

#contentwrapper {
 flex-grow: 1; 
}

.contents-block:has(.e-cover-image) {
 float: left;
}

.contents-block:has(#contentwrapper) {
 float: none;
}

.contents-block:has(.e-cover-image):has(#contentwrapper){
 float: left;
 margin-bottom: 30px;
 width: 100%;
}

.contents-block:has(#contentwrapper.u-hidden){
 margin-right: 30px;
}

.contents {
 color: var(--tpl-dark-800);
 background-color: var(--tpl-dark-100);
}

.contents-block {
 display: flex;
 width: auto;
 float: left;
 gap:30px;
}

.contents-secondary {
 padding: 15px;
 border: 1px solid transparent;
 border-radius: 16px;
}

@media screen and ( width < 1200px ) {
 .contents-block {
 flex-wrap: wrap;
 }
 .contents-block:has(.e-cover-image):has(#contentwrapper) {
 .e-cover-image { margin:0; width: 100%; }
 }
}

 <div class="contents-block">
 <?if $COVER_IMAGE$?>$COVER_IMAGE$<?endif?>
 <div id="contentwrapper" class="u-hidden">
 <div class="contents contents-secondary" id="marker-remove">
 <p style="text-align:center;font-weight: bold; font-size: 1.17em;">Содержание</p>
 <ol class="content-list" id="marker"></ol>
 </div>
 </div>
 </div>