Рассмотрим пример как сделать автоматическое оглавление статьи, на основании заголовков H1-H6 внутри статьи.
Для этих целей будем использовать JavaScript и немного CSS для стилизации оглавления.
Для начала нужно разметить страницу статьи.
1. Обернем статью в тег с классом article__container
2. В итоге весь контент статьи с заголовками должен находится внутри этого класса
3. В нужном месте вывода оглавления вставьте ul-тег с классом article__summary-list. В нем будет выводиться наше оглавление
В месте где нужно выводить оглавление нужно вставить html теги
<ul class="article__summary-list"></ul>Далее нужно добавить JS-код для вызова на странице
let summaryContainer = document.querySelector('.article__summary-list');
if (summaryContainer) {
document.querySelectorAll('.article__container h1, .article__container h2, .article__container h3, .article__container h4, .article__container h5, .article__container h6').forEach((item, key) => {
item.setAttribute('id', `article-${key+1}`);
let link = `${key+1}.${item.inner} `;
})
}