Как автоматически сгенерировать оглавление с помощью HTML-слотов
Оглавление может значительно улучшить пользовательский опыт многих сайтов, например документация сайтов или же онлайн энциклопедии как википедия. Хорошо разработанное оглавление дает обзор страницы и помогает пользователям быстро перейти в интересующий их раздел.
Традиционно вы можете создавать оглавление либо в HTML, либо с помощью JavaScript, но в последнее время стандартизированные HTML-слоты предоставляют средний путь между двумя. HTML-слот это веб-стандарт, который позволяет добавить заполнители на веб-страницу и позже заполнить его динамически.
Когда использовать
Вы можете разместить
С помощью этой техники вам нужно вручную создать исходный код HTML оглавления. JavaScript только автоматически генерирует текстовое содержание оглавления, на основе заголовков или подзаголовков на странице.
Если вы не хотите, чтобы оглавление присутствовало в HTML, вам нужно генерировать макет и контент с помощью JavaScript.
1. Создайте HTML
Исходный код HTML для оглавления (оглавление) будет внутри тег. Код внутри не обрабатывается, пока не будет добавлено в документ с помощью JavaScript. Наш TOC будет иметь заполнители, проводится в
название атрибут каждого слот указать соответствующие заголовки и подзаголовки в документе.
Ниже вы можете увидеть образец HTML Velociraptor (что в переводе с латыни означает «быстрый захватчик») - это… Велоцираптор был дромеозаврид среднего размера, со взрослыми… Окаменелости дромеозавридов более примитивны, чем… Во время экспедиции Американского музея естественной истории… Velociraptor является членом группы Eudromaeosauria, производной подгруппы из… Образец "Борьба с динозаврами", найденный в 1971 году, сохраняет… В 2010 году Хон и его коллеги опубликовали статью о… Велоцираптор был в некоторой степени теплокровным, так как требовал… Один череп Velociratoptor mongoliensis несет две параллельные… Как видите, каждый заголовок учитывая уникальный И вот HTML-код оглавления, внутри В двух фрагментах кода выше обратите внимание на согласование Прежде чем заглянуть в код JavaScript, который добавит оглавление из Убедитесь, что Теперь мы добавим скрипт, который вставляет оглавление над Фрагмент кода выше создает копию Затем клонированный Если бы мы сбросили счетчик CSS на Вот скриншот вывода: Если хотите свяжите названия оглавления с соответствующими заголовками и подзаголовками добавляя Velociraptor (что в переводе с латыни означает «быстрый захватчик») - это… Велоцираптор был дромеозаврид среднего размера, со взрослыми… Окаменелости дромеозавридов более примитивны, чем… Как вы можете видеть выше, И, заголовки внутри оглавления привязаны: В дополнительной строке выше все Смотрите скриншот связанное оглавление ниже: Вы можете проверить, скачать или разветвить код, использованный в этом посте, на нашем Github Repo. с некоторыми заголовками и подзаголовками.
Описание
Перья
История открытия
классификация
палеобиология
Поведение мусора
метаболизм
патология
слот значение. тег.
слот а также название атрибуты внутри заголовков и тому 2. Пронумеруйте заголовки
к документу, давайте добавить серийные номера для заголовков, используя счетчики CSS. article counter-reset: заголовок; статья h2 :: before counter-increment: heading; content: '0'counter (heading)': ';
Счетчик сброса Правило принадлежит элементу, который является непосредственный родитель всех названий, несущих слот атрибут (какой элемент в нашем коде).3. Вставьте оглавление в документ
тег, внутри контейнер. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true)); document.querySelector ( '# TOC') AppendChild (статья). а также прикрепляет к нему Shadow DOM Tree. Мы тоже добавить копию содержание к этому дереву Shadow DOM. вставляется в элемент теперь присутствует и в оглавлении, однако видны только его заголовки и подзаголовки, которые нашли заполнитель внутри оглавления. тело или же HTML элемент вместо статья, счетчик также посчитал бы список заголовков внутри оглавления. Вот почему вы должны сбросить счетчики у непосредственного родителя заголовков.
4. Добавить гиперссылки
Я бы к заголовкам и привязке их соответствующего текста оглавления вам придется удалить повторяющиеся Я бы значения из клонированного статья.
Описание
Перья
Я бы атрибут добавлен в каждый заголовок и подзаголовок в статье.
Я бы атрибуты удалено из клонированной статьи до прикрепление к нему дерева Shadow DOM. templateContent = document.querySelector ('template'). content; article = document.querySelector ('article'). cloneNode (true); article.querySelectorAll ('* [id]'). forEach ((ele) => ele.removeAttribute ('id')) article.attachShadow (mode: 'closed'). appendChild (templateContent.cloneNode (true) )); document.querySelector ( '# TOC') AppendChild (статья). 
Github демо
