Как сделать блок "Содержание" для материалов
- Зачем нужен скрипт блока "Содержание"?
- Как работает данное решение?
- Пошаговая инструкция по установке скрипта
В этой статье мы рассмотрим, как создать удобный блок "Содержание" для навигации по материалу, статье или новости. Этот блок содержит ссылки-якоря, ведущие к основным разделам текста.
Пример материала с блоком "Содержание"
Зачем нужен скрипт блока "Содержание"?
Блок "Содержание" позволяет пользователям быстро переходить к нужным разделам статьи, облегчая восприятие материала. В нем автоматически формируются ссылки на заголовки <h2> и <h3>, что обеспечивает удобство навигации.
Как работает данное решение?
Скрипт ищет заголовки в тексте материала (теги <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);
// Создаем ссылку в списке
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 — это блок, внутри которого находится оператор $MESSAGE$. Если у вас используется другой класс, замените его название в скрипте.
2. Установка стилей для оформления блока
Добавьте следующий CSS-код в шаблон "Таблица стилей (CSS)":
#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%;
}
}
}
3. Добавление кода для вывода блока "Содержание"
Чтобы отобразить блок "Содержание", добавьте следующий код в шаблон "Страница материалов и комментариев" модуля перед оператором $MESSAGE$:
<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>
После внесения всех изменений блок "Содержание" будет автоматически отображаться при наличии заголовков в тексте материала. Это существенно улучшит навигацию по вашим материалам и сделает их более удобными для пользователей.